How to filter only mobile images in a slider

The CMS Questions
1

Hi,

i created a slider with 4 slides and 2 images per one slide (slide_desktop - for desktop version and slide_mobile for mobile version of the website). The slider is created via looping (see below):



    <?php if($slider = $page->children()->find('slider')): ?>
              <?php $slides = $slider->children()->visible(); ?>
                <?php foreach($slides as $slide): ?>

                     <div class="carousel-content"> 
                     	  
				          <img class="slide" src="<?= $slide->image()->url() ?>" alt="<?= $slide->image()->caption() ?>" data-is-mobile="1"
				          data-src="<?= $slide->images()->filterBy('filename', 'slide_mobile') ?>">

				          

                          <h1><?= $slide->headline()->html(); ?></h1>
                          <p><?= $slide->text()->html(); ?></p>
                          <a href="<?= $slide->link()?>" class="carousel-button"><?= $slide->linktext()->html() ?><i class="fa fa-angle-right" aria-hidden="true"></i></a>
                     </div>

                <?php endforeach ?>
    <?php endif ?>

I added a data-src attribute to img tag and filled it with a link to mobile image (via panel), because I want to grab the data-src attribute via JS when the width of the browser window is smaller than 800px. Could someone tell me how can I specify the data-src attribute to get only the link of mobile image? Because both of images (slide_desktop and slide_mobile) have data-src attribute, but I am not able to get only mobile slide. I tried already filterBy method by file name, but it didn’t work. Thanks for any help!

2

Should probably be:

filterBy('filename',  '*=', 'slide_mobile')

But the problem with this method is that is return a collection, not a single image (you can add first() to it to prevent this). If the images are always called slide_mobile.jpg, why not grab the file by name:

$image = $slide->image('slide_mobile.jpg');

On a side note: You are calling the url() method etc. without checking if you even have an image, always use an if statement before calling any object method.

3

I already tried ealier the solution with *= when it comes to filterBy, but it also didn’t work. The method with grabing the image via its name also doesn’t work, because it shows something like this right now (in the code): data-src = <img src= http: … slide_mobile.png>

I guess the problem is somewhere in the img tag in src attribute - I mean that I am looping through only first images (and the first image for each slide is alwasy slide_desktop) for each slide and that’s why it doesn’t want to grab the slide_mobile images.

It looks like this, the structure: slider -> slide, slide, slide, slide -> and 2 images (slide_desktop and slide_mobile, names of images are always the same) for each slide, so all in all I have 8 images.

4

Well, you are not supposed to echo the image, but get the URL of course:

if($image = $slide->image('slide_mobile.png')) {
  $url = $image->url();
}

The echo $url in the source attribute. Or use a ternary operator.

data-src="<?= ($image =  $slide->image('slide_mobile.png'))? $image->url():'' ?>
5

So it returns the link right now, but the link doesn’t work and slide_mobile images are not shown after removing the src attribute (which contains the path to slide_desktop) and leaving just the data-src attribute with the path to slide_mobile images. But maybe this is the problem with JS or something else, and not the php file, but I am not sure.

In fact slide_mobile images are not even loaded (as I checked the network in the browser inspector), even though they are uploaded to the server and via kirby panel as well.

Anyway thanks for help!

6

Is the link to the image correct now in the data-src attribute?

7

yes, it is. the same link as in the panel (shown in public link field)

8

Then it must be a problem with your JavaScript.

9

Have you sorted this out, @helprin?

10

yes, i did. had to change the js file a bit :slight_smile: