Stef Dawson’s jewel of a plugin smd_macro allows a user to create custom virtual Textpattern tags that can do just about anything. The following is a simple example of usage for the plugin.

First, download the smd_macro and install as normal. In the following example, the chh_if_data plugin is also required.

What we want to do

In this example, we would like a simple way to markup an image layout within article body using our custom tag – <txp:photo>. The macro allows the user to put images with an 100% width, or X% width and aligned to the left or right side. Optionally the user can add a caption under the image.

The macro code

<txp:photo id="23" pos="left" caption="I am a photo aligned to left side"/>
<txp:photo id="23" pos="right" caption="I am a photo aligned to right side"/>
<txp:photo id="23" caption="I am a photo not aligned, I have 100% width"/>
<txp:photo id="23" />   <--(100% width and no caption)

Here is a sample page using this macro. Please note that the sample page use Spanish words for the macro name, attributes and values so don’t search for “photo, left, right, caption” if you look at the page code. Also, the sample page uses a more complex version of the macro, linking the images to another page.

Dependencies and attributes

1. You need to install the chh_if_data plugin to detect the optional caption attribute
2. You need some CSS to layout the result properly (example CSS at the bottom)

Name	Description	Default value	Replacement name
id	id of the image.		img_id
pos	desired position (left,right) by default not aligned, 100% width.		pos
caption	(optional) show a text under the image.		txt_caption

Macro definition

<txp:variable name="caption" value="{txt_caption}"/>
<div class="photo {pos}"><txp:image id='{img_id}' /> width="0" height="0" /><txp:chh_if_data><span class="caption"><txp:variable name="caption"/></span></txp:chh_if_data>
</div>

Sample CSS

.photo {
width: 100%;
margin-bottom: 10px;

.photo img{width:100%}

.photo.left {
float: left;
clear: left;
width: 30%;
margin: 0 3% 10px 0px;
}

.photo.right {
float: right;
clear: right;
width: 30%;
margin: 0 0 10px 3%;

.caption {
color: black;
display: block;
padding-top: 5px;
font-size: 9px;
font-weight: bold;
border-top: 1px dotted #E4E4E4;
line-height: 120%;
}

And there you go – use the above as the basis for making your own photo macro! More information may be found on the smd_macro plugin thread or after my post with the above code.