"Art directed" images?

[Ndugu]

Hi,

I am trying out Kirby for my blog, were I want to be able to display images with different css styles on the same page. Pretty much like:

image

• with shadow

• with rounded corners

• plain

How can I tell kirby which of my css classes I want to get applied to this or that image?

I read about „art-directed blog post“ but I am not sure if that is right way to go.

Also, I am new to PHP and try to „learn it along the way“. How can I tell Kirby to put an image - not coverimage - on a page, just were I need it to be? If I use the panel and drag an image in, it does show up, but that way, I won’t be able to style this image this way and that image that other way, right?

So, I need to make… what? A snippet? A template? A blueprint? All of it? I just don’t get it.

[texnixe]

How you can add style to images pretty much depends on how you add the image to your content.

For example, if you drag and drop an image into a textarea field, Kirby creates a Kirbytag that looks like this:

(image: someimage.jpg)

To style this image differently, you can add a class to this tag:

(image: someimage.jpg class: shadow)

If you use an image field in the panel, you would add the class when fetching that image in your template.

There’s also a new cookbook recipe about handling images.

[Ndugu]

Ah, thank you!

If I add an image from in the panel into the textarea, I can type the class right in there, just behind the image tag! Thats cool.

But, Kirby wraps an image into a figure tag and adds the class to that. So my rounded corners didn’t work.

So then, I obviously have to choose „imgclass“ and type that in. And this works!

[texnixe]

If you don’t want the figure tag, you can remove it in your config.php: https://getkirby.com/docs/cheatsheet/options/kirbytext-image-figure

[Svnt]

The figure tag should not stop you from styling the images:

<style>
.img--round img {
  border-radius: 50%;
}
.img--shadow img {
  -webkit-box-shadow: 0px 0px 48px 10px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 48px 10px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 48px 10px rgba(0,0,0,0.75);
}
</style>

<figure class="img--round">
<img src="http://www.fillmurray.com/300/300">
</figure>
<figure class="img--shadow">
<img src="http://www.fillmurray.com/300/300">
</figure>

[Ndugu]

No problem, I just use “imgclass:some_style” and its fine.

[Ndugu]

Unfortunately every Jeck is different. Therefor I would like to be able to add classes from my CSS to cover images on my blog. It really depends on the content of the images and the kind of image, if it needs to be styled a little bit different. Some images need to be big, others be better small, some should have a slight shadow (in my opinion) others rounded corners and so on.

How can I do that?

What I tried so far:

I added fields to the YML file of my article template. They show up in the panel and I can select images.

I made snippets for every image style I need and added them into my article template.

I tried to change the php of the snippet for coverimage from"if… isNotEmpty to "if…isEmpty"like this:

<?php if($item->coverimage()->isNotEmpty()): ?>
  <figure class="image-box">
    <img class="image-frontpage" src="<?= $item->coverimage()->toFile()->url() ?>" alt="Ein Bild" />
  </figure>
<?php endif ?>

to

<?php if($item->coverimage()->isEmpty()): ?>
  <figure class="image-box">
    <img class="cover-image-small" src="<?= $item->coverimage()->toFile()->url() ?>" alt="Ein kleines Coverbild" />
  </figure>
<?php endif ?>

But that idea wasn’t smart enough.

I tried to add a field to my fields folder to be able to select that other type of image, but that gave me an error:

The field class is missing for: cover-image-smallfield

/Users/Ndugu/Sites/Bartelhuden-Blog/panel/app/src/panel/form/plugins.php
  }
 
  public function load() {
 
    $fields  = kirby()->get('field');
    $classes = [];
 
    foreach($fields as $name => $field) {
      $classes[$field->class()] = $field->file();
    }
 
    // start the autoloader
    load($classes);
 
    foreach($fields as $name => $field) {
 
      $classname = $field->class();
 
      if(!class_exists($classname)) {
        throw new Exception('The field class is missing for: ' . $classname);
      }
 
      if(method_exists($classname, 'setup')) {
        call(array($classname, 'setup'));
      }
 
    }
 
  }
 
  public function assets($type) {
 
    $output      = [];
    $defaultRoot = panel()->roots()->fields();
 
    foreach(kirby()->get('field') as $name => $field) {
 
      $root = $field->root();
      $base = dirname($root);
 

```
What is the way to go?

[texnixe]

I’d add the classes as image meta data. If one and the same image can have different classes, you can add different file fields per function in the page.

https://getkirby.com/docs/panel/blueprints/file-settings#file-fields
https://getkirby.com/docs/cookbook/handling-images-in-kirby#adding-meta-data-to-images
https://getkirby.com/docs/cookbook/handling-images-in-kirby#using-and-accessing-image-meta-data

But if you select the image via the image field, you might as well just add the class for the image in the template. I don’t quite see the purpose of the custom field?

[Ndugu]

Yes!

I added this to the blueprint for the article page:

…
files:
  fields:
    classname:
      label: Classname
      type: text
…   

Important details are the cute 3 dots. They seem tell the field to got to the file edit area. Otherwise it more or less breaks the whole panel.

Since I use a snippet for the cover image, I put this to the code to the class declaration for the image in the snippet, not the template:

class="<?= $item->coverimage()->toFile()->classname() ?>"   

Its so simple (after bumping the head against it for a few hours).

So, the whole snippet is:

<?php if($item->coverimage()->isNotEmpty()): ?>
  <figure class="image-box">
    <img src="<?= $item->coverimage()->toFile()->url() ?>" class="<?= $item->coverimage()->toFile()->classname() ?>"   alt="Ein Bild" />
  </figure>
<?php endif ?>

Thank you so much, @texnixe for your guidance.

[texnixe]

@Ndugu

Otherwise it more or less breaks the whole panel.

If it works now, I assume you have simply removed the lil’dotties because they are of course not meant to be in the blueprint

There’s a little problem with your snippet. You check if the field is not empty. But that does not really help. Why? Well, you might have selected an image once when it existed and saved the filename to file, but later the file itself was deleted for some reason. That leaves you with a filename but no file. Fatal error, site breaks.

<?php if($image = $item->coverimage()->toFile()): ?>
  <figure class="image-box">
    <img src="<?= $image->url() ?>" class="<?= $image->classname() ?>"   alt="Ein Bild" />
  </figure>
<?php endif ?>

I have removed the first check, because it is not really needed anymore, once the new check is in place. If the field is empty, $image will be false. Checking if the field is empty would make sense if you wanted to use a replacement image in case there is no selected image, for example.

[Ndugu]

@texnixe

If it works now, I assume you have simply removed the lil’dotties because they are of course not meant to be in the blueprint

No, I kept them there… . Really, I thought they did something, because some of my fields in the panel would vanish, if… . But that was probably some weird indentation issue. (Note to self: learn about YML, sigh)

@texnixe

There’s a little problem with your snippet.

Aha, but that was based on the original code from the starter kit.

@texnixe

Fatal error, site breaks.

So, the whole site breaks, if an image is missing for some reason?

[texnixe]

The dots are just there to indicate that there should be something before and probably after those lines in the blueprint, so they are not part of the code. So, away with them!

If an image object is missing and you try to call a method like url() on that object, you get an error, yes. Therefore it is very, very, very … important to always check if an object exists before you try to do anything with it. This is a general rules and applies to all sorts of objects and their methods.

Test for yourself. Remove an image, remove the check, and see what you get (with debugging on). Always best to see errors in action. It does not break the whole site, just the page where the error occurs, but that is bad enough.

Edit:

@Ndugu

Aha, but that was based on the original code from the starter kit.

Then the Starterkit should be ashamed of itself An we fallible developers should correct is as soon as possible.

Edit 2: Now the Starterkit can come out of its cocoon of shame again.

[Ndugu]

@texnixe

Test if for yourself. Remove an image, remove the check, and see what you get (with debugging on).

I did! Thankfully I had an “old” copy of the starterkit snippet of shame. Cryptic error message. Image and snippet of glory back in and voilà.

Also, I must admit, that I would never have thought that pointing a class to that cover image would be related to “meta data”. Maybe it would be a good idea to add that to the cookbook? Or is it just me being stupid? Maybe.

[texnixe]

@Ndugu

Image and snippet of glory back in and voilà.

The more interesting approach would have been to keep the image removed and put the snippet of glory in .

@Ndugu

Also, I must admit, that I would never have thought that pointing a class to that cover image would be related to “meta data”.

Well, meta data are great for anything and everything. But maybe I’ll add that to the next release of the recipe if it is not as obvious as you might think after having spent too much time with it.

@Ndugu

Or is it just me being stupid?

Aren’t we all, considering how little we know?

[Ndugu]

@texnixe

keep the image removed and put the snippet of glory in

I did! No image, no error, but a working page.[quote=“texnixe, post:14, topic:6767”]
if it is not as obvious as you might think after having spent too much time with it.
[/quote]