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:
with rounded corners
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.
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:
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.
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.
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)
Aha, but that was based on the original code from the starter kit.
So, the whole site breaks, if an image is missing for some reason?
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.
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.
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.