Media

Media

The Media section of the administrative panel can be used to add all kinds of media (predominantly images but you can also upload other type of assets such as PDF files). You can also create galleries from those images. You can reduce the file size of your images by relying on the TinyPNG module which will automatically reduce the file size of your image assets whenever you upload one. In terms of galleries, Atlantis comes preinstalled with a gallery that has the ID of 1 and it is named Page Preview. Whatever you put in this gallery, can be chosen from the Related Images tab of the Add/Edit Pages sections of Atlantis.

Since 1.0.2

To be responsive ready, we've added a new feature. You will find a new config field in under the Config menu called 'Responsive Breakpoint Sizes', where you can define where the breakpoints are. The media by default is creating 3 versions of the file you upload based on the configuration you've entered under 'Responsive Images' config. So when editing pages or patterns you can use the following:

copy
<img src="large.jpg" alt="" data-responsive>
Which on the page output will be converted to this:
copy
<picture>
    <source media="(max-width: 800px)" src="small.jpg" srcset="small.jpg, medium.jpg 2x">
    <source media="(min-width: 801px)" src="medium.jpg" srcset="medium.jpg, large.jpg 2x">
    <source media="(min-width: 1201px)" src="large.jpg" srcset="original.jpg 2x">
    <img src="large.jpg" alt="">
< /picture>
Note that max-width, min-width are dynamic and taken from whatever you have entered under the 'Responsive Breakpoint Sizes'.