How to output responsive images?
Permalink
I'm trying to figure out how to output different image sizes by using the built-in concrete5 function for a responsive image map.
I've followed the instructions on this page:https://documentation.concrete5.org/developers/designing-for-concret...
I just copied the page_theme public function as described in the documentation and replaced the thumbnail handles with my own handles.
However I can't get it to work on my site. It's not doing anything to my images.
I've tried with the Core Image block as well as the content block.
I attached my page_theme.php
Could anybody help me understand what I need to change to make it work?
Thank you!
I've followed the instructions on this page:https://documentation.concrete5.org/developers/designing-for-concret...
I just copied the page_theme public function as described in the documentation and replaced the thumbnail handles with my own handles.
However I can't get it to work on my site. It's not doing anything to my images.
I've tried with the Core Image block as well as the content block.
I attached my page_theme.php
Could anybody help me understand what I need to change to make it work?
Thank you!
hi linuxoid,
thanks for your quick reply.
Although I don't think this is what I'm looking for.
I'm trying to output a html picture element with the help of the concrete5 function: getThemeResponsiveImageMap() which I added in my theme's page_theme.php as suggested in the documentation I linked above.
When specified I believe it's supposed to automatically output a html picture tag for the core image block and the images used in the content block with the scrset options based on the breakpoints I specify in the page_theme.php
The output should look like this:
It works fine in the Elemental theme by default, but I would like to know what I need to do, to use it in my custom theme.
thanks for your quick reply.
Although I don't think this is what I'm looking for.
I'm trying to output a html picture element with the help of the concrete5 function: getThemeResponsiveImageMap() which I added in my theme's page_theme.php as suggested in the documentation I linked above.
When specified I believe it's supposed to automatically output a html picture tag for the core image block and the images used in the content block with the scrset options based on the breakpoints I specify in the page_theme.php
The output should look like this:
<picture><!--[if IE 9]><video style='display: none;'><![endif]--><source srcset="/application/files/thumbnails/large/1234/1234/5678/plants.jpg" media="(min-width: 900px)"><source srcset="/application/files/thumbnails/medium/1234/1234/5678/plants.jpg" media="(min-width: 768px)"><source srcset="/application/files/thumbnails/small/1234/1234/5678/plants.jpg"><!--[if IE 9]></video><![endif]--><img src="/application/files/thumbnails/small/1234/1234/5678/plants.jpg" alt="" class="ccm-image-block img-responsive bID-176"></picture>
It works fine in the Elemental theme by default, but I would like to know what I need to do, to use it in my custom theme.
Very simply, if you look in the image core block or the image slider core block you will see it done.
With $f being your image object, you do this
Doing it like that will automatically use your theme's getThemeResponsiveImageMap() function to decide whether to use a normal image tag or a picture tag instead. The picture tag will take into account the different sizes.
You could also force the use of the picture tag without relying o your theme's information by adding the second parameter to true like this
If you want to look at the code generating the tag it's here: concrete\src\Html\Image.php
With $f being your image object, you do this
$image = $app->make('html/image', [$f]); $tag = $image->getTag(); echo $tag;
Doing it like that will automatically use your theme's getThemeResponsiveImageMap() function to decide whether to use a normal image tag or a picture tag instead. The picture tag will take into account the different sizes.
You could also force the use of the picture tag without relying o your theme's information by adding the second parameter to true like this
$image = $app->make('html/image', [$f, true]); $tag = $image->getTag(); echo $tag;
If you want to look at the code generating the tag it's here: concrete\src\Html\Image.php
Very helpful. I didn't know you can force the picture tag. Thank you for that information!
However I'm still confused about something:
I was under the impression that the core image blocks would automatically output the picture tag as soon as I put the getThemeResponsiveImageMap() function in my page_theme.php.
Somehow this is not the case with my website.
How do I tell my theme to use the picture tag in the core blocks as well?
I have the feeling concrete5 is not using my page_theme.php or there is something wrong with it? Is there any way I can verify this?
I hope my question makes sense. I might be wrong I'm just trying to understand how it works (:
Thank you for all your help!!
However I'm still confused about something:
I was under the impression that the core image blocks would automatically output the picture tag as soon as I put the getThemeResponsiveImageMap() function in my page_theme.php.
Somehow this is not the case with my website.
How do I tell my theme to use the picture tag in the core blocks as well?
I have the feeling concrete5 is not using my page_theme.php or there is something wrong with it? Is there any way I can verify this?
I hope my question makes sense. I might be wrong I'm just trying to understand how it works (:
Thank you for all your help!!
well yes and no.
If you set a maximum height or a maximum width in the Image block it will just output a normal image tag. Without any max height or width, it will use your theme's information.
The good news is that it's all happening in the view.php so you could create a template that uses the proper stuff even with a max width or height.
If you set a maximum height or a maximum width in the Image block it will just output a normal image tag. Without any max height or width, it will use your theme's information.
The good news is that it's all happening in the view.php so you could create a template that uses the proper stuff even with a max width or height.
Oh I forgot something Of course if the thumbnail types listed in your theme do not exist, it will also not work and will revert to a normal image tag
Thank you linuxoid and mnakalay for all your help! It was very helpful but my problem was something else.
I finally figured out what to do. I had to deactivate the theme and reinstall it to make concrete5 aware of my page_theme.php. Before concrete5 wasn't using my page_theme.php at all because I didn't have the page_theme.php in my theme initially. I just added it later in order to use this feature.
Therefore putting the getThemeResponsiveImageMap() into the file didn't make any difference.
Same problem as here:
https://www.concrete5.org/community/forums/customizing_c5/page_theme...
Thank you Continuity13 for posting your solution.
I finally figured out what to do. I had to deactivate the theme and reinstall it to make concrete5 aware of my page_theme.php. Before concrete5 wasn't using my page_theme.php at all because I didn't have the page_theme.php in my theme initially. I just added it later in order to use this feature.
Therefore putting the getThemeResponsiveImageMap() into the file didn't make any difference.
Same problem as here:
https://www.concrete5.org/community/forums/customizing_c5/page_theme...
Thank you Continuity13 for posting your solution.
view: