Note: This site might seem inactive… That’s because it is. Don’t worry though, I’m still coding webpages and stuff! If you’re interested, I suggest you get a translator and head over to Qiwi; or you could just check the latest site we’ve been working on: Apotheek Goethals – Debrabandere. Enjoy!
WordPress plugin: Dunstan’s tag transformations
It’s a well-known fact that Dunstan’s tag transformations move back and forth rock. Ever since that article was published, I’ve been using the code insertion script for erm… inserting code snippets in my posts. At first, I implemented the PHP functions by simply hacking the WordPress core files. Obviously — WP “Mingus” 1.2 didn’t have much of a plugin API.
Those days are over now. After brushing up Dunstan’s original code, throwing in some extra variables, and of course adding the right plugin hooks, I have the honour of presenting you the WordPress Tag Transformations plugin. You can use it to insert images and/or code blocks in posts (and pages, of course). Of course, code snippets and img elements could be manually coded each time you need one, but there are just so many things you have to do to prepare code samples for insertion into a blog post, that it often takes the fun out of writing the post in the first place
. Besides, this plugin also makes it easier to automate things. If in the future somehow you decide to start disliking the way you present, say, images, all you’ll have to do is tweak one PHP function instead of all blog entries containing img elements. Consistency and flexibility are the keywords. There ya go, Rob.
Inserting images into posts or pages
This is done by the mj_image_transform() function (formerly imageTransform()), which replaces our custom imageins elements. Here are a couple of examples of how to use it:
// examples of image insertions using <imageins />
// example 1 (plain image, IMG element has an empty ALT attribute)
<imageins="108a" path="images" />
// would produce:
<div class="image" style="width: 512px;"><img src="http://mathibus.com/images/108a.jpg" width="500" height="481" alt="" /></div>
// example 2 (IMG element with ALT attribute specified)
<imageins="108a" path="images" alt="Operator Tuxedo Junction" />
// would produce:
<div class="image" style="width: 512px;"><img src="http://mathibus.com/images/108a.jpg" width="500" height="481" alt="Operator Tuxedo Junction" /></div>
// example 3
<imageins="108a" path="images" alt="Operator Tuxedo Junction" caption="An image of a bunch of dorks" />
// would produce:
<div class="caption" style="width: 516px;">
<div class="image"><img src="http://mathibus.com/images/108a.jpg" width="500" height="481" alt="Operator Tuxedo Junction" />An image of a bunch of dorks
</div>
</div>
// example 4
<imageins="108a" path="images" alt="Operator Tuxedo Junction" caption="An image of a bunch of dorks" class="css-class" />
// would produce:
<div class="css-class caption" style="width: 516px;">
<div class="image"><img src="http://mathibus.com/images/108a.jpg" width="500" height="481" alt="Operator Tuxedo Junction" />An image of a bunch of dorks
</div>
</div>
// example 5
<imageins="108a" path="images" alt="Operator Tuxedo Junction" caption="An image of a bunch of dorks" class="css-class" link="http://flickr.com/" />
// would produce:
<div class="css-class caption" style="width: 516px;">
<div class="image"><a href="http://flickr.com/" title=""><img src="http://mathibus.com/images/108a.jpg" width="500" height="481" alt="Operator Tuxedo Junction" /></a>An image of a bunch of dorks
</div>
</div>
// example 6
<imageins="108a" path="images" alt="Operator Tuxedo Junction" caption="An image of a bunch of dorks" class="css-class" link="http://flickr.com/" linktitle="Go to Flickr" />
// would produce:
<div class="css-class caption" style="width: 516px;">
<div class="image"><a href="http://flickr.com/" title="Go to Flickr"><img src="http://mathibus.com/images/108a.jpg" width="500" height="481" alt="Operator Tuxedo Junction" /></a>An image of a bunch of dorks
</div>
</div>Note: Each attribute value must be surrounded with double quotes ("). Don’t use single quotes ('), or the element will not be recognized.
Inserting code into posts or pages
This is done by the mj_code_transform() function (formerly codeTransform()), which replaces our custom codeins elements. Here’s an example of how to use it:
// example of a code insertion using <codeins />
<codeins="115b" />
// would produce:
<ol class="code">
<li><code>.email {</code></li>
<li class="tab1"><code>unicode-bidi: bidi-override;</code></li>
<li class="tab1"><code>direction: rtl;</code></li>
<li class="tab1"><code>}</code></li>
<li class="download">Download this code: <a href="http://mathibus.com/code/115b.txt" title="Download the above code as a text file">/code/115b.txt</a></li>
</ol>Note: Again, each attribute value must be surrounded with double quotes ("). Don’t use single quotes ('), or the element will not be recognized.
As you can see, the look of code listings can be easily controlled via CSS. Here’s what I’ve got in my stylesheet:
ol.code {
font-family: 'Courier New', monospace;
border: 1px solid #eee;
margin: 5px 0;
overflow: auto;
padding: 5px 5px 5px 45px;
color: #333;
}
ol.code li {
background-color: #f4f8fb;
margin: 0;
padding: 0 5px;
}
ol.code li.download {
background-color: #f9fafe;
list-style-type: none;
padding: 5px;
text-align: center;
font-family: Verdana;
}
ol.code li+li {margin-top: 2px;}
ol.code li.tab1 {padding-left: 15px;}
ol.code li.tab2 {padding-left: 30px;}
ol.code li.tab3 {padding-left: 45px;}
ol.code li.tab4 {padding-left: 60px;}
ol.code li.tab5 {padding-left: 75px;}
ol.code li.tab6 {padding-left: 90px;}
ol.code li code {color: #333;}
ol.code li.cmnt code {color: #824c88;}Note: Except for indention, everything will look fine without the CSS applied.
That’s it. Enjoy, I guess.
Comments (9)
Listed below are the responses for this entry.
Trackbacks & Pingbacks (2)
Listed below are resources on the web that mention this article.
-
- Wordpress Plugin Competition Blog: Dunstan’s tag transformations:
Dunstan’s tag transformations
[…] Dunstan’s tag transformations can now be used on any WP weblog, using […]- Pingback made on June 15th, 2005 @ 11:29 am
-
- If..Else Log: WP plugin for Dunstan’s tag transformations:
WP plugin for Dunstan’s tag transformations
Mathias has turned Dunstan’s tag transformations into a handy plugin. […]- Trackback made on June 19th, 2005 @ 3:14 am
I can tell that this is going to come in useful — thanks Mathias!
More styles to add :-)
Mamamia! This could really come in handy. Sweet plugin Mathias. I’ll definitely be using this once I’m updated to WP1.5.
Well it’s good to see our young padawan moving up in the world ;-).
All this stuff is making me want to check out WordPress after all (maybe for a few smaller web projects with zero budget). I’ll be checking out your code as I’m slowly getting to grips with PHP…
Cheers,
Erwin.
Great plugin here! :)
Excellent! Thanks for putting this together.
WHY DO YOU USE WORDPRESS, WHEN THERE ARE ELITE CMS’ OUT THERE LIKE PHPNUKE?
WordPress makes (for me at least):
into:
which the plugin cannot parse. I suggest changing the regex in
mj_addtags()to do\s?="(.*?)"to allow for this gap. (Dunno if that’s valid XML? Oh well. I guess you *could* counteract the WP filter that causes the problem if you wanted. That would be cleaner but take longer.)Also it would be good if it took the path from the Document Root rather than WordPress’ directory:
I also don’t understand the need for the
$widthfor images? Theheightandwidthattributes are already set on the actual image which I’d say is sufficient is it not?Nothing thing: I prefer my images to be enclosed in a
SPANrather than aDIV. Images are inline elements after all.