Sizes with media queries - with OWL Carousel

Hello, I'm reading " Sizes with media queries" on official documentation, but is not so clear for me.

is suggested to use this in twig:
{{ page.media['retina.jpg'].sizes('(max-width:26em) 100vw, 50vw').html('Retina Image') }}

Bu how I can use inside my OWL Carousel?

<div id="photos" data-aos="fade-up">    
   <div class="owl-carousel owl-theme">
    {% for image in page.media.images %}
           <img src="{{ image.url }}" class="img-full-responsive s-rounded" alt="{{ page.title }}">
    {% endfor %}              
   </div>

   <script type="text/javascript">
    var owl = $('.owl-carousel');
    owl.owlCarousel({
    items:1,
    loop:true,
    margin:10,
    autoplay:false,
    autoplayTimeout:3000,
    autoplayHoverPause:true,
    });
   </script>            
</div>

Thanks

@msa, Maybe you could try to replace:

<img src="{{ image.url }}" class="img-full-responsive s-rounded" alt="{{ page.title }}">

with:

{{ image.sizes('(max-width:26em) 100vw, 50vw').html('', page.title, 'img-full-responsive s-rounded') }}

Note: Just guessing and did not test it...

Thanks for reply,

but nothing change... if I use your code, I see the images in the original size.

@msa, How does the generated <img> tag look like?

remain the same.

Before:
<img src="/user/pages/02.products/01.special_equipment/01.mini-cranes/01.bg-lift-m250/m250_01_model_800x800.jpg" class="img-full-responsive s-rounded" alt="BG Lift M250">

With your suggestion:
<img alt="BG Lift M250" class="img-full-responsive s-rounded" src="/user/pages/02.products/01.special_equipment/01.mini-cranes/01.bg-lift-m250/m250_01_model_800x800.jpg">

@msa, According the docs, If you rename the image file to [email protected], Grav will create a resized file and add a srcset to the <img> tag.

<img title="Title" alt="Alt" class="img-full-responsive s-rounded" 
src="/images/c/1/7/c/d/c17cddf73b4c2791d9625a98cd8f59da8369b18e-retina1x.jpeg" 
srcset="/user/pages/01.home/[email protected] 6000w, /images/c/1/7/c/d/c17cddf73b4c2791d9625a98cd8f59da8369b18e-retina1x.jpeg 3000w" 
sizes="(max-width:800px) 100vw, 50vw">

Then, when resizing the browser, the browser will display the image at 50% of the viewport when the window is wider then 26rem, else it will be full width.

Never used it, so this is as far is my help reaches....

@pamtbaau
many thanks fo suggestion.. after various test... to use this part of code is unnecessary...

@pamtbaau:
.sizes('(max-width:26em) 100vw, 50vw')

is only necessary to add to images filename @2x at the end of name, and Grav scale the images... with, or without adding "size" parameters on twig template.

Seem really strange also to me.... but is true.

I'd also tested "Sizes with media queries" parameters, and "Sizes with media queries using derivatives", as indicated in the official documentation. Nothing change. I can use the previous code:

<img src="{{ image.url }}" class="img-full-responsive s-rounded" alt="{{ post.title }}">

only adding @2x on filename, and Grav scale.

Thanks for help @pamtbaau , hoping this post can help other users in the future.

@msa, I'm confused... (I seem to be confused a lot last few days...)

You said:

I can use the previous code:
<img src="{{ image.url }}" class="img-full-responsive s-rounded" alt="{{ post.title }}">
only adding @2x on filename, and Grav scale.

Do you mean your solution is using the following loop?:

{% for image in page.media.images %}
   <img src="{{ image.url }}" class="img-full-responsive s-rounded" alt="{{ page.title }}">
{% endfor %}

This way, you will only get a single scaled down (1x) image on every device regardless its screen width and density.

For exampe, if the page on disk is named '[email protected]' and has an intrinsic width of 800px (2x), your above Twig code will generate the following HTML using an image of 400px (1x) wide:

<img src="/images/.../<hash>-retina1x.jpeg" class="..." alt="...">

It that the result you were looking for? If not, what exactly are you trying to achieve?

NB. If you want to mark your issue as being solved, you can use the 'solution' button at the lower right corner of any reply. That way, readers will know which reply contains the solution.

@pamtbaau

yes, I use this solution on a loop for owl carousel:

