Image slider with Text on each Image


#1

Hello,

I am currently building a slider with owl carousel which is no problem only with images, but I need to add a headline to each image with a link (around the image – text on the image).

The code for the basic slider without text:

<div id="homeowl" class="owl-carousel">
    <?php if($page->children() != ''): ?>
        <?php foreach($page->children()->find('gallery')->images() as $image): ?>
            <div class="startsilder">
                <img src="<?php echo $image->url() ?>" alt="">
            </div>
        <?php endforeach ?>
    <?php endif ?>
</div>

Fetches the images from the subfolder, everything is easy to maintain.

What I would like to achive (without beeing hard coded):

<div id="homeowl" class="owl-carousel">
  <div class="startsilder">
    <a href="linkhere">
      <div class="item">
        <span>New:</span><br>Product foo
      </div>
    </a>
  </div>
  <div class="startsilder">
    <a href="linkhere">
      <div class="item">
        <span>Action:</span><br>Product bar
      </div>
    </a>
  </div>
</div>

What is the best practice to ad individual text/captions?

By the way: the Owl carousel seems out of development, so if somebody has a cool replacement, I am open to suggestions.

Thanks in advance!


#2

You might want to check out this answer on SO. Looks like OwlCarousel has been taken over and there’s a new beta but there are of course lot of alternatives.

Check out this post for some alternatives: Basics: Galleries, Sliders


#3

Thank you, but the styling is no problem, I can do it hard coded. But I am looking for a way to add individual text to each image, which can be done by somebody without coding knowledge.

Something like

01-sliderimage.jpg
01-slidertext.md
02-sliderimage.jpg
02-slidertext.md

or with the panel, or otherwise which combines images and text.


#4

Oh, I see, yes, you can add meta data to images, either via the panel (see here how to add fields to your blueprints), or you can add text files manually, then the text files must have the same name as the image, e.g.

  • myimage.jpg => myimage.jpg.txt

Then you can call these fields in your templates like this:

<?php
$image = $page->images()->first();
$caption = $image->caption();

#5

This is it! Thank you very much, somehow I did not find the caption variable in the docs (at least in a “right” way.) :slight_smile:


#6

Sorry, but I forgot about the link around the whole image. “Link: linkhere” in the txt and than ->link() around my parent div?


#7

Yes, exactly :slight_smile: (and some more characters …)


#8

Sorry to bother you again, my php is still crappy…

<div id="homeowl" class="owl-carousel">
    <?php if($page->children() != ''): ?>
        <?php foreach($page->children()->find('gallery')->images() as $image): ?>
            <div class="startsilder">
                <img src="<?php echo $image->url() ?>" alt="">
		    <div class="homecaption"><?php echo $caption = $image->caption(); ?></div>
            </div>
        <?php endforeach ?>
    <?php endif ?>
</div>

The <?php echo $page->link()->link() ?> tag goes where? Into the foreach? As i want the link on the image.


#9

If you want to link around the image:

<div id="homeowl" class="owl-carousel">
    <?php if($page->children()->count() > 0): ?>
        <?php foreach($page->children()->find('gallery')->images() as $image): ?>
            <div class="startsilder">
               <a href="<?php echo $image->link() ?>">
                  <img src="<?php echo $image->url() ?>" alt="">
               </a>
		    <div class="homecaption"><?php echo $caption = $image->caption(); ?></div>
            </div>
        <?php endforeach ?>
    <?php endif ?>
</div>
```
I assume that your link is in the meta data file, otherwise it should be `$page->link()` of course.

#10

Damn it, I was so blind into it I just forgot to think abaout a simple < a >-tag … :weary: time for a break and thank you very very much!


#11

You are welcome :slight_smile:. Enjoy your break :coffee:


#12

i also want to create a slider with text and button (by using owl-carousel, caption and copy text on each image, the button is only on the first slide) on slides (i have four slides all in all). i use this code (the same which was posted here by texnixe):

<div class="owl-carousel owl-theme col-1-1">

          <?php if($page->children() != ''): ?>
            <?php foreach($page->children()->find('gallery')->images() as $image): ?>
                <div class="startsilder">
                  
                    <img src="<?php echo $page->images()->first(); ?>" alt="">
                    <div class="slider-caption"><?php echo $caption = $image->caption(); ?></div>
                    <button class="carousel-button"><a href="">Jetzt spenden</a></button>
                   <div class="slider-text"><?php echo $slidertext = $image->slidertext(); ?></div> 
                    
                </div>
            <?php endforeach ?>
          <?php endif ?>
</div>

when i am trying to add additional text (under caption) by adding the second div beneath - it’s not working properly, because suddenly (after adding the second div) i am able to see two slides (in a column) with caption on the first slide and the copy text on the second slide. Could someone give me a hint how to do this? i am new to kirby and php, so i really could use some help.


#13

Within your image src attribute, you are adding an image where you would need the URL of the image only:

This code:

<?php echo $page->images()->first(); ?>

echos an image tag, not a URL.

Also, why are you calling the first image of the page in this first slider? Does not seem to make sense?

You are missing an if statement if you only want the button on the first image. Corrected code:


<div class="owl-carousel owl-theme col-1-1">

          <?php if($gallery = $page->children()->find('gallery')): ?>
          <?php $images = $gallery->images(); ?>
            <?php foreach($images as $image): ?>
                <div class="startsilder">
                  
                    <img src="<?= $image->url() ?>" alt="">
                    <div class="slider-caption"><?= $image->caption(); ?></div>
                    <?php if($image == $images->first()): ?>
                      <button class="carousel-button"><a href="">Jetzt spenden</a></button> 
                    <?php endif ?>
                   <div class="slider-text"><?= $image->slidertext(); ?></div> 
                    
                </div>
            <?php endforeach ?>
          <?php endif ?>
</div>

#14

Thanks for your reply!

But unfortunately it still doesn’t work as I want it to work. Now I see two images in a column, on the first there is the caption, on the second the copy and under the second slider - there is a small part of the third slide visible on which the button is displayed and all of these 3 elements should be displayed on one slider. So i guess the code still has to be changed somehow.

Do I need this part of code (below) if i am already looping on each image from gallery in the beginning:

<img src="<?= $image->url() ?>" alt="">

sorry if the questions are stupid or really easy to solve!


#15

Don’t you want to output an image?

I had a typo in my code above which I have corrected, a missing = in this line: <?php if($image == $images->first()): ?>


#16

yes, I do, but I have 4 different images all in all. So i don’t know if it makes sense to output only one of them, because the url path provides only one particular image. but it still shows 2 images in a column, so it’s not how i want the slider to look. okay, i will try to figure out how to fix it and make it work :slight_smile:


#17

Maybe there is something wrong with your slider initialization rather then with the markup. The code does not only output one image tag, but one image tag for each image in the loop. Have you set the number of items to show in the init code to 1?

Have you checked if the markup you end up with when you check the source code in your browser is what you expect it to be (before the JS kicks in, disable JS)?


#18

yes, the number of items is 1 in the init code. so i don’t know where the problem is, but will try to debug it. anyway thanks for help :slight_smile: