Responsive Image
Intermediate
Watch the video to see the add-on in action!
With the „Responsive Image“ add-on it is possible to create sets for images for responsive views. Moreover, every image set can contain any number of variations of pictures. Thus, you can ensure that images are cut to size perfectly for all devices. You can assign parameters to each individual image in a set, such as required minimum width, maximum width, pixel density, orientation (portrait / landscape), etc. The add-on comes with a block element as well as with its own attribute type in order to be able to integrate the image sets, which are defined in the backend, into the frontend. With the block element you can easily and quickly integrate the picture files into your page without any programming knowledge. The block element is a modified version of the core image block element. For more exotic applications you can add the "Responsive Image"- attribute to a page from the sitemap for example. By doing this, it would be possible to generate the entire page background from a image set. Note: Programming skills are required for integration through attributes! The provided attribute only serves as an aid for more complex integration possibilities. The add-on mainly addresses beginners who want to integrate picture sets via the included block element.
What happens in the background?
The add-on generates CSS media queries based on the defined information from the backend. The generated media queries instruct the browser to download the image only if the defined operations (width / height / pixel density etc.) apply. Media queries are supported since CSS 3. So, the add-on works with all modern browsers.
Whom does this add-on address?
This add-on is just right when it comes to presenting images perfectly on all devices. When it is important that the same motif is always displayed perfectly in both the mobile portrait mode as well as on the 4K retina display or the tablet in landscape mode. A positive side effect: The media queries only load the requested images. These are perfectly scaled for the device. Especially on mobile devices this saves a lot of file size, which leads to faster loading times and this consequently leads to fewer visitor crashes and better SEO results.
Is the add-on difficult to use?
The add-on is kept relatively simple itself. That means laypersons with concrete5-beginner knowledge know how to handle it. However, the handling of the add-on requires theoretical knowledge of CSS media queries and that users of the software are tech-savvy enough to be able to crop the images in advance by using Adobe Photoshop or similar image editing softwares. This is the only reason why the add-on is directed only to "intermediates" despite the simple handling.
Have you already seen my other add-ons? Click here for more information.
