Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
9 posts Page 1 of 1
Hi,
When using editable regions like: type = 'image'

Can you in some way read out the width or height attribute when you later on want to use the image?

// T
By design, the image editable saves only link to image. To get more details about the image, please use the <cms:exif > tag, described here with sample: http://docs.couchcms.com/concepts/photo ... #exif-data
The documentation describes some of the limitations of the <cms:exif> tag. Instead, here's a custom tag for easily outputting the width and height of any image.

You can add this snippet of code to kfunctions.php in the couch/addons folder.

Code: Select all
class CustomTags{   
    static function image_size( $params, $node ){
        if( count($node->children) ) {die("ERROR: Tag \"".$node->name."\" is a self closing tag");}
       
        $image = trim( $params[0]['rhs'] );
        $size = getimagesize($image);
        $dimensions = $size[3];
             
        return $dimensions;
        }
    }
$FUNCS->register_tag( 'image_size', array('CustomTags', 'image_size') );

Usage
Code: Select all
<img src="<cms:show my_imagethumb />" <cms:image_size my_imagethumb /> alt="" />

The tag could be modified if you wanted to do something else with the width and height of the image.
:D Thanks, @tim!
I updated this tag to be more flexible on a project of mine. It can be used just like above to insert the width and height into an IMG tag. But now you can also add parameters to return just the width, the height, or the mime type.

For example:
Code: Select all
<!-- Open Graph sharing tags -->
<meta property="og:image" content="<cms:show project_photo />" />
<meta property="og:image:type" content="<cms:image_size project_photo 'mime' />" />
<meta property="og:image:width" content="<cms:image_size project_photo 'width' />" />
<meta property="og:image:height" content="<cms:image_size project_photo 'height' />" />

Or in an image tag:
Code: Select all
<img src="<cms:show project_photo />" <cms:image_size project_photo /> alt="" />

Here's the updated code for the custom tag:
Code: Select all
class CustomTags{        
    static function image_size( $params, $node ){
        if( count($node->children) ) {die("ERROR: Tag \"".$node->name."\" is a self closing tag");}
        $image = trim( $params[0]['rhs'] );
        $size = getimagesize($image);
        if (trim( $params[1]['rhs'] ) == 'width'){return $size[0];}
        else if (trim( $params[1]['rhs'] ) == 'height'){return $size[1];}
        else if (trim( $params[1]['rhs'] ) == 'type' || trim( $params[1]['rhs'] ) == 'mime' || trim( $params[1]['rhs'] ) == 'mime-type'){return $size['mime'];}
        else{return $size[3];}
    }
}
$FUNCS->register_tag( 'image_size', array('CustomTags', 'image_size') );
Thanks @Tim :)
Moving this thread to 'Tips and tricks'.
How might this function be modified to work with images generated with the use of <cms:thumbnail> ?

The site I'm working on uses some very large images for some pages which need to be resized _down_ to 1200px wide, and have varying heights.

I'm using:

<cms:thumbnail main_image width='1200' height='630' />

to generate the OG image but I believe the thumbnail generator used like that will give images of varying dimensions as their aspect ratios differ.

TY!
There should be no modification necessary. When using a <cms:tag> as a variable inside another <cms:tag> use double quotes.
Code: Select all
<!-- Open Graph sharing tags -->
<meta property="og:image" content="<cms:thumbnail main_image width='1200' />" />
<meta property="og:image:type" content="<cms:image_size "<cms:thumbnail main_image width='1200' />" 'mime' />" />
<meta property="og:image:width" content="<cms:image_size "<cms:thumbnail main_image width='1200' />" 'width' />" />
<meta property="og:image:height" content="<cms:image_size "<cms:thumbnail main_image width='1200' />" 'height' />" />

For the proper image sizing, I think you want to use only the width in the thumbnail tag. The height will be calculated to maintain the aspect ratio. If you also specify the height, then the image will be cropped. Or perhaps you want to use the "enforce_max" parameter. Scan the docs to decide the parameters you want to use for your purposes.

https://docs.couchcms.com/tags-referenc ... parameters
Nice one. I didn't know you could nest couch tags like that. How deep can it go!?

Thank you!
9 posts Page 1 of 1