Blog

back to blog

Responsive Breakpoint Sizes Config

Have you been wondering what does the "Responsive Breakpoint Sizes" configuration does and how to use it?

With screens getting larger and larger resolutions and the variety of devices there is, content providers like Atlantis CMS need to be more flexibe in serving proper media responses. Everybody wants to have their mobile sites loading fast and snappy but maintain large and enticing photography on the desktop versions.

Fortunately, HTML5 brings us the "picture" tag. By definition:

The most common use of the element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.

So this is great, but how does it fit into Atlantis CMS?

The "Responsive Breakpoint Sizes" in the Atlantis Config section helps you define how your plain "img" tags are automatically converted to "picture" tags. Let's look at the anatomy of the "picture" tag:

picture
 source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"
 source media="(min-width: 465px)" srcset="img_white_flower.jpg"  img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"
picture

So what we have here is a definition of different img sources that represents the same image at different resolutions. In our "Responsive Breakpoint Sizes" box we need to enter the desired resolutions at which the sources are defined. By default it will be set to 1200/800. Which means that the breakpoints will be 1200px and up , between 800px and 1200px and under 800px. What are the breakpoints is up to you of course. Every time you upload an image using the media section of the Atlantis CMS you produce 3 types of sizes for each image (defined under "Responsive Images Box"), roughly translated as "desktop/tablet/phone" sizes. So taking this together with the "Responsive Breakpoint Sizes", Atlantis will use the "desktop" size as the source for the largest resolution, the "tablet" for the medium one and the "phone" for the smallest.

How do I use this while working with the CMS?

There is no need for you to manually create the "picture" tag. Atlantis will convert a plain "img" tag into a "picture" tag for you automatically. All you need to do is to add the following attribute to your "img" tag : data-responsive="on". That's all!