How To Add Images to a Blog Post or Article
By Drew Wells @ 1:39 AM
Use inline images for the body of the article and link to larger versions if needed.
Inline images can be up to 500px wide and are used in
the body of the blog post or article. Use an inline image in the post to link to the
full-size image alone on a page.
Note: The
Create Image
Decide on your image type: inline, or full. Crop or resize the image to an appropriate size.
Inline - Any size up to 500px wide
Full-size - Create a standard inline version to display in the
post and to link to the full size version. Try to stay under 1024x768
for full size images.
Use a high-quality app to crop or resize. Photoshop is great, if you have it. Irfanview is a free image
viewer that does a great job, too.
Use a small amount of sharpening to to make resized images look crisper. Save the image as png or jpg. Check the file
size of your image before uploading, a full size image should
normally be less than 250K. If it's bigger than that, your image may
be too large or it may be uncompressed.
Keep the image simple. Don't add shadow borders or other effects.
Rename the resized image to "your initials_date_seq".
Example: "dw_081405_a.jpg", "dw_081405_b.jpg", "dw_081405_c.jpg".
For a full-size image add "_full" before
the extension.
Upload image
Inline/Full - Use FTP to upload the image.
If you are submitting an article to be considered for publication, then link your article images from an external site, your own or something like imageshack.com or photobucket.com.
Or you can use one of these placeholder images:
http://automatedqa.com/images/blog/placeholder.png
http://automatedqa.com/images/blog/placeholder.gif
http://automatedqa.com/images/blog/placeholder.jpg
If your article submission has been accepted please contact drew_at_automatedqa.com for FTP access.
Note: You'll upload two images for a full-size image, the smaller
version for the post, and the full-size version to display alone when
the smaller version is clicked on. Add "_full" to the name of the
full-size version. For example, "dw_081405_a.png" full-size would be"
dw_081405_a_full.png".
Add HTML Image Code to Post
Headline - Just select the uploaded image in the Appearance section on the 'Create Article' page. No extra code is needed.
Inline - Switch to HTML mode and insert this code where the image should be placed.
<div align="center">
<img src="/images/blog/(IMAGENAME)" width=### height=### alt="Add
rollover text here" title="Add rollover text here" /></div>
Replace (IMAGENAME) with your image name, and add the width and height
in pixels. Replace rollover text with the descriptive text you would
like displayed if the image is not displayed.
Example:
<div align="center">
<img src="/images/blog/dw_081405_a.jpg" width=200 height=205 alt="I heart PDC" title="I heart PDC" /> </div>
Full-size - Switch to HTML mode and insert this code where
the image should be displayed. Change image name, size, alt text for
your image.
<div align="center">
<a href="/images/blog/(IMAGENAME)_full.jpg">
<img src="/images/blog/(IMAGENAME)" width=### height=### alt="Add
rollover text here" title="Add rollover text here" /></a></div>
Example:
<div align="center">
<a href="/images/blog/dw_081405_a_full.jpg"><img
src="/images/blog/dw_081405_a.jpg" width=200 height=205 alt="Click
for full-size" title="Click for full-size" /></a>
</div>