Novice issue with Kirby if/else/elseif PHP statements

The CMS Questions
1

Hello,

I’m currently having difficulty with a Kirby/PHP if/else statement - primarily due to me being very much a novice when it comes to PHP.

The Kirby page I’m working on allows the upload of icons from the page’s blueprint/panel as both SVGs and bitmaps.

However, SVG’s should be rendered inline (which I have achieved with <?php echo $icon->read(); ?> while bitmaps should be rendered via the usual img src HTML tag.

I’ve also referenced - ‘Notes about handling SVGs in Kirby and your sites’ - which illustrates exactly what I’m trying to achieve and studied other posts on if/else/elseif such as - 'PHP ‘if’ for beginner ’ and various other Kirby-based code examples. However, after several hours and multiple attempts I just can’t make it work.

This is my latest attempt:

<ul class="bigtop grid">
        <?php foreach($page->servicesoptions()->toStructure() as $item): ?>
          <li class="services-item column" style="--columns: 4">
            <div class="services-item-content">
        				<?php if ($icon = $item->icon()->filterBy('extension', 'svg')->toFile()): ?>
        						<?php echo $icon->read(); ?>
        							<?php elseif($icon = $item->icon()->filterBy('extension', 'jpg')->toFile()): ?>
        								<img src="<?= $icon->url() ?>" width="<?= $icon->width() ?>" alt="<?= $item->title()->html() ?> icon" class="services-item-icon" />
											<?php endif ?>
              <h3 class="services-item-title"><?= $item->title()->html() ?></h3>
              <p class="services-item-text">
                <?= $item->text()->html() ?>
              </p>
            </div>
          </li>
        <?php endforeach ?>
      </ul>

However, I’m either being met with Kirby’s default ‘offline due to an unexpected error’ (in my PHP code!), or SVGs and bitmaps are both (via the above code) being injected inline (SVGs are rendered nicely but bitmaps are also being inlined and displayed as unintelligible code…

Screenshot 2022-03-22 at 13.06.32
Screenshot 2022-03-22 at 13.06.32753×219 15.1 KB

Could someone point me in the right direction please?

Thanks for any assistance or advice.

2

Try rephrasing your “if” condition to

if ($item->icon()->toFile()->extension() == 'svg')

instead. $item->icon(), as in your code, gives you a field object, which cannot be filtered by “extension” as it’s not a file. By first transforming it into a file object with ->toFile(), you can then apply the ->extension() method to retrieve its extension.

The following – untested – code aims to streamline it a bit and makes use of the svg() helper for SVG output:

<ul class="bigtop grid">
  <?php foreach($page->servicesoptions()->toStructure() as $item): ?>
    <li class="services-item column" style="--columns: 4">
      <div class="services-item-content">
        <?php if ($icon = $item->icon()->toFile()) : ?>
          <?php if ($icon->extension() == 'svg'): ?>
            <?= svg($icon) ?>
          <?php else : ?>
            <img src="<?= $icon->url() ?>" width="<?= $icon->width() ?>" alt="<?= $item->title()->html() ?> icon" class="services-item-icon" />
          <?php endif ?>
        <?php endif ?>
        <h3 class="services-item-title"><?= $item->title()->html() ?></h3>
        <p class="services-item-text"><?= $item->text()->html() ?></p>
      </div>
    </li>
  <?php endforeach ?>
</ul>
1 Like
3

Sebastian,

I can’t thank you enough.
Your ‘untested’ solution does exactly what I require and works flawlessly.

In addition to your code assistance, I also appreciate you taking the time to explain. As someone still getting to grips with PHP, I’ve learned lots from your post and solution. I’m also pleasantly surprised by the SVG() helper. While I was aware of this, I had no idea that it inlined the raw SVG code …allowing me to manipulate with CSS.

Thanks again Sebastian. I appreciate your help.

John