[Resolved] Legacy view slick slider: different image size for mobile

[Author]

Posts

[mariaR-3]

I have a slider built in Legacy view with slick.js (hidden link)

I would like to have a different image size on mobile, in order to improve the page loading time.

this is what I have right now in the template editor:

<div class="slider-app-card">
<div class="slick-img-wrapper">[types field='imagen-aplicacion' title='%%TITLE%%' alt='%%ALT%%' size='full'][/types]</div>
    <h3>[types field='nombre-aplicacion'][/types]</h3>
    <div class="aplicacion_desc">
        <p>[types field='desc-aplicacion'][/types]</p>
    </div>
</div>

I wonder if there is a way to have 2 different values, like size='full' on desktop and 'medium' on mobile.

Is there a way to achieve this?

Thank you in advance

[Minesh]

Hello. Thank you for contacting the Toolset support.

As you are using slick slider js - I see it also offers responsive breakpoints:
- https://stackoverflow.com/questions/31669086/slick-carousel-responsive-breakpoints
- hidden link

Can you please try to use that and check if that help you to resolve the issue.

[mariaR-3]

Thank you Minesh.

Unless there is something I am missing, I don't think that approach serves my purpose. I don't want to resize the width, I am trying to serve different images really, so that the weight of the images on mobile is lighter than on desktop.

For instance, in desktop I'll have the full resolution but on mobile I would serve the medium or thumbnail version.

Using breakpoints only, the image would always be the same wouldn't it?

[Minesh]

In that case if you want to display different size image per device:

Toolset offer's bootstrap 4. you should enable if if you did not enable from:
=> Toolset => Settings => General tab => Bootstrap loading => Select option "Toolset should load Bootstrap 4"

and then try to use the following code:

<div class="row">

<!-- For extra small -->
<div class="d-xs-block d-sm-none"> 
<img class="img-responsive" src="[types field='imagen-aplicacion' size='thumbnail' url='true'][/types]" /> 
</div>

<!-- For small/mobile  -->
<div class="d-none d-sm-block d-md-none"><img class="img-responsive" src="[types field='imagen-aplicacion' size='thumbnail' url='true'][/types]" /></div>

<!-- For medium/tablet  -->
<div class="d-none d-md-block d-lg-none"><img class="img-responsive" src="[types field='imagen-aplicacion' size='medium' url='true'][/types]" /></div>

<!-- For large/desktop -->
<div class="d-none d-lg-block d-xl-none"><img class="img-responsive" src="[types field='imagen-aplicacion' size='large' url='true'][/types]" /></div>

<!-- For extra large -->
<div class="d-none d-xl-block"><img class="img-responsive" src="[types field='imagen-aplicacion' size='extra-large' url='true'][/types]" />
</div>

</div>

You can set the different image size by adjusting the size attribute per device as required.

I hope the above solution will help you to resolve the issue.

[mariaR-3]

Thank you Minesh, I think I can use the solution you propose!