How to Build Responsive Images with srcset

An important part of a responsive website are responsive images. In this article, we’ll learn more about responsive images on the web and how to build them.

As an example we use the new component Gallery Pro.

Step 1
Go to the Background Settings tab and choose Custom Background to "Yes"
Step 2
Use Image Thumbnails (Srcset), "Yes"
Step 3
Set thumbnails widths. Set the width of the thumbnails in px. Separate multiple widths with a comma. (e.g. 300, 600, 1024) A thumbnail is created for each width and is saved under ../images/ui-themebuilder-thumb/[COMPONENTNAME]/
Step 4
Select a high resolution Background Image. And Now save the Component / Page Settings.

ui/Theme-Builder create automatically thumbnails for responsive images with srcset attribute base on the image width.


2 comments

  • Happy New Year, Danie. I looked why the folder doesn't exist ...
    The folder "images/ui-themebuilder-thumb/" is not created automatically. You have to create the folder manually and set the write access to "777".

    I hope I could help
  • Hey i followed your instructions but there is no folder (ui-themebuilder-thumb) in my jommla picture folder

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.