UPDATED:
This is a pretty basic primer on how to handle and upload photos. Some of the stuff above might be a little small and hard to read on the screen here. A larger version can be found at the address below:
• Working with Photos: A Step By Step Guide
Also:
• shrinkpictures.com
• GIMP (a free picture editor ... a trifle more complex)
EARLIER UPDATE: This is the code I came up with that adds some "white space" around your photo. Here ya go:
<table border=0 align=left width=100 cellspacing=10><tr><td><table border="0" align="left" width="100"><tr><td>
<!--INSERT IMAGE HERE-->
</td></tr><tr><td><font size="-2">
<!-- INSERT CUTLINE INFO HERE-->
</font></td></tr></table></td></tr></table>
RESUME ORIGINAL POST
The process of uploading a photo is, in itself, very easy. Preparing the photo in the first place, that's the tricky part.
So, we're basically talking about a three-step process, photo preparation, photo upload and photo embed.
(Note: Not everybody will have privileges to upload at this time. Check with me if you're not sure.)
Preparation:
I use Photoshop, but I'm sure there are other photo editors out there you can use.
As a general rule, a photo that measures anywhere from 250-300 pixels wide looks best on our pages. Anything smaller than that looks puny. Anything larger swamps the post.
So, pre-size your photo, adjusting it so it's in that range (watch the depth, too ... if it gets much deeper than, say, 400 or so, it might extend deeper than your text, which looks funky). Set the resolution to 72 pixels/inch.
Then save the photo to an easily-accessible place. (I use the desktop a lot for this.)
Upload:
Go to your blog front page and look for "upload file." Click it.
Under "Choose a File" click on "browse."
Then, navigate to your photo and select it.
Ignore "Choose a Destination" and just click on "Upload."
On the second screen, select "Show me the HTML." For our purposes here, ignore "Image Thumbnail" and just click on "Embedded Image."
You'll get something that looks like this:
<img alt="streets_75x75.jpg" src="http://www.mysanantonio.com/specials/weblogs/weekender/streets_75x75.jpg" width="75" height="75" />
That's the code that'll summon your image, but we've got one more piece of work to do.
Embed:
This might seem complicated, but it's really not all that bad.
As in almost all things Internet, there are about a zillion ways to do things, but this way I like best. I created a piece of code to create a nice, grey border around photos and automatically cause them to align right:
<table border="0" align="right" width="200" bgcolor="#C0C0C0"><tr><td>
<!--PLACE PHOTO HERE-->
</td></tr><tr><td>
<font size="-2"><i>
<!--CUTLINE INFO HERE-->
</i></font></td></tr></table>
All you have to do is put the image code where it says <!--PLACE PHOTO HERE-->, place your cutline info where it says ... wait for it ... <!--CUTLINE INFO HERE--> and then remove all the returns from the code. (Movable Type is set up to interpret returns as breaking spaces, so that'll mess the code up.)
You'll end up with something that looks like this:
<table border="0" align="right" width="200" bgcolor="#C0C0C0"><tr><td><img alt="010107_b4.jpg" src="http://www.mysanantonio.com/specials/weblogs/outdoors/archives/010107_b4.jpg" width="250" height="167" /></td></tr><tr><td><font size="-2"><i>RV manufacturers are making surfing the Web more convenient than ever with a wide array of gadgets. </i></font></td></tr></table>
Just take that whole blob and place it where you want the image to go.
Easy as pie, right?
Seriously, contact me if this isn't clear and I'll see if I can't walk you through it.
Also, if you're thinking about massive amounts of photos ... galleries and the such ... or want to run exceptionally big art for whatever reason, go ahead and contact us and we'll help you out.
Addendum on PDFs: You can upload simple PDFs in pretty much the exact same way ... only instead of embedded code, you'll end up with something like this:
<a href="http://www.mysanantonio.com/specials/weblogs/misc/archives/agenda-1.pdf">Download file</a>
An important note: PDFs tend to run large, and if you try to upload a PDF, even a single-pager, it might be a little too large for MT to handle. If that happens, you'll get an error message.
And if that happens, send the PDF to one of us so we can compress it and make it work right. (Same goes if you're trying to upload a complex, multi-page document or something.
I'm sure I've now confused you all.
You're welcome.
UPDATE: It came to my attention I neglected an alternate method of presenting photos. Instead of embedding the photos, you can merely create a link to them by clicking "popup image" instead of "embedded image" after you upload your photo to Movable Type:
This'll give you a piece of code that doesn't look like much more than an href hotlink (which, in fact, it is):
<a href="http://www.mysanantonio.com/specials/weblogs/happens/010807_haggard.html" onclick="window.open('http://www.mysanantonio.com/specials/weblogs/happens/010807_haggard.html','popup','width=300,height=300,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">View image</a>
I usually change the words "View image" to "Click here for a picture of Madonna bothering people" (or whatever) and just drop that into my entry.
Hope that helps.
P.S. Lastly, a friendly reminder that if you don't feel comfortable doing all this, let us know. We'll still upload 'em for you, if you like. -Matt
No comments:
Post a Comment