Responsive Images

Plugins
21

Hi there,

First things first, I love this plugin, thank you very much!

Using the official RSS feed plugin, pictures are provided at the highest resolution. Is there a way to include a smaller resolution instead?

22

Hi all!

I donā€™t really feel comfortable introducing myself with a dummy question like that. I started learning Kirby some days ago, my understanding of PHP is very limited.

Iā€™m trying to make the ā€˜Responsive Images Pluginā€™ work. Slowly I if feel like walking in circles. So I was hoping you could give me a hint on what Iā€™m doing wrong.

Installation: I put the plugin-file in the /site/plugins folder and added to site/config/config.php the following lines:

c::set('thumbs.driver', 'im');
c::set('thumbs.driver', 'gd');

From what I understand, after installation, the plugin is supposed to create images as defined in responsive-images.php (lines 161-163) and put those created images to /thumbs/xy.

Those images are not created in my case (after making a new page and uploading a pic). So my best guess is that I made a mistake in the process of the installation. Can you confirm this?!

Since my plan is to use the plugin in a template, I tried the code snippets provided in this thread. But there is a good chance that I messed up with the syntax in which the snippets are embedded. (ā€¦ in case the mistake isnā€™t at the installation process).

Do you have any hint to make this work? Or could someone copy a full example code of how to use the plugin? I tried the example from the readme on github (image:workflow@3x.jpg link:workflow@3x.jpg width:1244) but I think I failed to put it into the right syntax or context.

There is a good chance that I messed up with something that is very common sense for people who are used to work with PHP and Kirby. If there is kind of documentation for dummies, it would be helpful as well.

Thanks and have a nice day
Wenz

23

The plugin works out of the box. Things to check

  • if you downloaded the repo, have you changed the name of the plugin folder to responsive-images? The folder name and the name of the main plugin file must be identical.
  • the default thumbs driver is gd, no need to set that is your config. If you set two thumb drivers like above, the latter overwrites the first.
  • I donā€™t know why the Image Magick driver is required, it seems to work without.
  • I understand the thumbs are not created, but is the srcset attribute added to the image tag (if you use the image tag syntax in a textarea field?
24

thanks for quick reply!

Yes, the three thumbs (small, medium, large) are not created and no, only the src attribute including the link to the image (in content folder) is made.

Thatā€™s the output I see in the browser.
picture>
img src="http://ā€¦ " alt >
/picture>

ā€¦ and thatā€™s how I put it in the template file

picture>

<?= $page->image()->html() ?>

/picture>

If I got it right, the plugin takes care of the rest and there is no need to point to the /thumbs folders or to use $thumb(). Or am I wrong?!

25

No, this will create a standard Kirby image tag. To use the plugin, there are two ways:

  • in a textarea field (for example, text), add

    (image: someimage.jpg)

    And render in your template using the Kirbytext method:

    <?= $page->text()->kirbytext() ?>

  • If you want to use the plugin only in your template, you have to use the Kirbytag helper, as explained above:

    if($image = $page->image('someimage.jpg')) {
  echo kirbytag([
     'image'  => $image->url(), 
     'srcset' => kirby_get_srcset( $image ),
     'sizes'  => kirby_get_sizes( $image ), 
     'alt'    => 'whatever', 
     'link'   => 'whatever'
  ]);
}

There is an alternative plugin, that is supposed to work in templates without the kirbytag detour (if you donā€™t need the Kirbytag): https://github.com/azharc/kirby-srcset/blob/master/srcset.php

26

Hey, thanks again!

The idea was to use the plugin for the whole site, not only in the template.

just to make sure, I understood everything right:

  • copy the plugin file to site/plugin/responsive-images/responsive-images.php (folder and file must have identical names)

  • no changes needed in the config file (drivers)

  • adding (in the blueprint file of the template) a textarea field with a specific name. I did like this:

text123:
textarea: (image: someimage.jpg)

  • triggering the plugin in the template file like this:
<?= $page->text123()->kirbytext() ?>

.

  • then using the ā€˜Kirbytag helperā€™. (I didnā€™t find anything above on how to use it, also neither in the forum search or via Google. I tried to copy the code in the pluginsā€™s php and the templateā€™s php file, no results).

I tried to use the other plugin you mentioned. Did a folder in site/plugins and made a php file in this folder with the plugins code. Since this didnā€™t work as well, I assume Iā€™m doing a very elementary mistake (which is probably too much common sense for you to think of).

Anyway, thanks again for trying to help, was highly appreciated. Iā€™m going to make myself more familiar with the concepts of this framework and try again later or learn some php and do a own snippet for responsive images.

Best, Wenz

27

No, Kirbytags are used inside of content files (e.g. article.txt). You only create fields in a blueprint (article.yml). You never enter content in a blueprint.

So the kirbytag (image: someimage.jpg) would be added via the panel in the form field you created in your blueprint.

Letā€™s try this in a Starterkit.

Install the plugin in /site/plugins. The folder structure should look like this:

50

In the text field, after the Lorem Epsom text enter:

Lorem ipsum...
(image: closeup.jpg)

After saving, click on Preview to open the page and inspect your source code. Since the text field is rendered using the kirbytext method in the project.php template, your image should now have the srcset attribute.

This is one way of doing it.

The Kirbytag helper is a method that helps you to render kirbytags without adding anything in a content file.

Now letā€™s try that as well.

In the same starterKit, open the project.php template. In the template, after line 11 (i.e. after the header tag), add the following code:

<?php

if($image = $page->image('someimage.jpg')) {
  echo kirbytag([
     'image'  => $image->url(), 
     'srcset' => kirby_get_srcset( $image ),
     'sizes'  => kirby_get_sizes( $image ), 
     'alt'    => 'whatever', 
     'link'   => 'whatever'
  ]);
}

(Sorry, my code from above had a missing closing parenthesis)

Save and view the Project A page in the browser.

28

OMG. It works! The trigger (= kirby tag) is written directly into the content/text (=textarea). Or the kirby tag is added there automatically in order to trigger the plugin.
Thanks again for your patience!

Edit: Just a footnoteā€¦ ImageMagick is needed in my case. Without it, the srcset attribute is shown in the browser but for three files with the same size and pointing to the content folder. As soon as ImageMagick is included, the three thumbs are created and the srcset points to them in /thumbs/xy