Movable Type Plugin: Curvaceous
Curvaceous is a plug-in for Movable Type 4 that causes text to flow smoothly around the edges of irregularly shaped images, as shown in the actual screenshot below:
Once installed, the plug-in works in the background, converting any images that are either left-aligned or right-aligned.
Requirements
Enable Curvaceous in the plug-in settings, and then simply insert the images using the "insert image" button in your entry editor the way you're used to.
If you prefer to code in raw HTML, insert the images manually using the <img> tag and specify whether it should be left-aligned or right-aligned by entering "float: left;" or "float: right;" in the style attribute.
Please note that this plug-in may significantly increase build time for your blog. To minimize your build time, there are three options available for the build method: firstly, you may choose to convert all images via the Curvaceous plug-in. This will be the most time-consuming method. Secondly, you may choose to convert either just the images you specify, or all images but the ones you specify.
To specify an image for inclusion or exclusion (depending on your choice of build method), simply include the class type, "curvaceous" in the image's "class" attribute in the raw HTML. For example, if you insert an image and click the <A> button, add the word "curvaceous" as follows:
Known Issues
To report bugs or request features, please use the comments.
Once installed, the plug-in works in the background, converting any images that are either left-aligned or right-aligned.Requirements
- Movable Type 4
- Image::Magick (you probably have it, but please consult your web hosting service)
- Download Curvaceous for Movable Type, and extract the archive file.
- Upload the contents of the archive to the "plugins" folder in your Movable Type installation. (There should now be a directory called "Curvaceous" in the plugins directory.)
- Go to Preferences -> Plugins for each of the blogs where you want to enable Curvaceous.
- Check the "Enable" box, and click "Save Changes." (You should seriously consider not selecting "all" as the build method.)
- For each template for which you plan to use Curvaceous, add the following line between the <head> and </head> tags (if you are using the MT4 default templates, go to the Template Modules and edit the "Header" template):
<$MTCurvaceous$>
- Edit the templates that display entries (in the MT4 default templates, those would be the "Entry Detail" and the "Entry Summary" template modules), adding the tag modifier curvaceous="1" to the <$MTEntryBody$> and <$MTEntryMore$> tags; for example:
<$MTEntryBody curvaceous="1"$>
- Add a link to the Curvaceous for Movable Type page on your own blog on all pages where Curvaceous converts your images. The software is free of charge, but you must add a link.
Enable Curvaceous in the plug-in settings, and then simply insert the images using the "insert image" button in your entry editor the way you're used to.
If you prefer to code in raw HTML, insert the images manually using the <img> tag and specify whether it should be left-aligned or right-aligned by entering "float: left;" or "float: right;" in the style attribute.
Please note that this plug-in may significantly increase build time for your blog. To minimize your build time, there are three options available for the build method: firstly, you may choose to convert all images via the Curvaceous plug-in. This will be the most time-consuming method. Secondly, you may choose to convert either just the images you specify, or all images but the ones you specify.
To specify an image for inclusion or exclusion (depending on your choice of build method), simply include the class type, "curvaceous" in the image's "class" attribute in the raw HTML. For example, if you insert an image and click the <A> button, add the word "curvaceous" as follows:
Known Issues
- PNG images must be in RGB mode; Image::Magick does not seem to recognize the transparency information in grayscale images.
- Animated images are not supported.
To report bugs or request features, please use the comments.
If you liked this post, share it with others:
Categories
Movable Type
0 TrackBacks
Listed below are links to blogs that reference this entry: Movable Type Plugin: Curvaceous.
TrackBack URL for this entry: http://blog.blazingangles.net/MT/mt-tb.cgi/1373
2 Comments
Leave a comment
Changing LINKS GeekySpeaky: Submit Your Site! Blog Directory
Ratings on this site are powered by the Ajax Rating plugin for Movable Type.
Looks cool. Two questions:
Cheers.
Beau,
The technique is sometimes known as "sandbagging." It means that the image is displayed using several "div" segments stacked on top of each other. Each "div" displays only a portion of the image. In this case, each "div" has a fixed height but a width that depends on the first occurrence of a non-background pixel in the image. By floating these "div" segments left or right, the text will appear to flow smoothly around the image.
I prefer to keep the list of plug-in dependencies as short as possible, so Curvaceous isn't actually enabled for this blog. However, the HTML output that produced the screenshot above looks like this (cleaned up a little bit for readibility), with sandbag heights of 15 pixels:
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><div class="contoursandbag"><div class="contoursandbag-left contoursandbag-first" style="background: url(http://my.doma.in/flowers-curvaceous.jpg) -0px -0px no-repeat; width: 144px; height: 15px; margin: 0 20px 0 0; "></div>
<div class="contoursandbag-left" style="background: url(http://my.doma.in/flowers-curvaceous.jpg) -0px -15px no-repeat; width: 152px; height: 15px; margin: 0 20px 0 0; "></div>
<div class="contoursandbag-left" style="background: url(http://my.doma.in/flowers-curvaceous.jpg) -0px -30px no-repeat; width: 177px; height: 15px; margin: 0 20px 0 0; "></div>
<div class="contoursandbag-left" style="background: url(http://my.doma.in/flowers-curvaceous.jpg) -0px -45px no-repeat; width: 227px; height: 15px; margin: 0 20px 0 0; "></div>
<div class="contoursandbag-left" style="background: url(http://my.doma.in/flowers-curvaceous.jpg) -0px -60px no-repeat; width: 228px; height: 15px; margin: 0 20px 0 0; "></div>
<div class="contoursandbag-left" style="background: url(http://my.doma.in/flowers-curvaceous.jpg) -0px -75px no-repeat; width: 231px; height: 15px; margin: 0 20px 0 0; "></div>
<div class="contoursandbag-left" style="background: url(http://my.doma.in/flowers-curvaceous.jpg) -0px -90px no-repeat; width: 230px; height: 15px; margin: 0 20px 0 0; "></div>
<div class="contoursandbag-left" style="background: url(http://my.doma.in/flowers-curvaceous.jpg) -0px -105px no-repeat; width: 207px; height: 15px; margin: 0 20px 0 0; "></div>
<div class="contoursandbag-left" style="background: url(http://my.doma.in/flowers-curvaceous.jpg) -0px -120px no-repeat; width: 253px; height: 15px; margin: 0 20px 0 0; "></div>
<div class="contoursandbag-left" style="background: url(http://my.doma.in/flowers-curvaceous.jpg) -0px -135px no-repeat; width: 256px; height: 15px; margin: 0 20px 0 0; "></div>
<div class="contoursandbag-left" style="background: url(http://my.doma.in/flowers-curvaceous.jpg) -0px -150px no-repeat; width: 269px; height: 15px; margin: 0 20px 0 0; "></div>
<div class="contoursandbag-left" style="background: url(http://my.doma.in/flowers-curvaceous.jpg) -0px -165px no-repeat; width: 270px; height: 15px; margin: 0 20px 0 0; "></div>
<div class="contoursandbag-left" style="background: url(http://my.doma.in/flowers-curvaceous.jpg) -0px -180px no-repeat; width: 249px; height: 15px; margin: 0 20px 0 0; "></div>
<div class="contoursandbag-left" style="background: url(http://my.doma.in/flowers-curvaceous.jpg) -0px -195px no-repeat; width: 154px; height: 15px; margin: 0 20px 0 0; "></div>
<div class="contoursandbag-left" style="background: url(http://my.doma.in/flowers-curvaceous.jpg) -0px -210px no-repeat; width: 164px; height: 15px; margin: 0 20px 0 0; "></div>
<div class="contoursandbag-left" style="background: url(http://my.doma.in/flowers-curvaceous.jpg) -0px -225px no-repeat; width: 164px; height: 15px; margin: 0 20px 0 0; "></div>
<div class="contoursandbag-left contoursandbag-last" style="background: url(http://my.doma.in/flowers-curvaceous.jpg) -0px -240px no-repeat; width: 159px; height: 7px; margin: 0 20px 0 0; "></div>
</div></span> Lorem ipsum dolor sit amet...
There's also a very short section in the style sheets. As can be deduced from the above HTML code section, a typical image displayed using "Curvaceous" will increase the HTML page with a few Kbytes. Each section refers to the same image, however, so the download time is only increased by these few KBytes.
The output can be fine-tuned, of course. For example, two consecutive sandbags of almost equal width could be combined into one. Further, the sandbags wouldn't necessarily need to be forced to have equal height. But, those are (planned) future improvements.