Display an responsive picture in a normal container column layout:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<?= ResponsivePics::get_picture(1, 'xs-12, sm-6, md-4'); ?>
</div>
</div>
</div>
This method will output a <picture> element that spans 12 contained columns from the xs breakpoint and up, 6 contained columns from the sm breakpoint and up and 4 contained columns from the md breakpoint and up.
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<picture> <source media="(min-width: 1200px)" srcset="/app/uploads/2019/06/martin-adams-740397-unsplash-330x220.jpg 1x, /app/uploads/2019/06/martin-adams-740397-unsplash-330x220@2x.jpg 2x" /> <source media="(min-width: 992px)" srcset="/app/uploads/2019/06/martin-adams-740397-unsplash-290x193.jpg 1x, /app/uploads/2019/06/martin-adams-740397-unsplash-290x193@2x.jpg 2x" /> <source media="(min-width: 768px)" srcset="/app/uploads/2019/06/martin-adams-740397-unsplash-210x140.jpg 1x, /app/uploads/2019/06/martin-adams-740397-unsplash-210x140@2x.jpg 2x" /> <source media="(min-width: 576px)" srcset="/app/uploads/2019/06/martin-adams-740397-unsplash-240x160.jpg 1x, /app/uploads/2019/06/martin-adams-740397-unsplash-240x160@2x.jpg 2x" /> <source media="(min-width: 0px)" srcset="/app/uploads/2019/06/martin-adams-740397-unsplash-546x364.jpg 1x, /app/uploads/2019/06/martin-adams-740397-unsplash-546x364@2x.jpg 2x" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Grid system columns example" /> </picture>
When your image is in a full-width fluid container, you can use the -full suffix:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<?= ResponsivePics::get_picture(1, 'xs-12-full, sm-6-full, md-4-full'); ?>
</div>
</div>
</div>
This method will output a <picture> element that spans 12 full-width columns from the xs breakpoint and up, 6 full-width columns from the sm breakpoint and up and 4 full-width columns from the md breakpoint and up.
xxl is 1400px, the width of the image will never exceed the 12 full-width columns of 1400px (1370px) with this method. To prevent this, you need to add custom breakpoints higher then xxl.Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<picture> <source media="(min-width: 1200px)" srcset="/app/uploads/2019/07/aziz-acharki-549137-unsplash-436x281.jpg 1x, /app/uploads/2019/07/aziz-acharki-549137-unsplash-436x281@2x.jpg 2x" /> <source media="(min-width: 992px)" srcset="/app/uploads/2019/07/aziz-acharki-549137-unsplash-370x238.jpg 1x, /app/uploads/2019/07/aziz-acharki-549137-unsplash-370x238@2x.jpg 2x" /> <source media="(min-width: 768px)" srcset="/app/uploads/2019/07/aziz-acharki-549137-unsplash-300x193.jpg 1x, /app/uploads/2019/07/aziz-acharki-549137-unsplash-300x193@2x.jpg 2x" /> <source media="(min-width: 576px)" srcset="/app/uploads/2019/07/aziz-acharki-549137-unsplash-354x228.jpg 1x, /app/uploads/2019/07/aziz-acharki-549137-unsplash-354x228@2x.jpg 2x" /> <source media="(min-width: 0px)" srcset="/app/uploads/2019/07/aziz-acharki-549137-unsplash-546x352.jpg 1x, /app/uploads/2019/07/aziz-acharki-549137-unsplash-546x352@2x.jpg 2x" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Full width image example" /> </picture>
When your image is not in a container and you want to display your image full-width, you can use the full shorthand:
<div> <?= ResponsivePics::get_picture(1, 'xs-full'); ?> </div>
This method will output a <picture> element that spans the full-width defined by the next breakpoint width from the xs breakpoint and up.
xxl is 1400px, the width of the image will never exceed the 1400px with this method. To prevent this, you need to add custom breakpoints higher then xxl.Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<picture> <source media="(min-width: 1200px)" srcset="/app/uploads/2020/11/willian-justen-de-vasconcellos-515780-unsplash-1400x1051.jpg 1x, /app/uploads/2020/11/willian-justen-de-vasconcellos-515780-unsplash-1400x1051@2x.jpg 2x" /> <source media="(min-width: 992px)" srcset="/app/uploads/2020/11/willian-justen-de-vasconcellos-515780-unsplash-1200x901.jpg 1x, /app/uploads/2020/11/willian-justen-de-vasconcellos-515780-unsplash-1200x901@2x.jpg 2x" /> <source media="(min-width: 768px)" srcset="/app/uploads/2020/11/willian-justen-de-vasconcellos-515780-unsplash-992x745.jpg 1x, /app/uploads/2020/11/willian-justen-de-vasconcellos-515780-unsplash-992x745@2x.jpg 2x" /> <source media="(min-width: 576px)" srcset="/app/uploads/2020/11/willian-justen-de-vasconcellos-515780-unsplash-768x577.jpg 1x, /app/uploads/2020/11/willian-justen-de-vasconcellos-515780-unsplash-768x577@2x.jpg 2x" /> <source media="(min-width: 0px)" srcset="/app/uploads/2020/11/willian-justen-de-vasconcellos-515780-unsplash-576x432.jpg 1x, /app/uploads/2020/11/willian-justen-de-vasconcellos-515780-unsplash-576x432@2x.jpg 2x" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Full-width image example" /> </picture>
When your image is not in a normal container or column layout, you can also use custom image widths:
<?= ResponsivePics::get_picture(1, 'xs:500, sm:725, md:950'); ?>
This method will output a <picture> element of 500px from the xs breakpoint and up, 725px from the sm breakpoint and up and 950px from the md breakpoint and up.
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<picture> <source media="(min-width: 768px)" srcset="/app/uploads/2019/06/hyunwon-jang-741306-unsplash-950x633.jpg 1x, /app/uploads/2019/06/hyunwon-jang-741306-unsplash-950x633@2x.jpg 2x" /> <source media="(min-width: 576px)" srcset="/app/uploads/2019/06/hyunwon-jang-741306-unsplash-725x483.jpg 1x, /app/uploads/2019/06/hyunwon-jang-741306-unsplash-725x483@2x.jpg 2x" /> <source media="(min-width: 0px)" srcset="/app/uploads/2019/06/hyunwon-jang-741306-unsplash-500x333.jpg 1x, /app/uploads/2019/06/hyunwon-jang-741306-unsplash-500x333@2x.jpg 2x" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Custom image sizes example" /> </picture>
You can also mix container column image widths with custom image widths:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-12">
<?= ResponsivePics::get_picture(1, 'xs-12, md-6, lg:800, xl:1024'); ?>
</div>
</div>
</div>
This method will output a <picture> element that spans 12 columns from the xs breakpoint and up, 6 columns from the md breakpoint and up, 800px from the lg breakpoint and up and 1000px from the xl breakpoint and up.
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<picture> <source media="(min-width: 1200px)" srcset="/app/uploads/2019/06/kyler-nixon-208875-unsplash-1024x682.jpg 1x, /app/uploads/2019/06/kyler-nixon-208875-unsplash-1024x682@2x.jpg 2x" /> <source media="(min-width: 992px)" srcset="/app/uploads/2019/06/kyler-nixon-208875-unsplash-800x533.jpg 1x, /app/uploads/2019/06/kyler-nixon-208875-unsplash-800x533@2x.jpg 2x" /> <source media="(min-width: 768px)" srcset="/app/uploads/2019/06/kyler-nixon-208875-unsplash-330x220.jpg 1x, /app/uploads/2019/06/kyler-nixon-208875-unsplash-330x220@2x.jpg 2x" /> <source media="(min-width: 0px)" srcset="/app/uploads/2019/06/kyler-nixon-208875-unsplash-546x364.jpg 1x, /app/uploads/2019/06/kyler-nixon-208875-unsplash-546x364@2x.jpg 2x" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Combined image sizes example" /> </picture>
When your picture needs to change size on a non-default breakpoint, you can also use custom breakpoints:
<?= ResponsivePics::get_picture(1, '400:200, 800:400'); ?>
This method will output a <picture> element that spans 200px from 400px breakpoint and up and 400px from 800px breakpoint and up.
Since we didn’t define any image size before breakpoint 400px, the image won’t be resized from breakpoint 0px to 400px which will be bad for performance.
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<picture> <source media="(min-width: 800px)" srcset="/app/uploads/2019/06/denys-nevozhai-189623-unsplash-400x284.jpg 1x, /app/uploads/2019/06/denys-nevozhai-189623-unsplash-400x284@2x.jpg 2x" /> <source media="(min-width: 400px)" srcset="/app/uploads/2019/06/denys-nevozhai-189623-unsplash-200x142.jpg 1x, /app/uploads/2019/06/denys-nevozhai-189623-unsplash-200x142@2x.jpg 2x" /> <source media="(min-width: 0px)" srcset="/app/uploads/2019/06/denys-nevozhai-189623-unsplash.jpg" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Custom breakpoints example" /> </picture>
When you want to limit the height of your picture without cropping it, you can set the (maximum) image height:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 col-lg-12">
<?= ResponsivePics::get_picture(1, 'xs-12 800, md-8 500, lg:400 400, xl:600/0.75'); ?>
</div>
</div>
</div>
This method will output a <picture> element that spans 12 columns and a max height of 800px from the xs breakpoint and up, 8 columns and a max height of 500px from the md breakpoint and up, 400px and a max height of 400px from the lg breakpoint and up and 600px and a max height of 600px * 0.75 (= 450px) from the xl breakpoint and up.
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<picture> <source media="(min-width: 1200px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-600x450.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-600x450@2x.jpg 2x" /> <source media="(min-width: 992px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-400x400.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-400x400@2x.jpg 2x" /> <source media="(min-width: 768px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-450x500.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-450x500@2x.jpg 2x" /> <source media="(min-width: 0px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-546x800.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-546x800@2x.jpg 2x" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Custom image heights example" /> </picture>
When you want full control over your picture dimensions, you can enable cropping:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 col-lg-12">
<?= ResponsivePics::get_picture(1, 'xs-12 800|c, md-8 500|c, lg:400 400|l t, xl:500/0.75|r b'); ?>
</div>
</div>
</div>
This method will output a <picture> element that spans 12 columns and with a height of 800px cropped from the center from the xs breakpoint and up, 8 columns and a height of 500px cropped from the center from the md breakpoint and up, 400px and a height of 400px cropped from the left top from the lg breakpoint and up and 600px and a height of 600px * 0.75 (= 450px) cropped from the right bottom from the xl breakpoint and up.
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<picture> <source media="(min-width: 1200px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-500x375-crop-100-100.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-500x375-crop-100-100@2x.jpg 2x" /> <source media="(min-width: 992px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-400x400-crop-0-0.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-400x400-crop-0-0@2x.jpg 2x" /> <source media="(min-width: 768px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-450x500-center-center.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-450x500-center-center@2x.jpg 2x" /> <source media="(min-width: 0px)" srcset="/app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-546x800-center-center.jpg 1x, /app/uploads/2019/06/h-e-n-g-s-t-r-e-a-m-744456-unsplash-546x800-center-center@2x.jpg 2x" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Custom image heights example" /> </picture>
When you want to make sure that a certain part of your image is always visible while cropping, you can use the f crop shorthand.
You can manually set the crop point in the WordPress media library:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-4">
<?= ResponsivePics::get_picture(1, 'xs-12/0.5|f, md-6/1|f, lg-4/2|f', null, true); ?>
</div>
</div>
</div>
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<picture> <source media="(min-width: 1200px)" data-srcset="/app/uploads/2022/01/linus-nylund-437333-unsplash-330x660-crop-87-40.jpg 1x, /app/uploads/2022/01/linus-nylund-437333-unsplash-330x660-crop-87-40@2x.jpg 2x" /> <source media="(min-width: 992px)" data-srcset="/app/uploads/2022/01/linus-nylund-437333-unsplash-290x580-crop-87-40.jpg 1x, /app/uploads/2022/01/linus-nylund-437333-unsplash-290x580-crop-87-40@2x.jpg 2x" /> <source media="(min-width: 768px)" data-srcset="/app/uploads/2022/01/linus-nylund-437333-unsplash-330x330-crop-87-40.jpg 1x, /app/uploads/2022/01/linus-nylund-437333-unsplash-330x330-crop-87-40@2x.jpg 2x" /> <source media="(min-width: 576px)" data-srcset="/app/uploads/2022/01/linus-nylund-437333-unsplash-510x255-crop-87-40.jpg 1x, /app/uploads/2022/01/linus-nylund-437333-unsplash-510x255-crop-87-40@2x.jpg 2x" /> <source media="(min-width: 0px)" data-srcset="/app/uploads/2022/01/linus-nylund-437333-unsplash-546x273-crop-87-40.jpg 1x, /app/uploads/2022/01/linus-nylund-437333-unsplash-546x273-crop-87-40@2x.jpg 2x" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" class="lazyload" /> </picture>
To enable lazy loading for your responsive picture, pass true as the 4th parameter:
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-10 col-xl-8">
<?= ResponsivePics::get_picture(1, 'xs-12, lg-10, xl-8', 'lazyload-effect', true); ?>
</div>
</div>
</div>
Now your responsive image will only load when it’s in the viewport and thus will increase performance on your website!
Additionally you could even add a fade-in css effect once the image is lazyloaded:
picture.lazyload-effect {
img {
&.lazyload,
&.lazyloading {
opacity: 0;
transition: opacity .75s ease;
}
&.lazyloaded {
opacity: 1;
}
}
}
Depending on the maximum size of the uploaded image with ID 1, the output with special lazyload markup will be something like:
<picture class="lazyload-effect"> <source media="(min-width: 1200px)" data-srcset="/app/uploads/2019/06/joshua-coleman-654602-unsplash-690x460.jpg 1x, /app/uploads/2019/06/joshua-coleman-654602-unsplash-690x460@2x.jpg 2x" /> <source media="(min-width: 992px)" data-srcset="/app/uploads/2019/06/joshua-coleman-654602-unsplash-770x513.jpg 1x, /app/uploads/2019/06/joshua-coleman-654602-unsplash-770x513@2x.jpg 2x" /> <source media="(min-width: 768px)" data-srcset="/app/uploads/2019/06/joshua-coleman-654602-unsplash-690x460.jpg 1x, /app/uploads/2019/06/joshua-coleman-654602-unsplash-690x460@2x.jpg 2x" /> <source media="(min-width: 576px)" data-srcset="/app/uploads/2019/06/joshua-coleman-654602-unsplash-510x340.jpg 1x, /app/uploads/2019/06/joshua-coleman-654602-unsplash-510x340@2x.jpg 2x" /> <source media="(min-width: 0px)" data-srcset="/app/uploads/2019/06/joshua-coleman-654602-unsplash-546x364.jpg 1x, /app/uploads/2019/06/joshua-coleman-654602-unsplash-546x364@2x.jpg 2x" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Lazyloading example" class="lazyload" /> </picture>
To enable intrinsic aspect ratio for your responsive picture, pass true as the 5th parameter:
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-10 col-xl-8">
<?= ResponsivePics::get_picture(1, 'xs-12, lg-10, xl-8', '', true, true); ?>
</div>
</div>
</div>
When you installed the Lazysizes aspectratio extension, it will try to calculate each picture’s image element’s height based upon each data-aspectratio attribute and set the height as an inline style. This way the image already takes up space in your layout.
Additionally you could even add some placeholder styling when the image is not loaded yet, but does have a height already:
picture.intrinsic {
position: relative;
display: block;
margin: 0;
width: 100%;
background: #e4e4e4 url('../images/icon.svg') no-repeat center;
background-size: 50px 50px;
&__item {
display: block;
width: 100%;
}
}
Depending on the maximum size of the uploaded image with ID 1, the output with special intrinsic markup will be something like:
<picture class="intrinsic"> <source media="(min-width: 1200px)" data-srcset="/app/uploads/2019/06/lionel-gustave-171878-unsplash-690x1035.jpg 1x, /app/uploads/2019/06/lionel-gustave-171878-unsplash-690x1035@2x.jpg 2x" data-aspectratio="0.66666666666667" /> <source media="(min-width: 992px)" data-srcset="/app/uploads/2019/06/lionel-gustave-171878-unsplash-770x1155.jpg 1x, /app/uploads/2019/06/lionel-gustave-171878-unsplash-770x1155@2x.jpg 2x" data-aspectratio="0.66666666666667" /> <source media="(min-width: 768px)" data-srcset="/app/uploads/2019/06/lionel-gustave-171878-unsplash-690x1035.jpg 1x, /app/uploads/2019/06/lionel-gustave-171878-unsplash-690x1035@2x.jpg 2x" data-aspectratio="0.66666666666667" /> <source media="(min-width: 576px)" data-srcset="/app/uploads/2019/06/lionel-gustave-171878-unsplash-510x765.jpg 1x, /app/uploads/2019/06/lionel-gustave-171878-unsplash-510x765@2x.jpg 2x" data-aspectratio="0.66666666666667" /> <source media="(min-width: 0px)" data-srcset="/app/uploads/2019/06/lionel-gustave-171878-unsplash-546x819.jpg 1x, /app/uploads/2019/06/lionel-gustave-171878-unsplash-546x819@2x.jpg 2x" data-aspectratio="0.66666666666667" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-aspectratio="" alt="Intrinsic example" class="lazyload intrinsic__item" style="width:100%;" /> </picture>
Display a responsive image in a normal container column layout.
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-4 col-xl-3">
<?= ResponsivePics::get_image(1, 'xs-12, md-6, lg-4, xl-3'); ?>
</div>
</div>
</div>
This method will output a <img> element that spans 12 columns from the xs breakpoint and up, 6 columns from the md breakpoint, 4 columns from the lg breakpoint and up and 3 columns from the xl breakpoint and up.
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<img srcset="/app/uploads/2020/10/samuel-zeller-168223-240x360.jpg 240w, /app/uploads/2020/10/samuel-zeller-168223-240x360@2x.jpg 480w, /app/uploads/2020/10/samuel-zeller-168223-290x435.jpg 290w, /app/uploads/2020/10/samuel-zeller-168223-290x435@2x.jpg 580w, /app/uploads/2020/10/samuel-zeller-168223-330x495.jpg 330w, /app/uploads/2020/10/samuel-zeller-168223-330x495@2x.jpg 660w, /app/uploads/2020/10/samuel-zeller-168223-510x765.jpg 510w, /app/uploads/2020/10/samuel-zeller-168223-510x765@2x.jpg 1020w, /app/uploads/2020/10/samuel-zeller-168223-546x819.jpg 546w, /app/uploads/2020/10/samuel-zeller-168223-546x819@2x.jpg 1092w" sizes="(min-width: 1200px) 240px, (min-width: 992px) 290px, (min-width: 768px) 330px, (min-width: 576px) 510px, (min-width: 0px) 546px, 100vw" alt="Responsive image"/>
Display a responsive image in a normal container column layout with a cropped height from the left bottom of 75% of the width.
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-12">
<?= ResponsivePics::get_image(1, 'xs-12, md-6, lg:400', 0,75|l b); ?>
</div>
</div>
</div>
This method will output a <img> element that spans 12 columns from the xs breakpoint and up, 6 columns from the md breakpoint and up and 400px from the lg breakpoint and up.
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<img srcset="/app/uploads/2020/09/alex-shutin-204369-unsplash-400x300-crop-0-100.jpg 400w, /app/uploads/2020/09/alex-shutin-204369-unsplash-400x300-crop-0-100@2x.jpg 800w, /app/uploads/2020/09/alex-shutin-204369-unsplash-330x248-crop-0-100.jpg 330w, /app/uploads/2020/09/alex-shutin-204369-unsplash-330x248-crop-0-100@2x.jpg 660w, /app/uploads/2020/09/alex-shutin-204369-unsplash-546x410-crop-0-100.jpg 546w, /app/uploads/2020/09/alex-shutin-204369-unsplash-546x410-crop-0-100@2x.jpg 1092w" sizes="(min-width: 992px) 400px, (min-width: 768px) 330px, (min-width: 0px) 546px, 100vw" alt="Image with srcset & sizes attacking example"/>
To crop an image from the focal point that has been set manually from the media library, use the f crop shorthand.
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-4">
<?= ResponsivePics::get_image(1, 'xs-12, md-6, lg-4', 2|f, true); ?>
</div>
</div>
</div>
This method will output a <img> element that spans 12 columns from the xs breakpoint and up, 6 columns from the md breakpoint and up and 4 columns from the lg breakpoint and up.
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<img class="lazyload" data-srcset="/app/uploads/2020/10/chris-holgersson-236098-330x660-crop-16-48.jpg 330w, /app/uploads/2020/10/chris-holgersson-236098-330x660-crop-16-48@2x.jpg 660w, /app/uploads/2020/10/chris-holgersson-236098-290x580-crop-16-48.jpg 290w, /app/uploads/2020/10/chris-holgersson-236098-290x580-crop-16-48@2x.jpg 580w, /app/uploads/2020/10/chris-holgersson-236098-330x660-crop-16-48.jpg 330w, /app/uploads/2020/10/chris-holgersson-236098-330x660-crop-16-48@2x.jpg 660w, /app/uploads/2020/10/chris-holgersson-236098-510x1020-crop-16-48.jpg 510w, /app/uploads/2020/10/chris-holgersson-236098-510x1020-crop-16-48@2x.jpg 1020w, /app/uploads/2020/10/chris-holgersson-236098-546x1092-crop-16-48.jpg 546w, /app/uploads/2020/10/chris-holgersson-236098-546x1092-crop-16-48@2x.jpg 1092w" sizes="(min-width: 1200px) 330px, (min-width: 992px) 290px, (min-width: 768px) 330px, (min-width: 576px) 510px, (min-width: 0px) 546px, 100vw" alt="Responsive background image"/>
To enable a LQIP (low quality image placeholder) for your responsive image, pass true as the 5th parameter:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-12">
<?= ResponsivePics::get_image(1, 'xs-12, md-6, lg-4', false, true, true); ?>
</div>
</div>
</div>
Now your responsive image will show as a small (pixelated) placeholder image before the actual full (sharp) image is done loading.
Additionally you could even add a ‘fade-out blur’ effect when you also enabled lazyload for the image:
img {
&.blur-up {
width: 100%;
height: auto;
&.lazyload {
opacity: 1;
filter: blur(5px);
transition: filter .75s ease;
}
&.lazyloaded {
filter: blur(0);
}
}
}
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<img class="lazyload blur-up" data-srcset="/app/uploads/2021/03/george-kedenburg-iii-561935-unsplash-330x495.jpg 330w, /app/uploads/2021/03/george-kedenburg-iii-561935-unsplash-330x495@2x.jpg 660w, /app/uploads/2021/03/george-kedenburg-iii-561935-unsplash-290x435.jpg 290w, /app/uploads/2021/03/george-kedenburg-iii-561935-unsplash-290x435@2x.jpg 580w, /app/uploads/2021/03/george-kedenburg-iii-561935-unsplash-330x495.jpg 330w, /app/uploads/2021/03/george-kedenburg-iii-561935-unsplash-330x495@2x.jpg 660w, /app/uploads/2021/03/george-kedenburg-iii-561935-unsplash-510x765.jpg 510w, /app/uploads/2021/03/george-kedenburg-iii-561935-unsplash-510x765@2x.jpg 1020w, /app/uploads/2021/03/george-kedenburg-iii-561935-unsplash-546x819.jpg 546w, /app/uploads/2021/03/george-kedenburg-iii-561935-unsplash-546x819@2x.jpg 1092w" sizes="(min-width: 1200px) 330px, (min-width: 992px) 290px, (min-width: 768px) 330px, (min-width: 576px) 510px, (min-width: 0px) 546px, 100vw" src="/app/uploads/2021/03/george-kedenburg-iii-561935-unsplash-100x150.jpg" alt="LQIP example"/>
When you want to create a responsive background image, you can use the get_background function.
For displaying a responsive background image in a normal container column layout:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 col-lg-4 col-xl-6">
<?= ResponsivePics::get_background(1, 'xs-12, md-8, lg-4, xl-6', 'responsive-bg-example'); ?>
</div>
</div>
</div>
Don’t forget to style your background image otherwise you won’t see anything. You can do this by passing a css class as the 3rd parameter:
.responsive-bg-example {
display: block;
width: 100%;
overflow: hidden;
height: 0;
padding-top: 75%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<style scoped="scoped" type="text/css">
@media (min-width: 0px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-546x364.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 0px), only screen and (min-resolution: 192dpi) and (min-width: 0px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-546x364@2x.jpg");}
}
@media (min-width: 576px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-510x340.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 576px), only screen and (min-resolution: 192dpi) and (min-width: 576px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-510x340@2x.jpg");}
}
@media (min-width: 768px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-450x300.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px), only screen and (min-resolution: 192dpi) and (min-width: 768px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-450x300@2x.jpg");}
}
@media (min-width: 992px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-290x193.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 992px), only screen and (min-resolution: 192dpi) and (min-width: 992px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-290x193@2x.jpg");}
}
@media (min-width: 1200px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-510x340.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1200px), only screen and (min-resolution: 192dpi) and (min-width: 1200px) {
#responsive-pics-background-708 {background-image: url("/app/uploads/2020/10/chris-holgersson-236098-510x340@2x.jpg");}
}
}
</style>
<div class="responsive-bg-example" id="responsive-pics-background-708"></div>
In this example, we will be creating a full-width banner background image with a responsive aspect ratio:
<?= ResponsivePics::get_background(1, 'xs-full/0.65|c, sm-full/0.5|c, md-full|c, lg-full/0.5|c, xl:1500/0.35|c, 1500:1750/0.35|c, 1750:2000/0.3|c, 2000:2500/0.25|c', 'my-hero-bg-example'); ?>
When you pass a class as the 3rd parameter, you can style the div that contains the background image:
.my-hero-bg-example {
display: block;
width: 100%;
height: 65vw;
background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: background-image .75s ease;
@include media-breakpoint-up(sm) {
height: 50vw;
}
@include media-breakpoint-up(lg) {
height: 40vw;
}
@include media-breakpoint-up(xl) {
height: 35vw;
}
@media (min-width: 1600px) {
height: 30vw;
}
@media (min-width: 2000px) {
height: 25vw;
}
}
Depending on the maximum size of the uploaded image with ID 1, the output will be something like:
<style scoped="scoped" type="text/css">
@media (min-width: 0px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-576x374-center-center.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 0px), only screen and (min-resolution: 192dpi) and (min-width: 0px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-576x374-center-center@2x.jpg");}
}
@media (min-width: 576px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-768x384-center-center.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 576px), only screen and (min-resolution: 192dpi) and (min-width: 576px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-768x384-center-center@2x.jpg");}
}
@media (min-width: 992px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-1200x480-center-center.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 992px), only screen and (min-resolution: 192dpi) and (min-width: 992px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-1200x480-center-center@2x.jpg");}
}
@media (min-width: 1200px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-1500x525-center-center.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1200px), only screen and (min-resolution: 192dpi) and (min-width: 1200px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-1500x525-center-center@2x.jpg");}
}
@media (min-width: 1500px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-1750x612-center-center.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1500px), only screen and (min-resolution: 192dpi) and (min-width: 1500px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-1750x612-center-center@2x.jpg");}
}
@media (min-width: 1750px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-2000x600-center-center.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1750px), only screen and (min-resolution: 192dpi) and (min-width: 1750px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-2000x600-center-center@2x.jpg");}
}
@media (min-width: 2000px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-2500x625-center-center.jpg");}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 2000px), only screen and (min-resolution: 192dpi) and (min-width: 2000px) {
#responsive-pics-background-581 {background-image: url("/app/uploads/2019/07/fuyong-hua-274676-unsplash-2500x625-center-center@2x.jpg");}
}
}
</style>
<div class="my-hero-bg-example" id="responsive-pics-background-581"></div>