Forums

Responsive Page Attribute Image

Permalink
Hi, I have searched but not found an answer.

I have created a page Image/File attribute which is uses an image. Is there a way to output the image using the responsive thumbnails?

I have successfully coded in the output of the attribute directly in a theme Page Type.


<?php
$img = $c->getAttribute(‘attributename’);
if($img) {?>
<img src="<?php echo ($img->getVersion()->getRelativePath());?>">
<?php }
?>



However, currently it only outputs as one image size and doesn’t use the scaleable thumbnails available .


Is it possible to make the image attribute use the responsive thumbnails?
studio108
 
mnakalay replied on at Permalink Reply
mnakalay
Hello,

you need to map screen widths to thumbnail types in your theme page_theme file. Then using Concrete5 core function you can automatically output the appropriate responsive picture tag.

it's all explained here:https://documentation.concrete5.org/developers/designing-for-concret...

Hope this helps
studio108 replied on at Permalink Reply
studio108
Hi,
thank you for your reply. I have read this before but hadn't associated this to the file/image page attribute. I found responsive thumbnails work OK for the image block and content block. I will re-read it again to see if makes things any clearer.

Regards
Luke
mnakalay replied on at Permalink Best Answer Reply
mnakalay
Yes but in your code, you are already grabbing the image object.

On that page, it says to do this:
// $file, our file object.
$image = \Core::make('html/image', array($file));
$tag = $image->getTag();

And the variable $file is the file (or image) object.

In your code, you did
$img = $c->getAttribute('attributename');

so your $img is also an image object.

So if I'm not mistaken, if you do:
// $file, our file object.
$file = $c->getAttribute('attributename');
$image = \Core::make('html/image', array($file));
$tag = $image->getTag();

it should do what you want.

Just remember that if you didn't do the mapping in your page_theme file, it will simply output a normal img tag.

Hope this helps
studio108 replied on at Permalink Reply
studio108
Thank you again for your reply. I have got it working by using the following:
<?php 
$img = $c->getAttribute('attribute_name');
if ($img) {
    $tag = Core::make('html/image', array($img))->getTag();
echo $tag;
}
?>


Thanks again for your great support.