SVG gallery with brands

Kirby 3 Solved ✅
1

I’m following Bastian’s videos to learn KirbyCMS and trying to recreate a list of brands I worked with to display in my website.

Everything works well, but I’d like to get the SVG path of the image so that I can style them via CSS.

What I did so far:

In content/5_brands I have all the svg images.

I followed the snippet and controller approach, so I have:

Controller:

// controllers/brands.php

<?php
return function ($page) {
    $brands = $page->images()->filterBy('extension', 'svg');
    return [
        'brands' => $brands
    ];
};

Snippet:

<!-- snippets/brands.php -->

<ul class="brands">
  <?php foreach ($brands as $brand): ?>
  <li>
      <figure>
        <img src="<?= $brand->url() ?>" />
      </figure>
  </li>
  <?php endforeach ?>
</ul>

Template:


<?php snippet('header') ?>
<?php snippet('navigation') ?>
<?php snippet('breadcrumb') ?>

<div class="container">
    <h3><?= $page->title() ?></h3>
    <p> <?= $page->text()->markdown() ?></p>
</div> 

<?php snippet('brands') ?>

<?php snippet('footer') ?>

I the video related to SVG, Bastian is using asset( ) but I cannot get the path.

I tried another approach for the snippet but still does not work:

<ul class="brands">
  <?php foreach ($brands as $brand): ?>
  <li>
      <figure>
      <svg viewBox="0 0 100 100">
        <path d="<?= $brand->svgPath() ?>" />
      </svg>
      </figure>
  </li>
  <?php endforeach ?>
</ul>

What I can do to get the path in the snippet?

A second related question is that my approach currently is to create a brand page to test this, and my idea is to reuse the snippet is the homepage of the website.
Is it correct to have the brands like I did inside content/5_brands ? Or semantically is better to have them in the asset folder?

I’m trying to use the snippet from the home page with this code:

  <?php snippet('brands', [
    'brands' => page('brands')
    ->children()
  ]) ?>

And the no errors so far, but svg/brand are not listed.

Thanks for any help.

2

You first example should work, what is rendered in the browser when you check the inspector.

If you want to actually output the svg tag, you can do

<ul class="brands">
  <?php foreach ($brands as $brand): ?>
  <li>
      <figure>
        <?= $brand->read() ?>
      </figure>
  </li>
  <?php endforeach ?>
</ul>
3

Thanks @texnixe,

<?= $brand->read() ?>

is what I was missing.

I’m able now to display the list of brands in the brand page and get the path (my portfolio adapts to user settings preference for dark/light theme).

For the second question however, I tried:

  <?php snippet('brands') ?>

and get

Whoops\Exception\ErrorException thrown with message "Undefined variable $brands"

That according to the video is expected because the variable $brand is missing.

I’m trying with

    <?php snippet('brands', [
    'brands' => page('brands')
    ->children()
  ]) ?>

but the result is empty:

  <ul class="brands">
  </ul>

I"m sure there is an error, but cannot figure out :frowning:

4

Because you are passing the children instead of the images to the brands variable.

 <?php snippet('brands', [
    'brands' => page('brands')
    ->images()->filterby('extension', 'svg')
  ]) ?>
1 Like
5

Amazing!!! Thanks.
I realized what my mistake was.