Background image not loading

1

Hi,

I have this snippet:

<?php foreach (page('updates')->slidesgallery()->toStructure() as $slide): ?>
    <?php if ($cover = $slide->albumcover()->toFile()): ?>
        <div class="swiper-slide" style="background-image: url('<?= $cover->url() ?>');">
        </div>
    <?php endif ?>
<?php endforeach ?>

I have this yml file:

title: Update

columns:
  main:
    width: 2/3
    sections:
      fields:
        type: fields
        fields:
          heading:
            type: text
          image:
            type: files
          date:
            type: date
          blogtype:
            type: text
          textcolleft:
            type: textarea
            buttons: false
            size: large
          textcolright:
            type: textarea
            buttons: false
            size: large
          youtubeurl:
            type: url
          spotifyurl:
            type: url
          gallery:
            type: toggle
          slidesgallery:
            label: Slider discography
            type: structure
            fields:
              albumcover:
                label: Album cover
                type: files

  sidebar:
    width: 1/3
    sections:
      files:
        type: files

But on frontend I see this:
Screenshot 2024-01-09 at 15.26.10

Why is my background image not loading.
Am I overseeing something?

2

Hm, what we see in the frontend somehow doesn’t correspond to the snippet posted above (div vs li)?

1 Like
4

My bad I made a mistake.
The commented out code was just in my template.

Its not rendering still. What am I doing wrong.

My template:

<section class="section section-white">
    <div class="container container--breakout">
        <div class="swiper-container swiper-container--gallery">
        <ul class="swiper-wrapper">
            <?php snippet('slider-gallery') ?>
        </ul>
        </div>
        <div class="swiper-container swiper-container--gallery-thumbs">
        <ul class="swiper-wrapper">
            <?php snippet('slider-gallery') ?>
        </ul>
        </div>
    </div>
</section>

my yml file

title: Update

columns:
  main:
    width: 2/3
    sections:
      fields:
        type: fields
        fields:
          heading:
            type: text
          image:
            type: files
          date:
            type: date
          blogtype:
            type: text
          textcolleft:
            type: textarea
            buttons: false
            size: large
          textcolright:
            type: textarea
            buttons: false
            size: large
          youtubeurl:
            type: url
          spotifyurl:
            type: url
          gallery:
            type: toggle
          slidesgallery:
            label: Slider discography
            type: structure
            fields:
              galleryimage:
                label: Gallery images
                type: files

  sidebar:
    width: 1/3
    sections:
      files:
        type: files

my snippet:

<?php foreach (page('updates')->slidesgallery()->toStructure() as $slide): ?>
    <?php if ($cover = $slide->galleryimage()->toFile()): ?>
        <li class="swiper-slide" style="background-image: url('<?= $cover->url() ?>');"></li>
    <?php endif ?>
<?php endforeach ?>
5

What is the result in the inspector now?

1 Like
6

Nothing rendering at all:

Screenshot 2024-01-10 at 13.12.21

7

Are you really on the right page? You are calling page('updates')->slidesgallery(), but the slidesgallery is in a blueprint called update.yml? So does the updates page have this field at all?

1 Like
8

Your right. The page is update (sub page of updates)

I changed it:

<?php foreach (page('update')->slidesgallery()->toStructure() as $slide): ?>
    <?php if ($cover = $slide->galleryimage()->toFile()): ?>
        <li class="swiper-slide" style="background-image: url('<?= $cover->url() ?>');"></li>
    <?php endif ?>
<?php endforeach ?>

But now I get:

This page is currently offline due to an unexpected error. We are very sorry for the inconvenience and will fix it as soon as possible.

Advice for developers and administrators:
Enable debug mode to get further information about the error.

9

So this page does not exist. Why not simple use $page to refer to the current page.

1 Like
10

YEEESSSS!!
Thanx SO MUCH!

Your amazing!!!