<div class="owl-carousel owl-theme">
    {% for image in page.media.images %}
     <img src="{{ image.url }}" class="img-full-responsive s-rounded" alt="{{ page.title }}">
    {% endfor %}              
</div>

<script type="text/javascript">
var owl = $('.owl-carousel');
owl.owlCarousel
({
items:1,
loop:true,
margin:10,
autoplay:false,
autoplayTimeout:3000,
autoplayHoverPause:true,
});
</script>        

I'm looking to have various sizes/resolution on differente device (smaller for mobile, bigger for desktop).

I haven't tested actual solution on big screen.

ps. sorry for "solved", I not have see the button "solution"!

About carousel, with image from same page, seems I solved:

1) renamed all images with final part of filemane @2x
2) using this code in the carousel section:

    <div class="owl-carousel owl-theme">
            {% for image in page.media.images %}
                {{ image.derivatives(200,800,200).sizes('95vw').html('', page.title, 'img-full-responsive s-rounded') }}
            {% endfor %}              
    </div>

    <script type="text/javascript">
            var owl = $('.owl-carousel');
            owl.owlCarousel({
            items:1,
            loop:true,
            margin:10,
            autoplay:false,
            autoplayTimeout:3000,
            autoplayHoverPause:true,
            });
    </script>           

actually I don't find solution for images taken from other posts incorporated in the page:

{% for post in taxonomy.findTaxonomy({'tag':'features','model':page.taxonomy.model}).order('date', 'desc') %}
<div>
    {% set image = post.media.images|first %}
        {% if image %}
            <img src="{{ image.url }}" class="img-full-responsive" alt="{{ post.title }}">
        {% endif %}
        <blockquote>
            <p class="text-justify">{{ post.content }}</p>
            <cite>{{ post.title }}</cite>
        </blockquote>
</div>
{% endfor %}

@msa, So, half a thumbs up for fixing the first part...

For your carousel, you did not need to rename the images and add '@2x' when using derivatives().

• Adding '@2x' is a handy trick to make Grav automagically downsize the images to all lower resolutions.
• When using 'derivatives()' you force Grav to resize the images to custom sizes. .html() will then in turn use those sizes to build the srcset.

What issue are you facing with images in blog pages?

When I:

• use the 'blog-skeleton' based on Quark,
• use your code above in template 'blog.html.twig', and
• replace the <img> with {{ image.derivatives(200,800,200).html() }},
  (you will need to adapt to your use-case)
• then all required images size are being generated.

@pamtbaau, if I not add @2x, the derivatives not works.... tested.

if I replace <img> <img src="{{ image.url }}" class="img-full-responsive" alt="{{ post.title }}"> with {{ image.derivatives(200,800,200).html() }} , in this part of code:

<div>
{% set image = post.media.images|first %}
{% if image %}
{{ image.derivatives(200,800,200).sizes('95vw').html('', page.title, 'img-full-responsive') }}
{% endif %}
<blockquote>
 <p class="text-justify">{{ post.content }}</p>
<cite>{{ post.title }}</cite>
</blockquote>
</div>

nothing happen... the size remain big, and filename of image remain the same I uploaded with @2x at the end. Tested.

I'm sure I'm doing something wrong, and appreciate a lot your help, but probably something depend by my custom template, with custom css. Or.. depend by OWL. I don't know.

@msa, I cannot imaging it has anything to do with your custom template, css or Owl...

Just to be sure:

• Did you check the HTML code generated for the <img>?
  It should be something like: (I guess you already know this...)
  TXTCopy

  <img alt="" 
   src="/user/pages/01.home/image.jpg" 
   srcset="/images/9/0/1/4/0/[hash]-image200w.jpeg 200w, 
           /images/4/5/1/3/f/[hash]-image300w.jpeg 400w,
           /images/1/1/3/a/2/[hash]-image600w.jpeg 600w, 
           /images/3/6/2/1/2/[hash]-image800w.jpeg 800w, 
           /user/pages/01.home/image.jpg 1200w"
   sizes="100vw" 
  />
  

• Event if the above code is being generated, you still might not see any difference in the browser when resizing. You might need to refresh the page after resizing, because the browser has to re-evaluate which image fits best and fetch it from the server.

  To see which image is being shown, you could:

  • Right click the image in the browser and open in new tab
  • Or, open the dev tools window of the browser, open the network tab and see which image is loaded when refreshing the page.
• Did you disable cache in 'config/system.yaml' while testing?
• Have you tried deleting all subfolders of '/images' in the root of the site? Are new subfolders being generated with different sizes?
• Have you tried clearing the '/cache' folder in the root of your site?
• Does your browser support srcset? See https://caniuse.com/#search=srcset
  Yes some do still use IE...

If still no success...

• Please check if the power cable is being plugged in
• Check if the computer is switched on
• ...

the power cable is connected... I tried to re-start my windows 95... but the problems remains... 🤔

cache cleaned... different browser used... also.

if use this code:

<div>
% set image = post.media.images|first %}
{% if image %}
{{ image.derivatives(200,800,200).sizes('95vw').html('', page.title, 'img-full-responsive') }}
{% endif %}
<blockquote>
<p class="text-justify">{{ post.content }}</p>
<cite>{{ post.title }}</cite>
</blockquote>
</div>

I can see this in the html generated:

<div>
<img alt="xxxx250" class="img-full-responsive" src="/images/f/7/5/9/3/f7593cbcd7870c4d9c835d3cd5083bd559f1c78e-bgliftradiooptional01800x8001x.jpeg" srcset="/user/pages/04.parts/bg-lift-parts/scanreco-radio-remote/[email protected] 800w, /images/a/a/f/e/f/aafefea6ccd61fbc55ee503d6e05e3dbcc28322c-bgliftradiooptional01800x800200w.jpeg 200w, /images/1/6/a/6/9/16a691ad157197131eaba7455f4938f725976ef7-bgliftradiooptional01800x800400w.jpeg 400w, /images/1/0/6/1/6/1061601df1280397a4e59cd3f07710f6960977de-bgliftradiooptional01800x800600w.jpeg 600w, /images/f/7/5/9/3/f7593cbcd7870c4d9c835d3cd5083bd559f1c78e-bgliftradiooptional01800x8001x.jpeg 400w" sizes="100vw">
<blockquote>
<p class="text-justify"></p><p>Scanreco Radio Remote control with display xxxx</p><p></p>
<cite>Radio Remote</cite>
</blockquote>
</div>

but... if I check the image, from the browser, right click etc.., is the big version, not the scaled version... double check with gtmetrix, not all images are scaled...

Generated HTML looks ok...

Can I have a look at your site somewhere? You can PM me if you want to keep it private.

PM message sent with the address, thanks for help!

I come back to this isse, because it seems that sometimes the images are not scaled.
When I test with gtmetrix, I see this problem:

The following images are resized in HTML or CSS. Serving scaled images could save 468.4KiB (83% reduction).

this is the twig section:

<div class="p-hr" data-aos="fade-up">
                <div class="owl-carousel owl-theme">
                    {% for post in taxonomy.findTaxonomy({'tag':'model','brand':page.taxonomy.brand}).order('date', 'desc') %}
                    <div class="card">
                        {% set image = post.media.images|last %}
                        {% if image %}
                        <div class="card-image">
                            <a href="{{ post.url }}">
                                {{ image.derivatives(100,400,100).sizes('(max-width:26em) 100vw, 50vw').html('', post.title, 'img-full-responsive') }}
                            </a>
                        </div>
                        {% endif %}
                        <div class="card-footer">
                            <div class="tile tile-centered">
                                <div class="tile-icon">
                                  <a href="{{ post.url }}" class="btn btn-lg btn-primary"><i class="icon icon-arrow-right"></i></a>
                                </div>
                                <div class="tile-content">
                                  <div class="tile-title">{{ post.title }}</div>
                                  <small class="tile-subtitle text-gray">{{ post.content|split('<h3>')[1]|default|raw|split('</h3>')[0] }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}                    
                </div>
                <script type="text/javascript">
                var owl = $('.owl-carousel');
                owl.owlCarousel({
                    items:5,
                    loop:true,
                    margin:10,
                    autoplay:false,
                    autoplayTimeout:3000,
                    autoplayHoverPause:true,
                    responsiveClass: true,
                    responsive:{
                        0:{
                            items: 1,
                        },
                        480:{
                            items: 2,
                        },

                        960:{
                            items: 3,
                        },

                        1280:{
                            items: 4,
                        },

                        1440:{
                            items: 5,
                        }
                    }
                });
                </script>   
            </div>

Some suggestion?
is a cache related problem? I cleaned the cache, e purge the cache on CDN, but seems nothing change.

Thanks