![]() ![]() We can even pass our own image class(es) as a 4th parameter: In order to create a variety of image sizes that will suit best on various screen sizes, Responsive Pics uses the following default breakpoints that define these media queries:Īnd now our images have the exact same width as our parent grid column on every screen size! Let me break this down for you Responsive breakpointsįirst of all you probably have noticed the amount of images defined in srcset and the media queries set in sizes. So, what kind of sorcery is this you might think? ![]() So in order to re-create that large header scenario with a crop ratio of 16:9 in multiple sizes and with retina support, we can now use this one-liner function: Therefore we were limited in using WordPress’ built-in WP_Image_Editor class.Īfter intensive testing and fine-tuning for the last 2 years, we achieved exactly the above! So instead of checking which pre-defined sizes for your image are available for you to use in your template, you turn it around and give WordPress the task to create that image size for you instead in the actual template.Īnother prerequisite was to have no external dependencies for the image creation process, so it would be widely accessible for any user. Our goal was to create a simple syntax which would allow any WordPress template author to generate various image sizes on the go directly in our templates and only for the images that will be used on those templates so we can use responsive markup like the new element or the srcset and sizes syntax on elements. This was one of the reasons we decided to write our own tool for this: Responsive Pics and make it available as an open-source project. Ideally you only want to generate an (custom) image size on the locations in your layout where it needs to, just like services as Cloudinary offer. If you’re on a shared hosting with limited disk space, this can become a problem. Boom! 588 images are generated without ever being used and almost 600 Mb disk space is occupied for no reason. Maybe your website only has 4 pages with the template that uses this image size.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |