Responsive Carousel. Part 1

Today, we will discuss the implementation of a carousel in AEM.

We created a responsive carousel with adaptive images and sigthly which achieved the following specs:
Full Responsiveness. On the desktop, it had navigation arrows, which displayed an overlay text on each slide, and on mobile devices, working with swipe and “navigation dots”.

Adaptive images. The slide images were shown based on the device width. We had different renditions (full, mid, and low resolutions) that got loaded, so we could reduce the load times.
And the last, when the screen size gets changed (for example, turning a tablet from portrait into landscape) the image must be reloaded on the fly so we don’t display a poor quality rendition for incorrect screen size.

The following images display the carousel we ended up creating on different screen sizes (smartphone, tablet, desktop).






Why is this behavior desired and why you should do it as a standard

As the mobile and responsive web has been growing each year, the biggest problem remains. That is image handling. Why?
Generally, mobile devices have limited bandwidths
There are a lot of countries where the 3G connection is still the standard
Scaling large images down for mobile is very inefficient
High-resolution devices need 2x sized images

The W3C-proposed picture elements use media queries to determine the source to use for image elements. The picture element uses element attributes to associate media queries with image paths.

It would be good to use the picture element, but the current support of this feature is not widely supported, as the following chart shows:



Instead of that, we used the picturefill scripts that are included in the adaptive image component located at the libs/foundation/components/adaptiveimage. This script, emulates the functionality of HTML’s picture element, it has some drawbacks, but they are outweighed by the benefits.

This is the current gold standard of Javascript-based responsive image solutions. The inclusion of an IMG wrapped in NOSCRIPT tags means that at the very least the smallest image option will be loaded.
How Picturefill works

The picturefill.js library calls window.matchMedia to evaluate the media queries that are defined for a set of div elements. Each div element also specifies an image source. The source is used when the media query of the div element returns true.

The picturefill.js library requires an HTML code that is similar to the following example:

<div data-picture>
<div data-src=’path to default image’></div>
<div data-src=’path to small image’ data-media=”(media query for phone)”></div>
<div data-src=’path to medium image’ data-media=”(media query for tablet)”></div>
<div data-src=’path to large image’ data-media=”(media query for monitor)”></div>
</div>

When the page is rendered, picturefull.js inserts an img element as the last child of the <div data-picture> element:

<div data-picture>
<div data-src=’path to default image’></div>
<div data-src=’path to small image’ data-media=”(media query for phone)”></div>
<div data-src=’path to medium image’ data-media=”(media query for tablet)”></div>
<div data-src=’path to large image’ data-media=”(media query for monitor)”></div>
<img src=”path to medium image”>
</div>

IMAGE REFERENCE MODIFICATION SERVLET (From Geometrixx Common)

Combined with Picturefill, we use a servlet which generates size attributes for the img element to scale an image on the web page. The info.geometrixx.commons.impl.servlets.AdaptiveImageComponentServlet class extends the AbstractImageServlet class. If you have the cq-geometrixx-commons-pkg package installed, the AdaptiveImageComponentServlet source code is located in the /apps/geometrixx-commons/src/core/src/main/java/info/geometrixx/commons/impl/servlets folder.

Calling the servlet
The servlet is bound to cq:page resources and supports the .jpg file extension. The servlet selector is an image. Therefore, Sling resolves HTTP request URLs of the following format to this servlet:

path-to-page-node.image.jpg

For example, Sling forwards HTTP requests with the URL:
http://localhost:4502/content/geometrixx/en.image.jpg

to the Image Reference Modification Servlet.

Three additional selectors specify the requested image width, height, and (optionally) quality. The following example requests an image of width 770 pixels, height 360 pixels, and of medium quality.

http://localhost:4502/content/geometrixx/en.image.770.360.MEDIUM.jpg

For this example, we used the OOTB Geometrixx Servlet, but usually, you would want to create and customize your own selectors and images sizes. In that case, you should use the Adaptive Image foundation component with which you can configure the servlet to accept the specified widths. To change the default supported widths (320, 480, 476, 620, and full) use the Web Console (http://localhost:4502/system/console/configMgr) or a sling:OsgiConfig node.

In the console, you can look for Adobe CQ Adaptive Image Component Servlet on the services list and modify or add new ones.



In our next post, we will show some implementation details and show the reduction in terms of load that the adaptive image provided to us.