# "Art directed" images? **URL:** \ **Category:** Questions\ **Tags:** v2\ **Created:** [February 27, 2017, 2:11am UTC](https://forum.getkirby.com/t/art-directed-images/6767 "2017-02-27T02:11:05Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![Ndugu](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@Ndugu](https://forum.getkirby.com/u/Ndugu)\ **Post date:** [February 27, 2017, 2:11am UTC](https://forum.getkirby.com/t/art-directed-images/6767/1 "2017-02-27T02:11:05Z")
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. ---
**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\ **Post date:** [February 27, 2017, 8:30am UTC](https://forum.getkirby.com/t/art-directed-images/6767/2 "2017-02-27T08:30:25Z")
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: ```auto (image: someimage.jpg) ``` To style this image differently, you can add a class to this tag: ```auto (image: someimage.jpg class: shadow) ``` If you use an [image field](https://getkirby.com/docs/cheatsheet/panel-fields/image) in the panel, you would add the class when fetching that image in your template. There’s also a [new cookbook recipe](https://getkirby.com/docs/cookbook/handling-images-in-kirby) about handling images. ---
**Author:** ![Ndugu](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@Ndugu](https://forum.getkirby.com/u/Ndugu)\ **Post date:** [February 27, 2017, 7:28pm UTC](https://forum.getkirby.com/t/art-directed-images/6767/3 "2017-02-27T19:28:48Z")
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! ---
**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\ **Post date:** [February 27, 2017, 7:32pm UTC](https://forum.getkirby.com/t/art-directed-images/6767/4 "2017-02-27T19:32:10Z")
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](https://getkirby.com/docs/cheatsheet/options/kirbytext-image-figure) ---
**Author:** ![Svnt](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/svnt/32/620_2.png) [@Svnt](https://forum.getkirby.com/u/Svnt)\ **Post date:** [February 28, 2017, 12:57pm UTC](https://forum.getkirby.com/t/art-directed-images/6767/5 "2017-02-28T12:57:08Z")
The figure tag should not stop you from styling the images: ```
``` ---
**Author:** ![Ndugu](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@Ndugu](https://forum.getkirby.com/u/Ndugu)\ **Post date:** [February 28, 2017, 1:10pm UTC](https://forum.getkirby.com/t/art-directed-images/6767/6 "2017-02-28T13:10:32Z")
No problem, I just use “imgclass:some\_style” and its fine. ---
**Author:** ![Ndugu](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@Ndugu](https://forum.getkirby.com/u/Ndugu)\ **Post date:** [March 8, 2017, 4:59pm UTC](https://forum.getkirby.com/t/art-directed-images/6767/7 "2017-03-08T16:59:52Z")
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: ```auto coverimage()->isNotEmpty()): ?>
Ein Bild
``` to ```auto coverimage()->isEmpty()): ?>
Ein kleines Coverbild
``` 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 ````auto /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? ```` ---
**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\ **Post date:** [March 8, 2017, 10:21pm UTC](https://forum.getkirby.com/t/art-directed-images/6767/8 "2017-03-08T22:21:01Z")
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/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#adding-meta-data-to-images) [https://getkirby.com/docs/cookbook/handling-images-in-kirby#using-and-accessing-image-meta-data](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? ---
**Author:** ![Ndugu](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@Ndugu](https://forum.getkirby.com/u/Ndugu)\ **Post date:** [March 9, 2017, 12:32am UTC](https://forum.getkirby.com/t/art-directed-images/6767/9 "2017-03-09T00:32:13Z")
Yes! I added this to the blueprint for the article page: ```auto … 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: ```auto class="coverimage()->toFile()->classname() ?>" ``` Its so simple (after bumping the head against it for a few hours). So, the whole snippet is: ```auto coverimage()->isNotEmpty()): ?>
Ein Bild
``` Thank you so much, @texnixe for your guidance. ---
**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\ **Post date:** [March 9, 2017, 6:35am UTC](https://forum.getkirby.com/t/art-directed-images/6767/10 "2017-03-09T06:35:18Z")
> [@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. ```auto coverimage()->toFile()): ?>
Ein Bild
``` 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. ---
**Author:** ![Ndugu](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@Ndugu](https://forum.getkirby.com/u/Ndugu)\ **Post date:** [March 9, 2017, 3:43pm UTC](https://forum.getkirby.com/t/art-directed-images/6767/11 "2017-03-09T15:43:10Z")
> [@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? ---
**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\ **Post date:** [March 9, 2017, 3:55pm UTC](https://forum.getkirby.com/t/art-directed-images/6767/12 "2017-03-09T15:55:53Z")
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. ---
**Author:** ![Ndugu](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@Ndugu](https://forum.getkirby.com/u/Ndugu)\ **Post date:** [March 10, 2017, 3:52am UTC](https://forum.getkirby.com/t/art-directed-images/6767/13 "2017-03-10T03:52:55Z")
> [@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. ---
**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\ **Post date:** [March 10, 2017, 11:24am UTC](https://forum.getkirby.com/t/art-directed-images/6767/14 "2017-03-10T11:24:44Z")
> [@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? ---
**Author:** ![Ndugu](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@Ndugu](https://forum.getkirby.com/u/Ndugu)\ **Post date:** [March 10, 2017, 2:44pm UTC](https://forum.getkirby.com/t/art-directed-images/6767/15 "2017-03-10T14:44:06Z")
> [@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] 🙂 ---
**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\ **Post date:** [February 6, 2025, 4:50pm UTC](https://forum.getkirby.com/t/art-directed-images/6767/16 "2025-02-06T16:50:31Z")