Hi Mark,
Could you please explain in a it more details, what exact functionality do you need? Maybe some examples will be helpful.
...................................................
Sincerely,
Hella
Nicepage Support Team
Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp
Here's some code that I use (where I hand coded the page). This will give you a sense of what we're up against. Note that I'm pulling the images from a image hosting service, but that would not necessarily be the case for most people. The query string parameters are instructions to the hosting service on how to manipulate the base image. The media parameter is the breakpoint, there are multiple breakpoints depending on screensize.
<picture class>
<source
srcset="//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=1920&auto=format&lossless=true 1x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=1920&auto=format&lossless=true&dpr=2 2x"
media="(min-width: 1280px)"
>
<source
srcset="//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=1280&auto=format&lossless=true 1x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=1280&auto=format&lossless=true&dpr=2 2x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=1280&auto=format&lossless=true&dpr=3 3x"
media="(min-width: 992px)"
>
<source
srcset="//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=992&auto=format&lossless=true 1x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=992&auto=format&lossless=true&dpr=2 2x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=992&auto=format&lossless=true&dpr=3 3x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=992&auto=format&lossless=true&dpr=4 4x"
media="(min-width: 768px)"
>
<source
srcset="//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=768&auto=format&lossless=true 1x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=768&auto=format&lossless=true&dpr=2 2x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=768&auto=format&lossless=true&dpr=3 3x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=768&auto=format&lossless=true&dpr=4 4x"
media="(min-width: 600px)"
>
<source
srcset="//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=600&auto=format&lossless=true 1x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=600&auto=format&lossless=true&dpr=2 2x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=600&auto=format&lossless=true&dpr=3 3x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=600&auto=format&lossless=true&dpr=4 4x"
media="(min-width: 480px)"
>
<source
srcset="//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=480&auto=format&lossless=true 1x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=480&auto=format&lossless=true&dpr=2 2x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=480&auto=format&lossless=true&dpr=3 3x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=480&auto=format&lossless=true&dpr=4 4x"
media="(min-width: 320px)"
>
<img src="//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=480&auto=format&lossless=true 1x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=480&auto=format&lossless=true&dpr=2 2x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=480&auto=format&lossless=true&dpr=3 3x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=480&auto=format&lossless=true&dpr=4 4x" alt="Rosemarie Rossetti, Ph.D.">
</picture>
Here's some code that I use (where I hand coded the page). This will give you a sense of what we're up against. Note that I'm pulling the images from a image hosting service, but that would not necessarily be the case for most people. The query string parameters are instructions to the hosting service on how to manipulate the base image. The media parameter is the breakpoint, there are multiple breakpoints depending on screensize.
<picture class>
<source
srcset="//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=1920&auto=format&lossless=true 1x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=1920&auto=format&lossless=true&dpr=2 2x"
media="(min-width: 1280px)"
>
<source
srcset="//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=1280&auto=format&lossless=true 1x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=1280&auto=format&lossless=true&dpr=2 2x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=1280&auto=format&lossless=true&dpr=3 3x"
media="(min-width: 992px)"
>
<source
srcset="//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=992&auto=format&lossless=true 1x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=992&auto=format&lossless=true&dpr=2 2x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=992&auto=format&lossless=true&dpr=3 3x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=992&auto=format&lossless=true&dpr=4 4x"
media="(min-width: 768px)"
>
<source
srcset="//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=768&auto=format&lossless=true 1x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=768&auto=format&lossless=true&dpr=2 2x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=768&auto=format&lossless=true&dpr=3 3x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=768&auto=format&lossless=true&dpr=4 4x"
media="(min-width: 600px)"
>
<source
srcset="//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=600&auto=format&lossless=true 1x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=600&auto=format&lossless=true&dpr=2 2x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=600&auto=format&lossless=true&dpr=3 3x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=600&auto=format&lossless=true&dpr=4 4x"
media="(min-width: 480px)"
>
<source
srcset="//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=480&auto=format&lossless=true 1x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=480&auto=format&lossless=true&dpr=2 2x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=480&auto=format&lossless=true&dpr=3 3x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=480&auto=format&lossless=true&dpr=4 4x"
media="(min-width: 320px)"
>
<img src="//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=480&auto=format&lossless=true 1x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=480&auto=format&lossless=true&dpr=2 2x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=480&auto=format&lossless=true&dpr=3 3x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=480&auto=format&lossless=true&dpr=4 4x" alt="Rosemarie Rossetti, Ph.D.">
</picture>
Last edited 25 December 2019 by gigaboy
Hi Mark,
I'm not aware about such functionality, looks like that is the HTML code so you can try to insert it within the HTML control.
...................................................
Sincerely,
Hella
Nicepage Support Team
Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp
https://www.w3schools.com/html/html_images_picture.asp
Really have to use this now because of various screensizes.
https://www.w3schools.com/html/html_images_picture.asp Really have to use this now because of various screensizes.<picture class>
Why this tag format instead of <picture> used in your example.
<picture class> Why this tag format instead of <picture> used in your example.<picture class>
<source
srcset="//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=1920&auto=format&lossless=true 1x,
//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=1920&auto=format&lossless=true&dpr=2 2x"
media="(min-width: 1280px)"
>
Topmost line of your posted code. Why is it this way instead of simply <picture> as the starting tag.
<picture class> <source srcset="//rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=1920&auto=format&lossless=true 1x, //rosemariespeaks.imgix.net/rosemarie-rossetti_hp.jpg?w=1920&auto=format&lossless=true&dpr=2 2x" media="(min-width: 1280px)" > Topmost line of your posted code. Why is it this way instead of simply <picture> as the starting tag.