Adding a class by default to all images (that were added via image tag in panel)

Kirby 2 Questions 🤔
1

I thought this post would answer my question, but it didn’t quite:

What I need is to automatically add a class to all images that are added to content via the default kirbytag’s
“(image: …)” method.

The closest I have been able to do is to copy the default tag.php (to make a copy that lives in my site/tags folder, that can override the core one) and add a “fallback” class as described in the “How to create custom Kirbytag” documentation.

This means that the class I want automatically added is applied by default, which is great… However, I would like to preserve the ability to add a custom class via the image tag in panel: (image: xxx.jpg class: customclass). Currently, with the fallback method I am using, this means the customclass added in the panel will completely replace the default tag I want all content images to have. So all core CSS properties I have assigned to the default class will not be assigned to images with a customclass.

I simply want the customclass (if added via panel) to override or add certain CSS properties of the default class; not to replace the default class entirely!

Here is what I have done in my copy of tag.php:

in the //image builder section (commented section name existed in the original tag.php), I have replaced this line of code:

'class'  => $class,

with this line of code:

'class'  => $tag->attr('class', 'contentimage'),

(“contentimage” is the name of the class I want applied automatically to all the images added via the image tag in panel).

I have experimented with using

$image->addClass($tag->attr('contentimage'));

and/or

$_image->addClass($tag->attr('contentimage'));

but can’t figure out where to fit it into the existing code without throwing breaking errors.

If anyone knows how to do what I need, that would be awesome! Thanks! :sunglasses:

2

This should work:

// lines 144-156 in the original tags file (no other changes)
if(kirby()->option('kirbytext.image.figure') or !empty($caption)) {
      $figureClass = $tag->attr('class');
      if(empty($figureClass)) {
        $figureClass = 'contentimage';
      } else {
        $figureClass = 'contentimage' . ' ' . $figureClass;
      }
      $image  = $_link($_image($tag->attr('imgclass')));
      $figure = new Brick('figure');
      $figure->addClass($figureClass);
      $figure->append($image);
      if(!empty($caption)) {
        $figure->append('<figcaption>' . html($caption) . '</figcaption>');
      }
      return $figure;
    } else {
      $class = trim($figureClass . ' ' . $tag->attr('imgclass'));
      return $_link($_image($class));
    }
3

Thanks for the quick reply! :grin: I got that to run, but, two things:

1.) I realize it is applying the custom class to both the <figure> tag and the <img> tag. I need it to be on just the <image> tag. When it is on both it can create an unwanted cumulative effect: e.g. if max-width:50%; property is applied to the customclass (and is then programmatically applied to the image’s<figure> and <img> elements) it results in the image’s max-width being reduced twice, so it is more like 25%.

2.) I should have mentioned this earlier, but I had already made other important modifications to the //image builder section, so that it would pick up captions and alt text applied via metadata in text files (https://getkirby.com/docs/content/media). I also wanted it to be able to pick up captions added inline via the kirbytag in the panel (but only as a backup if no metadata caption, not override any metadata caption). And I was using a style which I only wanted to appear with actual caption content, not when there was no caption (a horizontal rule to separate caption from body copy below it). All this to say, I need to preserve my //image builder section’s functionality. I cannot figure out how to integrate the code you suggested while preserving the functionality I describe here (I only got the code you gave to run when I replaced my //image builder section with it).

Here is my code I had to accomplish my caption needs (see above paragraph):

// image builder
$_image = function($class) use($tag, $url, $alt, $title) {
  return html::img($url, array(
    'width'  => $tag->attr('width'),
    'height' => $tag->attr('height'),
    //'class'  => $class, //COMMENTED OUT BY LIA, IN FAVOR OF NEXT LINE vvv
    'class'  => $tag->attr('class', 'contentimage'), //ADDED BY LIA If there is not a class supplied inline in the panel (via "class: xxx") then this class I already made, called "contentimage" will be applied, otherwise it will be the supplied class
    'title'  => $title,
    'alt'    => $alt
  ));
};

if(kirby()->option('kirbytext.image.figure') or !empty($metacaption)) {
  $image  = $_link($_image($tag->attr('imgclass')));
  $figure = new Brick('figure');
  // $figure->addClass($tag->attr('class')); //COMMENTED OUT BY LIA, because I don't need the class applied to both the <figure> and <img> elements
  $figure->append($image);

  // ADDED BY LIA Ensures that images without captions will not have the border (horizontal bar)
  if(!$metacaption->empty()) {
    $figure->append('<figcaption>' . $file->caption() . '</figcaption>');
  

  } elseif(($metacaption->empty()) and (!empty($caption))) {
    $figure->append('<figcaption>' . html($caption) . '</figcaption>');
  
  }
  return $figure;

} else {

  $class = trim($tag->attr('class') . ' ' . $tag->attr('imgclass'));
  return $_link($_image($class));
}

}
);

I also defined $metacaption in line 85 in the //image tag section as:
$metacaption = $file->caption(); // <<< ADDED BY LIA! This collects caption from the image file's metadata file!

Do you know what I can do to have all of the following functionality (via the tag.php file)?

  • default class applied to all images added via panel’s kirbytag: to their tag; not to their tag
  • ability to add custom class via panel’s kirbytag to images, and have it override/cascade over (not replace) the default image class
  • have special class for captions, only when there is caption content (provided either via metadata file, or via panel’s kirbytag)
  • have the caption defaultly be provided by the image’s metadata file
  • only if there is no caption in the metadata file, allow any caption provided via the panel’s kirbytag to appear as fallback

Thanks for taking the time to read/look into this! I am just a designer so not quite a PHP master just yet… :wink: I appreciate all help!