Images fetched from web (CDN) doesn't display

Kirby 3 Questions 🤔
1

When I add images through URL on the panel, the image is displayed on the panel but nothing would show on the actual website after saving the changes. Directly uploading the image file to the server works perfectly fine though.

Does anyone know solution to this? Thank you in advance!

스크린샷 2023-01-30 오후 1.41.13
스크린샷 2023-01-30 오후 1.41.131318×959 99.1 KB

2

Have you check the rendered output in your browsers dev tools?

Do you get any errors in console or network tab?

If the image is rendered correctly and there are no errors, make sure that it is not hidden by any style settings.

3

I found what’s preventing images from web being displayed. This a portion of the image snippet I currently have that seems to be the problem:

<?php if ($srcValue): ?>
<figure>
  <a <?= $attrs ?>> 
    <?php if ($image->extension() != 'gif'): ?>
      <img src="<?= $srcValue ?>" alt="<?= esc($alt, 'attr') ?>" crossorigin="anonymous" srcset="<?= $image->srcset()?>" loading="lazy">
    <?php else: ?>
      <img src="<?= $srcValue ?>" alt="<?= esc($alt, 'attr') ?>" crossorigin="anonymous" width="<?= $image->resize(1800)->width()  ?>" height="<?= $image->resize(1800)->height()  ?>" loading="lazy">
    <?php endif ?>
  </a>

  <?php if ($caption->isNotEmpty()): ?>
  <figcaption class="img-caption">
    <?= $caption ?>
  </figcaption>
  <?php endif ?>
</figure>
<?php endif ?>

If I replace it with very basic form like the one below, it works (I copy pasted it from the Kirby starterkit):

<?php if ($srcValue): ?>
<figure>
  <a <?= $attrs ?>>
    <img src="<?= $srcValue ?>" alt="<?= esc($alt, 'attr') ?>">
  </a>

  <?php if ($caption->isNotEmpty()): ?>
  <figcaption class="img-caption">
    <?= $caption ?>
  </figcaption>
  <?php endif ?>
</figure>
<?php endif ?>

However, then I can’t use srcset for responsive images. Is there a way to fix this? Perhaps I’m following a wrong method to compress images. I’m also using an if statement for images with .gif extension because srcset prevents gif images’ animation.

4

You can’t use srcset with an image from the web anyway, the method requires a file object (that is, a file living in the file folder or a virtual file).

1 Like