The Big Spring Sale! Up to 50% off!

Picture / scrset functionality

gigaboy
4 Posts
gigaboy posted this 21 December 2019
Ask a Question

Is this functionality already in the software, or is it planned? It's a real dealbreaker for me.

Is this functionality already in the software, or is it planned? It's a real dealbreaker for me.
Vote to pay developers attention to this features or issue.
7 Replies
Order By: Standard | Newest
Support Team
Support Team posted this 23 December 2019

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

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
gigaboy
4 Posts
gigaboy posted this 25 December 2019

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

Support Team
Support Team posted this 25 December 2019

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

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
gigaboy
4 Posts
gigaboy posted this 25 December 2019

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.
Doug G.
131 Posts
Doug G. posted this 26 December 2019

<picture class>

Why this tag format instead of <picture> used in your example.

&lt;picture class&gt; Why this tag format instead of &lt;picture&gt; used in your example.
gigaboy
4 Posts
gigaboy posted this 26 December 2019

What?

What?
Doug G.
131 Posts
Doug G. posted this 26 December 2019

<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.

&lt;picture class&gt; <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 &lt;picture&gt; as the starting tag.
You must log in or register to leave comments