Skip to main content

Configuring OnePlugin Fields

General Settings#

Docusaurus

Plugin Name

The 'plugin name' field allows you to change the name of the plugin as it appears through out the control panel. This is a useful feature for design, development and marketing agencies that need to white label services and technologies.

Enable Caching

Enable caching to improve website load times, by caching the generated ouput tags, which are pregenerated and serve the required HTML without a direct call to the database. An example of a record which is stored against a 'hash key' in the cache is a OnePlugin Fields uses a data-based intelligent algorithm to cache items and ensures the cache hit will be a miss if any of the twig parameters have changed or if there is a change to the the selected data item.

Animated Icons#

Default Primary and Secondary Color

'Animated icons' have a primary and secondary stroke color. Within the Craft CMS control panel a global setting is provided to set the animated icons default colors. This is particularily useful as it allows for content to match your brand guidelines and website styles. Utilisibg 'color picker' Here you can specify the default values for the primary and secondary stroke colors. These settings will then be applied in the control panel on all areas where we are listing animated icons. You may specify the color theme of your website here so that you don't have to change the colors when you add a new shiny animated icon.

Embed animated icons within the HTML template or in the site page

This is another useful setting which embeds the animated icon data into the generated output tag, which is rendered as HTML with relevant paramaters preset. Turning this On will circumvent the need for a server round trip in order for the site to display animated icons.

SVG Icons#

Default Stroke Color

SVG Icons are able to be given a global default color via a color picker in the control panel. This allows for all SVGs to be previewed according to your style guide and allow for uniorm and effient population of content.

Image Optimization#

OnePlugin Fields automatically creates & optimizes responsive image transforms. By using native Craft transforms for all the images that are uploaded to the your site via the control panel. These responsive image transforms are created when an asset is saved, rather than when a page load occurs and an asset is requested. to ensure that frontend performance is optimal. OnePlugin Fields outputs image tags using a picture element as the default option, letting browsers decide which image set they want to use based on the device dimensions.

You can specify the settings to be used for creating image transforms in this section.

Allow Upscaling

This setting will allow decide whether you want your images to be upscaled or not. This setting along with the actual width and height of the image will be used in deciding whether we should create image transforms for the saved asset.

Output File Type

There are three image file formats popular among web designers and developers.

Docusaurus

OnePlugin Fields gives you four options to choose the output image file format we shoudl use when creating responsive images.

  • Same as input - Selecting this option will creaste responsive images in the same format the asset was saved. So a PNG asset will have responsive images generated as PNG's itself.
  • WEBP - Webp is more aggressive and better optimized compression algorithm than JPG and PNG with the objective of reducing file sizes(usually by 25 to 35%) with minimal quality loss. WebP also supports transparency, like PNG and GIF images. Selecting this option, a PNG asset will have it's responsive images generated as Webp files.
  • JPG - JPG is the most popular lossy image compression standard and digital image format in the world. Selecting this option, a PNG asset will have it's responsive images generated as JPG files.
  • PNG - PNG is a lossless compresssion, by default format known for it's support for transparency. Selecting this option, a JPG asset will have it's responsive images generated as PNG files.

Output Tag

Modern day web designers often use high-resolution images to increase user attraction. But as developers, you must be really careful to choose the correct HTML element to use. Suppose you use a simple IMG tag for high-res image. In that case, that same image is used in each device your website loads, and indeed it will result in performance issues in devices with lower screen resolutions like mobile devices.

This issue can be easily addressed with the picture tag by using srcset and sizes attributes.

OnePlugin Field gives you two options to choose for the output tag.

  • PICTURE tag - displays images using picture tag letting browsers decide which image set to use based on the device dimensions.
  • IMG tag - displays images using the IMG tag.
đŸ”Ĩwarning

If you have selected Output File Type as WEBP, then you should be aware that some older versions of Safari browser doesn't support WEBP image file format. But to make sure the user experience is seemless, OnePlugin Fields generates fallback JPG images which are used as another source set for browsers that doesn't support WEBP. So in this case, you should select PICTURE as the Output Tag

Profiles for Image Variants

Making your images responsive means that your browser downloads and renders a different sized version of that image based on the size of the image on your page and the screen resolution.

This setting allows you to define the number of image variants we should generate depending on the image's original size and the Upscale setting. OnePlugin Fields will always generate image transforms by preserving the aspect ratio so as to ensure they aren't squashed. So you need to specify just the width of the media breakpoints and the height will be calculated based on the aspect ratio.

You can also specify the quality (in percentage) of the genarated image transforms in this section.

You can see the generated image variants by double clicking the asset in the Control Panel.

Docusaurus

Google Maps#

Google Maps API Key

Google Maps API Key is required to embed Google Maps on your website.

However that's not completely true. OnePlugin Fields can work without API keys but your options will be restricted compared to what you can achieve with an API key. To find out more about how to embed Google Map, checkout the details here

ℹī¸Get Api Keys

More details can be found here

You can follow the step by step instructions.

  1. Goto Google Maps Platform
  2. Click on the 'Get Started' button. In the window that opens, you will be asked to create a Google account or login to your existing one.
  3. Google Maps are not free anymore and you have to enable Billing to proceed (You start with a 300$ credit if this is your first time). Click Next and enter your card details to proceed (You will be charged $0.01 for verification).
  4. After setting up your payment profile, you will be taken the Google Cloud Platform dashboard.
  5. Select an existing project or create a new one.
  6. Select Library from the menu on the left
  7. Add Maps Javascript API, Maps static API, Maps Embed API and Place API.
  8. Now goto Credentials and select Create newe APi Key.
  9. Now copy the generated Api key and paste it in the settings page.