Skip Navigation
Buy Now
Home » Course lessons » Displaying Images with Toolset in WordPress

Displaying Images with Toolset in WordPress

Toolset allows you to display responsive images on your site, which perfectly fit your layouts and load quickly.

Images and site performance

The speed of your site is crucial for a good user experience SEO. Studies have shown visitors will abandon pages that take more than a few seconds to load. 

Images are among the files that impact the page loading speed the most. WordPress and Toolset make the images on your site load efficiently by setting the following:

  • Exact width and height values
  • An attribute called “lazyload” ensures that the image loads only when the browser viewport is within a certain distance from it
  • An attribute called “srcset” provides the same image in different sizes so browsers can automatically select the best-looking image according to the device

All of this is applied automatically in all places including Views and WordPress Archives. 

Displaying images with Toolset

Toolset provides multiple blocks for displaying your images:

  • Image block
  • Gallery block
  • Slider block
  • WooCommerce Product Image block

Besides allowing you to manually select images, all these blocks can also display images coming from Dynamic Sources like custom fields. 

For example, to display a photo of a gym trainer for which you have a custom field, you simply select the Dynamic Source (i.e. custom field) that holds the trainer photo.

Using the Toolset Image block to display dynamic images coming from a custom field

Setting the image size and cropping options

Toolset image blocks allow you to customize the size and cropping of any image you insert.

This is important for different reasons:

  • Images can often be of different sizes and aspect ratios. Cropping them allows you to make them all fit the exact size you set.
  • In many cases, you don’t need to display full-sized images. They’ll just take longer to load. Instead, you can use one of the image’s smaller versions, or even set a custom one.

The following two examples of a Toolset Image Slider block show how simply turning on the crop option can help the slider look much better.

Toolset Image Slider block with the cropping turned off

Toolset Image Slider block with the cropping turned on

Cropping with Toolset’s Image block

Select the Toolset Image block and expand the Image Settings section in the sidebar. 

Use the Image Size dropdown to select one of the standard sizes.

Click the Add Custom Size link to apply any custom size to the image. Here, you can make the image scale according to its proportions or crop it to exactly fit the size you set.

Setting a custom size in the Toolset Image block options

Select the Toolset Gallery block and expand the Grid Settings section in the sidebar to set whether images should be cropped.

Expand the Gallery Settings section to set the size of the images displayed by the gallery.

Settings for size and cropping of images displayed by the Toolset Gallery block

Cropping with Toolset’s Image Slider block

Select the Toolset Image Slider block and expand the Slider Settings section in the sidebar. Toggle the Crop images option on or off, depending on what you need.

Setting the cropping option for the Toolset Image Slider block

Cropping with WooCommerce Product Image block

Select the WooCommerce Product Image block and expand the Settings section in the sidebar. 

When the Show Gallery Images option is turned off, the Image Size dropdown and the Add Custom Size link appear. Use them to select the appropriate size and cropping for the product image.

Setting the size options in the WooCommerce Product Image block

Styling options for images and illustrations

Besides the basic options like size and cropping, Toolset image blocks offer you an array of styling options for the images they display. This includes options like background color, margins, paddings, borders, shadow, sale badge, captions, and much more.

Working with images also involves choosing the best ones, optimizing them, and other important customization.

For details about this whole topic, visit our lesson about designing and choosing images and illustrations.

Dario
Updated
July 16, 2021
Send feedback to our documentation team