Help - Search - Members - Calendar
Full Version: Image insertion
Movable Type Community Forum > Additional Resources > Tips and Tricks
Muppet Face
I've moved this to this forum as I realized, soon after posting, it was in the wrong place.


Two questions (these may have been covered before, if so, let me know where the thread starts)

1) If I want to place an image along with my entry (i.e. it sits beside it) what's the easiest way? Do I have to use HTML tags?

2) Is there a program or plug in that can automate this process?


TIA
cedar
The bad news is... yes, you have to use HTML tags. The good news is... MT does most of the work for you.

If you select 'upload image' from your blogs main menu, you'll be presented with a dialogue allowing you to browse to the image and upload it. After it's uploaded you can tell it to use the image in a new entry and will be presented with a blank entry containing a link to your image (pop-up or embedded).

Something like:
CODE
<img alt="yourimage.jpg" src="http://www.yourdomain.com/mt/archives/yourimage.jpg" width="150" height="75" border="0" />


By adding , align="left", to the img tag you can force your text to wrap around the image. You can also add margins and/or a border to the image.

If you have NetPBM or ImageMagick on the server you will also be able to create a smaller (thumbnail) image and link it to the larger version.
JudiS217
You can create a CSS rule that applies to images in your blog body and position them there. But the easiest thing to do is just put it in HTML. If you use a lot of images and want them in the same place (or you don't want your authors to have to worry about HTML) then write the rule.

For HTML, it's as simple as:

CODE
<img src = "pathtofile.jpg" align = "left" height = "50" width = "50" hspace = "2">


This will sit a 50x50 image to the left of the text, and leave 2 pixels of space on either side. These tags are depreciated, but they will work.
cedar
Alternatively, you could use an inline style to rid yourself of the deprecated tags. Rather than hspace, use something like,

CODE
style="margin: 5px 5px 0 0;"


in your image tag to give it five pixel spacing on the top and right sides. To make them all the same, just use one value, style="margin:5px;".
diagonalwalls
The other answers were perfect, but one little tip:
Normally, when I align and image left (so it's in the left side and the text wraps around it) I set the hspace (horizontal margin) to 10 because when you're using an average (not the tiny, trendy size) text size when it wraps below the image the distance is roughly equal between the text below the image and the bottom of the image and the text and the right side of the image.

Have fun!
biggrin.gif
KW
Muppet Face
Many thanks.

I will try your suggestions! biggrin.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.