Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
6 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'.
6 posts Page 1 of 1

Who is online

In total there are 6 users online :: 0 registered, 0 hidden and 6 guests
(based on users active over the past 5 minutes)

Users browsing this forum: No registered users and 6 guests