Examples – Using Attributes

In the previous example, I had to create a new embed for every type of emoticon I wanted to use in the post. This can easily lead to an explosion of embeds which would be very difficult to manage. But fortunately, there is a better way—using attributes.

With attributes, I can use the same embed for all my emoticons, even if I have dozens of them.

This is how I can define a single embed for all the icons:

 Name: [emote]
Value: <img style="width:16px;height:16px;vertical-align:text-bottom;"
            src="//moztools.com/wp-content/uploads/sites/4
            /2010/11/em-%icon%.png"/>

I use a generic name for my embed, and instead of entering the full file name for a specific image, I use the attribute %icon% for part of the image file name. (I am assuming that all the icon names are em-<something>.png, and in the same directory on the server, of course.)

Now I simply have to assign a value to the icon attribute when I use the embed, like this:

Winning makes me happy [emote icon="smile"], but losing
makes me sad [emote icon="sad"], and I am not embarrassed
to say it (well maybe just a little bit [emote icon="blush"]).

It’s a little more long-winded, but if you keep the embed and attribute names short, it’s really not that bad.

The results are the same as before, but I only had to create one embed and I can use it to embed all the emoticons I want.

Winning makes me happy , but losing makes me sad , and I am not embarrassed to say it (well maybe just a little bit ).

Of course, I can use multiple attributes in the same embed. For example, I can use the %size% attribute for the width and height values (assuming the icons are square) and now I can control the size of the icon on a per-use basis (and notice how I can use the same attribute in more than one places in the embed value):

 Name: [emote]
Value: <img style="width:%size%px;height:%size%px;
            vertical-align:text-bottom;" src="http:
            //moztools.com/wp-content/uploads/sites/4
            /2010/11/em-%icon%.png"/>

The only downside is that I must now always include the size attribute when I use the embed, but it does allow me to do things like this:

I'm not just happy, [emote icon="smile" size="12"],
or a little joyful [emote icon="happy" size="16"].
I am super-excited! [emote icon="grin" size="24"]

And here is the result:

I’m not just a little happy, , or a somewhat joyful . I am super-excited!

Pretty cool, right?