Perch Shortcodes attributes

This is quick note to document how the use of 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:

<img title="Cardinal" src="/perch/resources/images/cardinal-charley-harper.png" alt="Cardinal by Charles Harper">

Cardinal by Charles Harper

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:

<img title="Cardinal" src="/perch/resources/images/cardinal-charley-harper-w400.png" alt="Cardinal by Charles Harper">

Cardinal by Charles Harper

Add a height attribute

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

returns this html:

<img title="Cardinal" src="/perch/resources/images/cardinal-charley-harper-h700.png" alt="Cardinal by Charles Harper">

Cardinal by Charles Harper

Add both a width and height attribute

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

returns this html:

<img title="Cardinal" src="/perch/resources/images/cardinal-charley-harper-w300h700.png" alt="Cardinal by Charles Harper">

Cardinal by Charles Harper

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:

<img class="cardinal" title="Cardinal" src="/perch/resources/images/cardinal-charley-harper.png" alt="Cardinal by Charles Harper">

Cardinal by Charles Harper
Posted

Categories