Archive for May 5th, 2005

Posting from TJ4 with text wrapping around images

Published by cmagic on May 5, 2005 in Uncategorized. Closed

1. The standard way
The standard way of posting from TJ4 will result in the current formatting. The image has been inserted at the beginning of the paragraph and all the paragraph has been aligned left (Format/Paragraph/Alignment). You can see that the image is on the left of the page but the text starts at the bottom at the image. If you try changing the alignment of the paragraph (right, center) you don’t get any better result. Of course if the image had been all by itself in its own paragraph, aligning the paragraph in TJ4 would result in the expected behavior. What we want is some way to wrap the text around the image. Let’s get a bit more adventurous.

2. With a bit of HTML hacking
When an image is posted to a weblog, TJ4 inserts a special <IMG> tag. It looks like this : 
<img src=”tj200505051136-1.jpg”/>
You can add some attributes to the IMG tag. In particular the align attribute will allow to specify the alignment of the image respective to the text. That is exactly what I did in the current formatting, I added the attribute align=”left” in the image tag and you can see that it does exactly what we are expecting. However there is a problem with that. In fact there are two problems. 
The first problem is that this formatting is not the result of a straight “post to blog” command from TJ4 like in the standard case. Indeed once posted, you need to use your weblog administration to hack the entry in order to add the align attribute right inside the <IMG> tag.
The second problem is that the align attribute for <IMG> tag is now deprecated and might not be supported by future generation of web browsers. We better think of a better solution.

3. Passthru with style

Because of the deprecation of the align attribute, the now recommended way of wrapping text around images is with the use of styles. Styles can be used in two ways, inside a specific file, called a CSS (Cascaded Style Sheet) or inline any html file to add some spicy formatting where needed. That’s exactly what we need. The tag to use is simply called <style> and the attribute we will be using is called float. So, what we need really is to surround our image with the following tag : <div style=”float: left;”>[image here]</div>. Right, thanks for the tip, but how do I transmit this html tag straight to my weblog ? Well that’s where comes the special text style ‘HTML Passthru’. Just format the tag using this style (choose HTML Passthru (for blogs) in the style drop down box) and you’re in !

You can check the result in the current paragraph. The advantage on solution 2 is that you don’t need any html  hacking in your weblog administration, you post straight from TJ4. The little drawback is that your post is not exactly WYSIWYG because of the html style tags in your entry.

4. Getting more organized

Fine, now that I can post images to my weblog with text wrapping around I would like something more convenient. With inline styling I can go a bit further by specifying additional attributes to the style tag. I can specify margins in pixels (margin-top, margin-left, margin-right, margin-bottom), I can add a border to the image, I can also add a title to the image that shows up when pointing the image and many more. For example the following tag will put the image on the right with 5 pixels clearance between text and image and a blue dotted border of 5 pixels: <div title=”the sombrero” style=”float:right; margin-top:5px; margin-left:5px; margin-bottom:5px; border:5px dotted blue;”>, funky isn’t it ? 

Now, of course, I am not going to enter those tedious html style tags each time I need to insert an image. You guess the solution in TJ4: templates ! Just create a couple of templates, I created two basic ones: image-right, image-left with the following: <div style=”float:right; margin-top:5px; margin-left:5px; margin-bottom:5px;”></div> Of course the template text must be formatted with the ‘HTML passthru’ style. Now each time I need an image in my blog entry I insert the image template and put and image right inside the ‘><’ tags. I personally use drag and drop from any of the image organizer/browser I use (Photoshop elements, Picasa). It’s even possible to re-dimension the image inside TJ4 and post to my blog right away !

Really, TJ4 is a great tool, thanks David !  (and btw, that was a calendar charm out of the box !)

Please excuse my sometimes “lacky” English, English is not mum’s tongue  !