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?