Toolset allows you to display responsive images on your site, which perfectly fit your layouts and load quickly.
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.
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.
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
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.
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.
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.
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.
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.
- Styling Custom Searches
- Styling a Site Header and Footer
- Styling Views and Archives
- Styling Single-post Templates
- How to Design and Choose Images and Illustrations
- Show all related topics...
- Choosing and Applying Colors in Your Site
- Using Typography for Better Website Readability
- WordPress Site Identity
- Where a WordPress Sites Design Comes From
- Adding Custom CSS to Templates, Archives and Views
- YouTube Videos with Advanced Options
- Styling Front-End Forms
- Creating a Hero Section
- Adding Dynamic Content to Your Homepage
- Creating Responsive Columns and Grids
- Creating Responsive Designs
- Advanced Styling with Container Blocks
- Display Content Conditionally