Responsive Images

Plugins
1

Responsive images are a way to improve the speed your website takes to load higher resolution images. It allows the browser to decide what images the device is capable of displaying and only loads those. That way you can upload beautiful 3000 pixel wide photographs to your site and people with a 480 pixel wide mobile device display will still be able to browse your site quickly.

This plugins is a drop-in implementation of the srcset attribute. After you installed the plugin, there are no options needed. It will just work with your existing kirby tags and add automatically generated smaller sizes to your images.

Download

More information can be found in the projects README file on Github.

6 Likes
2

Is there a way to use it also in a template for example if I’ve featured images?

3

You can use the kirbytag function:

<?php echo kirbytag(array('image' => 'workflow@3x.jpg', 'link' => 'workflow@3x.jpg', 'width' => 1244)); ?>

Alternatively you could use kirby_get_srcset or kirby_get_sizes to just get the attribute values. Both require a file object as first argument.

4

@Designscheu asked me about this on Twitter yesterday.

Your code only works if the page you want to get the images from is the current page. If you want to use the Kirbytag in a foreach loop for example, you can use something like this.

1 Like
5

I use the kirbytag function in a foreach loop.
Images are shown correctly (kirbytag works), but without srcset.
Do you know what could went wrong?

1 Like
6

Please post the code that you are using on your site.

7 
$cover = $referenz->image('cover.jpg');
      if($cover){
echo kirbytag(array('image' => $cover->url(), 'alt' => $referenz->title()->html(), 'link' => $referenz->url())); }

Output is a normal img tag without srcset

8

Ah, looks like I misunderstood how kirbytag works. It seems as if it doesn’t use the default attributes set via kirbytext::$tags['image']. Not sure though.

For now the only workaround I can offer is manually setting the attributes like so:

echo kirbytag(array(
   'image'  => $cover->url(), 
   'srcset' => kirby_get_srcset( $cover ),
   'sizes'  => kirby_get_sizes( $cover ), 
   'alt'    => $referenz->title()->html(), 
   'link'   => $referenz->url())); }
2 Likes
9

That works perfectly fine, thanks Jan! :slight_smile:

1 Like
10

Found another “Bug”:

You miss to get the caption from the file object:

    if(empty($cpation) and $file->caption() != '') {
        $caption = $file->caption();
      }
11

What’s the line number of that code? Can’t remember writing something like that :astonished:

12

That’s what I added to fix it. :wink: Line 48 ff.

13

According to my investigation $file has no method caption() :confused:

14

$file does not have that method, but it is an attribute of the image tag.

15

I’m using it here:

and here

16

Yeah you’re right. Although it has, if it is defined in the Blueprint - so somehow it should transport these fields if it is meant to replace the image tag.

Well, the original Tag doesn’t do that either, so I guess I need to stick to my workaround.

17

Dude thank you! I’ll definitely be giving this a try in the next couple of days it’ll look great :slight_smile:

18

Just wanted to let you all you know that I just released version 1.1 that includes two features that were requested by users. It let’s you link to a specific size like so

(image:workflow@3x.jpg link:small width:1244)

And you can control what is used for the src attribute by setting a default size

c::set('responsiveimages.defaultsource', 'small');

2 Likes
19

Hi @jancbeck,
I’m using this plugin but I got this error:

Fatal error: Can’t use method return value in write context in /home8/laprinci/public_html/landscapestories/site/plugins/responsive-images.php on line 90

the line 90 is the one that begin with $classes=

// sizes builder
if($file && empty($sizes)) {
    $classes = ( ! empty( $tag->attr('imgclass'))) ? explode( ' ', $tag->attr('imgclass')) : '';
	$sizes = kirby_get_sizes($file, $tag->attr('width'), $classes);
	}

Do you have any suggestions on how to fix it?

Thanks,
Fabio

20

It requires as least PHP 5.5