Perch shortcode attributes

A quick note to document one way to use attributes to customize asset shortcodes in Perch.

I made the cardinal in Sketch based on the original by Charley Harper. Explore more Charley Harper art on his website.

Default

Inserting an image into an article results in this html snippet as default.

[cms:asset 245 title="Cardinal"]

returns this html:

[cms:asset 245 title="Cardinal"]

[cms:asset 245 title="Cardinal"]

Add a width attribute

Renames image by adding w400 to file name. I think it should creates an image on the fly to the values set, but not sure if working correctly. It may be my server doesn't have necessary image library or something in the code base. Note: This doesn't apply to SVG, but does work on PNG or JPG images.

[cms:asset 245 title="Cardinal" width="400"]

returns this html:

[cms:asset 245 title="Cardinal" width="400"]

[cms:asset 245 title="Cardinal" width="400"]

Add a height attribute

[cms:asset 245 title="Cardinal" height="700"]

returns this html:

[cms:asset 245 title="Cardinal" height="700"]

[cms:asset 245 title="Cardinal" height="700"]

Add both a width and height attribute

[cms:asset 245 title="Cardinal" width="300" height="700"]

returns this html:

[cms:asset 245 title="Cardinal" width="300" height="700"]

[cms:asset 245 title="Cardinal" width="300" height="700"]

Add a class attribute

Note: This works with SVG files so designers can write CSS to either target the 'class' or 'title' selectors.

[cms:asset 245 title="Cardinal" class="cardinal"]

returned this html:

[cms:asset 245 title="Cardinal" class="cardinal"]

[cms:asset 245 title="Cardinal" class="cardinal"]


← Previous My Mom’s Matzo Ball Soup Perch CMS shortcode experiments Next →