Set background image based on uploaded page image

Kirby 2 Solved ✅
1

Hello.
I’m trying to set the background image of items dynamically based on the uploaded image.
Here’s my current template:

` <ul class="category-list">
      <?php foreach($categories as $category): ?>
      <li class="<?php echo $category->uid() ?>" style="background: url(<?php echo $category->image()->url() ?>)">
        <div class="category-info">
          <h1><?php echo $category->title() ?></h1>
          <p><?php echo excerpt($category->text(), 50) ?></p>
          <a href="" class="button button_highlight button_small"><?php echo l::get('view_menu') ?></a>
        </div>
      </li>
      <?php endforeach ?>
    </ul>`

As you can see in my LI, I’m inlining the background but nothing is being echoed so I’m sure there’s something wrong with how I fetch the image.
Please help.

2

Do you get any error messages? Is the rest of the page rendered correctly or do you get an empty page? Could you post the rendered source code of the page?

3

All html before this php are rendered properly.

Edit:

<section id="menu">
  <div class="wrapper">
    <h2>Menu</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>    
    <ul class="category-list">
    </ul>
  </div>
</section>

Nothing is rendered.

4

So the rest of the page isn’t? Pls. turn on debugging in your config.php, to be able to debug code errors.

I guess not every page has an image? Then trying to get the url of an non-existing image will result in an error. Use an if-statement to check if an image exists before trying to echo the url to prevent such errors.

5

Oh, I thought it would just do nothing if it doesn’t see an an image. I will try to upload images and report back, Thanks.

6

Unfortunately, this is not the case. To prevent that your site breaks if your users add a page without images, it is necessary that you always, always check if something exists before trying to do something with it.

7

It works. I added image in every page.
How should I do checking if it exists or not?

Edit:
Nevermind, got it.

Thanks.

8

@texnixe

Wait, I’m sorry. I still have issues. I added this code but pages without images are not rendered properly. li tag is being removed.

<?php if($category->image()): ?>
      <li class="<?php echo $category->uid() ?>" style="background: url(<?php echo $category->image()->url() ?>); background-size: cover">
      <?php endif ?>
9 
<li class="<?php echo $category->uid() ?>" style="background: url(
      <?php 
      if($image = $category->images()->first()) {
        echo $image->url();
      } ?>
      )">); background-size: cover">
10

Rendering stops at an item without image.

11

I changed the code above, somehow the first try did not work.

12

To turn on debugging, add this line to your config.php

c::set('debug', true);
13

Now it works. Thanks for the help.
It got me thinking. Should I better use thumbnails?
This is my current snippet for it:

<section id="menu">
  <div class="wrapper">
    <h2><?php echo $data->title()->html() ?></h2>
    <?php echo $data->text()->kirbytext() ?>
    
    <?php
      $categories = $pages->find('menu')->children()->visible();
    ?>
    <ul class="category-list">
      <?php foreach($categories as $category): ?>
      <li class="<?php echo $category->uid() ?>" style="background: url(
      <?php
        if($image = $category->images()->first()) {
          echo $image->url();
        } ?>
      ); background-size: cover">
        <div class="category-info">
          <h1><?php echo $category->title() ?></h1>
          <p><?php echo excerpt($category->text(), 50) ?></p>
          <a href="" class="button button_highlight button_small"><?php echo l::get('view_menu') ?></a>
        </div>
      </li>
      <?php endforeach ?>
    </ul>

    <a href="menu" class="button button_highlight button_circle"><span><?php echo l::get('view_our_menu') ?></span></a>
  </div>
</section>

And this is the design:

Screen Shot 2016-02-20 at 9.49.53 PM.png787×764 579 KB

Is it just a preference or there’s benefits of doing the other like cleaner code or SEO?

14

Sorry, I don’t quite understand, what exactly do you mean?

And yes, if the images are quite big, I’d use thumbnails.

15

Those images are set as background and not real thumbnails. The UX is it’s basically a link to its contents when clicked. So my question was, is it better for SEO purposes or other good reasons if I code it as a thumbnail/image instead of a background-image?

16

If there is no particular reason for using background images, I think it might be better to use image tags instead. This not only concerns SEO aspects but also questions of accessibility. But I’m not a SEO expert, and if the images are more for decorative purposes than conveying any meaning, it might not matter at all. From a perspective of reducing http requests, background images would only make sense if you use sprites, not single images.