Image links working on local host but not server

The CMS Questions
1

Hi,

i’m been working on my site locally (on a mac) and my images show up but are broken on my edit: hosting server (hosted on krystal.io). There are two instances of this not working properly— the first being the noise.gif i am using in the background of my website pages, and image profiles on members page.

The website is live at DRAFT: Transformative Pedagogies Lab

EDIT: I got this first instance outlined below to work.

1. Noise used as css background-image:
This is the php code snippet for the landing page noise background,

<?php $noise = $site
  ->image('noise.gif')
  ->url(); 
?>

<div class="page__overlay">
  <div class="page--noise" style="background-image: url(<?= $noise ?>);"></div>
  <div <?php e($page->intendedTemplate()->name() === 'home', ' class="landing-page--gradient"', ' class="page--gradient"') ?>></div>
</div>

2. Member profiles:
The image links show up when the user selects the avatar option, making me wonder if it’s the resize(400,400) that’s causing the error.

<?php foreach ($members as $member): ?>

        <div class="member__item">

          <!-- col 01 : img -->
          <?php if ($member->imgSelection() == "profile" && $member->image()->toFile()): ?>
            <div class="member--img">
              <img src="<?= $member->image()->resize(400, 400)->url() ?>" />
            </div>
          <?php elseif ($member->imgSelection() == "avatar"): ?>
            <div class="member--img-empty">
              <?php
              $img = $member
                ->noImg()
                ->toFile();
              ?>
              <?= $img ?>
            </div>
          <?php endif ?>

          <div class="member--info">
            <!-- info -->
          </div>

        </div>
    <?php endforeach; ?>

Thank you in advance for the help!

2

I use Krystal hosting. Which image dirver are you using in the config? The default will be GD, i would reccommend using IM if you want to manipulate animated gifs with kirby. GD cant do that, you will end up with a resized gif but just the very first frame. You will loose the animation. IM can resize animated gifs AND keep the animation in the resulting file.

Make sure IM is turned on in the php settings in your cPanel account and set Kirby config to use IM as the image driver. the following should work:

'thumbs' => [
  'driver' => 'im',
  'bin' => '/bin/convert'
],
3

I just noticed that the images in your member directory are webp images and hitting one of them directly causes a Kirby whoops. If you temporarily enable debug mode on the live server to read the error, that would maybe give. aclue as to what is going on. Remember to turn ir back on again for security reasons.

4

Thank you for the advice, i really appreciate it!

I removed the format: webp i had set on the member-image yml, and then tried to swap in image files from the live site’s admin panel. It throws an error “Required extension GD is not loaded.” on the image upload when i try both .png and .jpg

I’m new to coding in php and am not entirely sure what Image driver and GD/ IM mean, i skimmed through the php docs but would be able to help point me to what might be happening?

As well, following up on your first note – can i clarify, i’m adding this block code to my config file site/config /config.php ? And i wasn’t sure where to change the Image drive setting in my cPanel.

Thank you in advance!

5

Ok so this is server side software that is not part of Kirby, this is something that is installed on the server by Krystal. GD is the default on 99.99% of hosting providers, not just Krystal. An alternative (and in my opinion the better option as its results are better then GD) is ImageMajick or IM for short.

It is really odd that GD isnt loaded. What hosting plan do you have with Krystal?

Yes you have added the code to the correct file in the config.php file. If you go into the “Select PHP version“ under the software group in cPanel and look at the list of extensions. Make sure imagick and gd are enabled. If t still doesnt work after that, i would contact Krystal support and ask them to verify that IM and GD are setup correct. For reference, here are my own settings on Krystal…

image
image1303×1603 238 KB

6

Thank you!!! This fixed it!! I really appreciate you taking the time to lay this out for me !!!

7

No problem :slight_smile:

If you want to use IM locally as well, assuming your on a mac, the best way is to install ImageMagick via Homebrew and then use Kirby multiple domain configs to handle the difference between local and live servers. I use config.php to drive local hosting and global stuff.

In the live/staging domain specfic configs i overide the thumbs setting to set the bin to the imagemagick binary to a different path.

After setting up domain configs your local config should have:

'thumbs' => [
  'driver' => 'im',
  'bin' => '/opt/homebrew/bin/convert'
],

and in the Krystal domain specific configs use

'thumbs' => [
  'driver' => 'im',
  'bin' => '/bin/convert'
],

You can read more abou multiple domain configs over here:

8

Thank you– i’ll take a look :slight_smile: