K3 images, best practices, cover, background-image, captions, etc

Kirby 3 Solved ✅
,
1

I am using the panel to edit content and add images in the panel for each article.

However, with the common practice of using images in the background of DIVs by using background-image combined with background-sizing of cover, I stopped rendering images straight into templates, but rather inserted them into the background of the link block or div.

<div class="article-pic" style="background-image: url('<?= $page->file()->url() ?>');"></div>

Unfortunately, this removes the automagic of using figures and captions in the markup, as well as using all of the auto-generated image sizing features as well (as I understand it).

In your projects, what is the strategy or tricks you use to get captions that are added in the panel, into your page?

2

Are you doing this for all images in general, no matter the purpose of the image?

3

No, no. Just on major links to articles or the main image within an article.

4

I don’t think using background images makes sense of you want to add captions to an image and make it accessible with useful alt text. There are ways to lazyload and srcset background images via JavaScript.

1 Like
5

If you are using background image just for cover and don’t have to support IE11, take a look at object-fit: cover for images. It’s basically the same + all the benefits of classic html image tags.

3 Likes
6

Excellent. Ignore the web for a year and there are more best practices. Praise ye, web gods!
Thanks, @Thomasorus!
Integrating!

1 Like
7

Applying object-fit and I’m very happy with it. Also, I’ve realized that if people use images within their kirbytext that all works well, it is only with the template version that requires me to add in all the figcaption insertion code. Thanks again, @Thomasorus and @texnixe!

So I’ve altered my method of inserting images into templates to the following (this just grabs the first alphabetical image in the article Files field using the Blueprint preset of Pages):

<?php if ($page->hasImages()) : ?>
<figure>
	<img class="article-pic" src="<?= $page->image()->url() ?>" alt="<?= $page->image()->alt() ?>">
	<?php if ($page->image()->caption()->isNotEmpty()) : ?>
		<figcaption><?= $page->image()->caption() ?></figcaption>
	<?php endif ?>
</figure>
<?php endif ?>
8

For my taste, that piece of code has too many $page->image()->xxx(), I’d shorten it like this:

<?php if ($image = $page->image()) : ?>
<figure>
	<img class="article-pic" src="<?= $image->url() ?>" alt="<?= $image->alt() ?>">
	<?php if ($image->caption()->isNotEmpty()) : ?>
		<figcaption><?= $image->caption() ?></figcaption>
	<?php endif ?>
</figure>
<?php endif ?>
3 Likes
9

When converting templates into Kirby, is there anything we should be doing with the srcset attribute, or is that all handled already? I was under the impression K3 handles that but I want to be sure.

Nevermind, I found it:


:wink:

10

i most likely get used to using the same fields over and over again, e.g.

  • cover (image)
  • alt (text)
  • caption (text)

i like using lazysizes, there we can lazyload images, srcsets, bg images, even js/css and whatsoever.

2 Likes