About the Author

This blog is run and written by Lewis Smile. You can hire him at BuildMyLens.com and YourNicheBlog.com. He does some mighty fine things on these internets ;)

See All Posts by This Author

How to insert an image (and have text wrap around it)

June 11th, 2007 • Related • Filed Under

Filed Under: HTML Tricks • Images

You know you can add an image to your lens using a normal text module? Did you know you can embed an image into the module without that upload feature? On the left side of the module?

Click here to see an example.

To embed an image into the module just like the one you see in the example module linked to above (and also the picture of the Squid right here in this blog post) you will need to have the image hosted somewhere. Your own website is fine, or any image hosting site such as photobucket or flickr.

To embed the image, on the left, and have the text wrap around it with a neat spacing effect, do this:

1. Paste this into your module: <img src=”http://www.image-location.com/filename.jpg” align=”left” hspace=”10″>

2. Alter the entire filename in bold to show where your image is hosted. You can find this by going to your image and right-clicking and choosing ‘copy image location’. If you’re using internet explorer you’ll need to select ‘properties’ and then copy the location that is shown.

3. Write the rest of your module as normal, following on right after the code above. If you want the image half way down your module, just paste the code half way down instead.

The code will automatically align to the left, as you can see in the align=”left” section of the code, and the code will create a margin around the image to the value of 10. To make the gap bigger or smaller, just alter this number.

And there you have it. Don’t go crazy with it, but is you use it wisely you can greatly improve your lenses and the breakup of the text you write.

- Lewis

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

There Are 7 Responses So Far. »

1. 

   Comment by June on 6 July 2007:

   Thanks for the tip, Lewis. This will be most helpful.

   Aloha,
   June

2. Pingback by New Wikipedia Module « SquidooCool.com - The blog to be an expert lensmaster! on 28 August 2007:

   [...] can do if that happens is insert your own image (hosted elsewhere) using the info I wrote about in this blog post a few weeks ago (click [...]
3. 

   Comment by Tom on 20 September 2007:

   I want to do this but it seems it doesn’t work anymore. I did it previously for some of my lenses but now all the pictures disappeared.
   I can add this code, then save, and re-edit, the only code that is left is
   Do you have another idea ? I don’t have a flickr account.
4. 

   Comment by mrlewissmile on 21 September 2007:

   Tom,

   It does indeed still work. But pasting directly from the post above doesn’t seem to work because of how wordpress change some stuff. But the code looks exactly the same. So if you paste it first into a notepad, then from the notepad into a module, it will work.

   It’s just wordpress weirdness.
5. 

   Comment by katiyana on 27 September 2007:

   Thank you so much for this good tip! This will help improve the look of some of my lenses, I’m sure!
6. 

   Comment by Jeff on 9 October 2007:

   Looks like Seth has removed our ability to post any reasonable html into a post.
   Every time I insert a photo from flickr into a post it strips out the address.
   Squidoos’ upload is so slow I thought this would be quicker.
   Too bad
   Makes it hard to have a pretty page.
   Got any ideas?
7. 

   Comment by mrlewissmile on 9 October 2007:

   Hi Jeff,

   The squidoo image uploads are broken today and yesterday and it seems form the newest blog post from Squidoo HQ that they’re working on it.

   And the ability to insert images from elsewhere has not been disabled. No way.

   So there must be something in the code that’s wrong. The code still works. I just did it 30 seconds ago.

   Lewis

Leave a Comment