Uploading and Applying Images in Wordpress

[hokiealumnus]

Hello everybody. We thought it might be a good idea to give everyone a little tutorial on how images should be used in Wordpress. It's quick with lots of pictures, so don't let it stress you out.

Before proceeding, please take note of the following two requirements:

No images used in articles should exceed 1000 pixels in width and 800 pixels in height.
There are to be no externally hosted images.
Because Wordpress puts everyone's images in a single folder for that month (i.e. 2010/February/), all images should be named specifically for your review. We're seeing stock image names (i.e. IMG_1045.jpg) and generic names (i.e. boxfront.jpg).
The problem is, if someone else's camera is at the same number, when you upload your image, it will overwrite the one already there. Same with generic names.
The solution is to name each photo specific to the review. For example, say I was reviewing a Lamptron FC-2, I'd name them like this: fc2-1.jpg, fc2-2.jpg, fc2-3.jpg, etc. It's very unlikely someone will review the same product that was already reviewed, so this will pretty much guarantee no images will be overwritten.
Do not use Internet Explorer to upload or insert images. It will not work. Microsoft + Open Source = FAIL.


First, you have to upload your files. There are two ways to do this. The first way to do it is from within the editor while you're writing your article. (See the post below for the other method).

Click on the little square next to "Upload/Insert" just above and to the left of the editor.

http://www.myalbumbank.com/albums/userpics/10080/images05.jpg

That will pop up this screen, where you click "Select Files" and it will bring up a window to browse your computer.

http://www.myalbumbank.com/albums/userpics/10080/image10.jpg

Select your image. You'll see it upload and then it will show you the following window. Now it's time to go through this short checklist for adding a photo.

There are five things to make sure are completed on this screen (Note these should all be selected from default, but please have a look through to make sure. The important one that requires action is to fill in a caption for all images.):

1. Be sure the image has a caption.
2. Be sure "Center" is selected.
3. Be sure "Yes" is selected next to "Open using LightBox"
4. Be sure "Medium" thumbnail is selected.
5. Next to "Link URL", click "File URL"

Then click on "Insert into Post"

http://www.myalbumbank.com/albums/userpics/10080/image11.jpg

Your image will then be placed into your post.

That's it!

Please follow this guide (paying special attention to the checklist above) whenever using images in your posts. It will ensure the articles on the site are all displayed in a uniform manner and assist with continuity of style.

***An important note to add:
If you use wordpress to resize your images to be within the 800x800 parameters, you must do so BEFORE inserting them into your post. If you edit them after insertion into your post, you'll need to re-insert whichever images you edited. The changes made in wordpress rename the file automagically. If you don't re-insert them, the size will not change.

If anyone has any questions, feel free to ask. We'll do our best to clarify for you!

[splat]

The only change I might suggest is putting the "Upload/Insert while editing an article" method first, since it's more streamlined and it "attaches" the images to the article.

[hokiealumnus]

NOTE: Do not use Internet Explorer to upload or insert images. It will not work. Microsoft + Open Source = FAIL.

If you want to upload all of your files prior to getting started writing the article, you can do so from the media manager.

The first way to do it is pull down the "Media" tab on the left and click on "Add New":

http://www.myalbumbank.com/albums/userpics/10080/images01.jpg

That will bring you to this screen, where you click "Select Files" and it will bring up a window to browse your computer.

http://www.myalbumbank.com/albums/userpics/10080/images02.jpg

Select your image. You'll see it upload and then pop up the following window. Now is an easy time to add a caption to your photo. When you're done, click "Save All Changes" (it's slightly cut off in the lower left).

http://www.myalbumbank.com/albums/userpics/10080/images03.jpg

Your image will then be saved and that window will collapse to show you the whole media library.

http://www.myalbumbank.com/albums/userpics/10080/images04.jpg

With this method, when it's time to put the image in your post, click on the little square next to "Upload/Insert" just above and to the left of the editor.

http://www.myalbumbank.com/albums/userpics/10080/images05.jpg

Now, since we have already uploaded our images into the media library, we want to click the "Media Library" tab. Find the image you want to use and click "Show".

http://www.myalbumbank.com/albums/userpics/10080/images07.jpg

That will expand your image to a screen that looks like when you first uploaded it. Just like the method above, we will go through our checklist.

There are four things to make sure are completed on this screen (Note these should all be selected from default, but please have a look through to make sure. The important one that requires action is to fill in a caption for all images.):

1. Be sure the image has a caption.
2. Be sure "Center" is selected.
3. Be sure "Yes" is selected next to "Open using LightBox"
4. Be sure "Medium" thumbnail is selected.
5. Next to "Link URL", click "File URL"

Then click on "Insert into Post"

http://www.myalbumbank.com/albums/userpics/10080/images08.jpg

***An important note to add:
If you use wordpress to resize your images to be within the 800x800 parameters, you must do so BEFORE inserting them into your post. If you edit them after insertion into your post, you'll need to re-insert whichever images you edited. The changes made in wordpress rename the file automagically. If you don't re-insert them, the size will not change.

****If anyone uses this method, an easy way to make the images more easily accessed than the media library is to attach them to your article. I don't have time at present, but there is a (semi)simple way to attach multiple images at once. If someone does use this method and needs to know how, PM me and I'll set you straight. I'll try and go over how to do it in this post whenever time allows.

[hokiealumnus]

We now have the WYSIWYG ability to use tables to make multiple images per line an easy solution to implement.

First, click on the insert table button in the lower left of the editor controls.

http://www.myalbumbank.com/albums/userpics/10080/table1.PNG

That will pop up this dialogue. There are a couple quick things to do here:

Leave the Columns as the default of two if you're using images. Two side-by-side is all that will fit for practical viewing purposes.
If you're using a table for something like specifications and you need more columns, just be mindful of overall page width.
Choose however many rows of images you will want and enter that number.
Select "Center" for alignment. This will center the table in the article.

For this example, I made a 2 x 2 table.

http://www.myalbumbank.com/albums/userpics/10080/table2.PNG

The table will be inserted into your post like the next image. Use your mouse to click inside one of the table boxes (logically, starting with the upper left is normal). To navigate around the table, simply use your left and right arrow keys.

http://www.myalbumbank.com/albums/userpics/10080/table3.PNG

Once you've selected the proper box of the table, insert your image as outlined in the posts above.
Note - when you hit "Insert into Post", the editor will place the cursor on the next line in the table box, underneath the image you inserted. This leaves a small space under the image in the table field. If you want to get rid of that, simply hit backspace.
http://www.myalbumbank.com/albums/userpics/10080/table4.PNG

After your image is inserted, hit your right arrow to move to the next box in the table. Rinse & repeat until the table is full. (These have the extra line removed, the previous shot does not.)

http://www.myalbumbank.com/albums/userpics/10080/table5.PNG

That's it! If you have any questions, feel free to ask.

[hokiealumnus]

For anyone that already viewed this, I added: Before proceeding, please take note of the following two requirements:

No images used in articles should exceed 800 pixels in either width or height.
There are to be no externally hosted images.

[I.M.O.G.]

Nice work Hokie, that is really clear and should be useful.

[EarthDog]

VERY nice!

Another note (not sure if its worth noting in the above psots though) is that when you just add a bunch of images in a row, then save, they of course will not be placed in the document. When you then go to the gallery to insert the picture, it will insert the picture at the top of the page no matter where your cursor is clicked before you go into the add picture icon. So it may be best to put the pictures in the document 1 by 1. At least thats how I found it easier personally or be prepared to drag each picture around the document for proper placement.

EDIT: Why do we have a limit on the ORIGINAL size of the picture again? Heck these days, the camera on my phone can take pix 3x the size of the 800x800 limit. Thats SMALL for a 'full size' picture dont you think?

[I.M.O.G.]

If it's bigger than that, when the fancy lightbox window pops up, the image will be larger than the screen can display, which looks like a mess. The 800x800 limit makes it look pretty, and pop up at a reasonable size to see detail and also look clean and professional.

[hokiealumnus]

In addition to what IMOG said, it affects the speed of the site. The way WP handles images is it takes the originals and uses HTML to shrink them to thumbnail size. When this happens, the original image is still downloaded as the article is loaded but just displayed smaller.

The benefit is that when you click on an image to load it, it's already there and just needs to be blown up in the lightbox. The drawback in articles with large images is that it takes longer to load initially. 800 max limit on both width and height is a good compromise between decent image size and a speedy, usable web site.

[hokiealumnus]

Please see post #4 (http://overclockers.com/forums/showpost.php?p=6352026&postcount=4) on how to use tables to cleanly insert multiple images per line.

[splat]

edit: WP has a built in gallery function, but it doesn't work well for our purposes, so use Hokie's "table method" above to insert multiple images.

[hokiealumnus]

FYI, there have been some image issues popping up with bad default linking. Thankfully it's really easy to fix! Added this step to inserting an image:

5. Next to "Link URL", click "File URL"

Please take note. Thanks!

[hokiealumnus]

Added:
Because Wordpress puts everyone's images in a single folder for that month (i.e. 2010/February/), all images should be named specifically for your review. We're seeing stock image names (i.e. IMG_1045.jpg) and generic names (i.e. boxfront.jpg).
The problem is, if someone else's camera is at the same number, when you upload your image, it may overwrite the one already there. Same with generic names.
The solution is to name each photo specific to the review. For example, say I was reviewing a Lamptron FC-2, I'd name them like this: fc2-1.jpg, fc2-2.jpg, fc2-3.jpg, etc. It's very unlikely someone will review the same product that was already reviewed, so this will guarantee no images will be overwritten.
FYI. :)

[hokiealumnus]

Added: ***An important note to add:
Name your images specific to your review. For instance on the case review I did recently, the images were cm690ii-01.jpg, cm690ii-02.jpg, etc. If you leave the default image name from your camera (i.e. IMG_1058.jpg), you run the risk of overwriting an image already in the folder. Better safe than sorry!

All writers, please review the tutorial above in case it has changed since you last looked at it. Thanks!

[hokiealumnus]

Here's an important one, in case people have been using the WP engine to resize your photos - Resize all your images before uploading them. You can do it by batch using something like VZO image resizer (http://www.vso-software.fr/products/image_resizer/). Set it to the resolution you need (800x800), tell it to keep the aspect ratio, and let it go to town. If you need help with that at all, let me know.

[sno.lcn]

Thanks for the info Hokie :)

[hokiealumnus]

NP. I bet you'll find it a whole lot faster to do them like this. :p

[hokiealumnus]

Everyone please note - An author and I both confirmed that image uploading does NOT work with Internet Explorer 8. It was tried in both Win 7 and Vista. Open source + Microsoft = FAIL. So please use Firefox or Chrome to edit your articles, at least when it comes to images. Opera may work, but I haven't tried that one. Safari...pff, who uses safari? ;)

[EarthDog]

Is it me or.......

Im trying to place the table and then pictures into the Benching article. The table places properly, My cursor is in the upper left corner (of a 2x2 table) when I bring the picture in, the table and of course its formatting, disappears. Figuring maybe it just wasnt visible, I tried to put the next picture in and it just dumped below it.

Any suggestions? This is only with my PC at work, I have not tried to duplicate this issue at home on Chrome...

Noting the post right above me... the uploading actually works. The pics are there in the gallery and Im on IE7 as well.

[hokiealumnus]

After inserting the table, you have to use your mouse and click inside the tiny little box the table puts there. Sounds like you've done that though. I'm afraid it might just be IE. I have never had a photo overwrite a table I put there when the cursor was in the right place on the table. But I've never used IE either and can't try from here, sorry.

[EarthDog]

I tried the cursor in every place I could in that box. Even tried a 2x1 with the same result. Funny thing is, I swear it worked before and I did it from the office, but maybe that was prior to the table thing for the pictures...

Amazing the most used browser ever has sooo many issues with WP!

[dfonda]

I seem to have lost my Upload/insert button's ahh they were always there what did I do to make them disappear? Is it a setting?missing upload button.jpg (http://www.overclockers.com/forums/attachment.php?attachmentid=83156&stc=1&d=1274561625)

[I.M.O.G.]

Second report I've had of that, ehume has same problem. I'm looking into it. Thanks for heads up.

[dfonda]

Second report I've had of that, ehume has same problem. I'm looking into it. Thanks for heads up.

That's a first...thought for sure I turned it off somehow:) Thanks for checking out.

[I.M.O.G.]

Any further info would be helpful. Ehume had it in multiple browsers.

Wait, may be a problem with upload directory. I'll confirm shortly - I was thinking that problem was fixed, but the rights may be messed up still.

[MattNo5ss]

Glad ehume got back to you about this. Any clues to what's causing the problem?

If nothing else, then the authors can send the pics to a CE or editor and put "<pic name here>" in the article. Then we can insert the images, like the process before WP (that's how I did my PS3 HDD article). Of course, this would just be a quick fix, if needed, for the time being.

[I.M.O.G.]

It's not a rights issue, my test account works fine... I could try a password reset on their accounts, and login as them but I'm almost certain it's not an account problem.

Of course that means I need to check, because the second you start assuming the second you find out you are wrong. I'll have time tomorrow evening to dig into this more...

For those having problems, I really apologize. I really hate when there are problems that make contributing a pain in the neck for you guys. I'll figure out something to get this resolved tomorrow, or monday at the latest.

[MattNo5ss]

Is there a recommended limit on the number of images per article? I ask b/c Jolly's SLED article will have over 100 images...So, the article will be very long (scrolling wise). I pretty sure I mentioned to him before about small summaries about a project with a few teaser pics and link to his log, I know that's what I've mentioned to the other possible modding authors. Either I didn't mention that to him or he forgot and listed his entire log as an article.

[I.M.O.G.]

We'll see what it looks like and go from there - there is a gallery function we may want to use. There isn't a hard limit, but with most our articles there is a reasonable mix of text and images to break things up.

Also, the image upload issues are all resolved.

[MattNo5ss]

Sounds good, I started inserting his images and stopped b/c I realized how long the article would be. Good job on getting the issues resolved, I'll let Jolly and ehume know.

[Jolly-Swagman]

Thank You I.M.O.G and MattNo5ss,

Image Insertion worked fine Now, Article draft done completed!

[JaY_III]

any way you can work on more than one image at a time?
This is sort of painful only being able to enter a Caption in for 1 image then the web up loader closing. Then restarting all over again

[MattNo5ss]

Yeah, you can enter all the captions and go to "Save All Changes" at the bottom. Just "show" the image, change caption, "show" another, change caption, etc. and when you've changed all of them hit the save button.

96656

[JaY_III]

Still have to insert each on one by one into the post?
With a little Kid (new father) this has taken me way longer than i thought it would....

Any idea how to get images side by side?
Like here for example
http://www.overclockers.com/6870-iceq-turbo-review/
you have a 4x4 block of pics

using the center as per the guide, it stacks them on top of each other

[hokiealumnus]

Still have to insert each on one by one into the post?
With a little Kid (new father) this has taken me way longer than i thought it would....

Any idea how to get images side by side?
Like here for example
http://www.overclockers.com/6870-iceq-turbo-review/
you have a 4x4 block of pics

using the center as per the guide, it stacks them on top of each other

Tables...post #4 (http://www.overclockers.com/forums/showpost.php?p=6352026&postcount=4). :)

[JaY_III]

grrr i must have been doing something wrong as i tried that and a pic had clipping issues. i'll try again

[krag]

Thanks Hokie for this tutorial. Looks like I need to read this in-depth. I tried to start a draft and I feel like a monkey humping a football.

[I.M.O.G.]

Image uploading and stuff can be tricky at first in wordpress - there are multiple little ways to screw it up. It isn't just you krag. :)

I've got an errand to run currently, but will be available later this afternoon and early evening if you want to catch me on IM.

[krag]

OK, if I'm not at work later (boss might call) I'll be around. Still trying to figure out how this football thing works.

[bmwbaxter]

We now have the WYSIWYG ability to use tables to make multiple images per line an easy solution to implement.

...(best guide ever)...

That's it! If you have any questions, feel free to ask.

This helped me so my align my photos and graphs. This is literally going to save me hours on my next review :thup:

[Theocnoob]

Do I have to upload all the images I'll be using to an 'image library' in wordpress before I can use them? I am confused and I was going to write an article.

[MattNo5ss]

Yep, just upload all the ones you plan on using to the article, then you can insert which ever ones you want to use wherever you'd like (you don't have to insert all the pics you upload either). Remember to try to keep images at 800x800 maximum (800x600 is more standard when resizing since pics are usually taken in 4:3 aspect ratio). Also, be sure they have captions and are centered. You can create a 2 by X grid of photos by first creating a centered 2 by X table where you would insert pics into each cell of the table.

[Theocnoob]

Yep, just upload all the ones you plan on using to the article, then you can insert which ever ones you want to use wherever you'd like (you don't have to insert all the pics you upload either). Remember to try to keep images at 800x800 maximum (800x600 is more standard when resizing since pics are usually taken in 4:3 aspect ratio). Also, be sure they have captions and are centered. You can create a 2 by X grid of photos by first creating a centered 2 by X table where you would insert pics into each cell of the table.

After captions you lost me at centered. How do I center them. The table thing isn't going to happen. This has to be simple for me :chair:

[I.M.O.G.]

I am on I'm thru the day if you need help. all day tomorrow, gtalk and aim.

[MattNo5ss]

After captions you lost me at centered. How do I center them. The table thing isn't going to happen. This has to be simple for me :chair:
Hokie's original post guide's you through how to center the images. It's an option you can choose right before you insert the image.

Tables aren't too difficult really. Just put your cursor where you want a table, click the create table button, tell it how many rows and columns, select center, and insert the table. After that just put your cursor in a cell and insert the images as you would anywhere in the article and it will be put in that cell.

[hokiealumnus]

Bump and changed max width to new standard of 1000px. Height remains 800px.

[Bobnova]

ooOOOOoooo. Awesome new awesome sizes are new and awesome!

[MattNo5ss]

Also, remember the 1000x800 will be the size of the pic when clicked on and opened in lightbox. The limit of the thumbnail in the article is still less than 700 pixels wide.

[hokiealumnus]

Yes; if you want graphs to show up in the article without the need for resizing, I'd keep them around 650px wide (reference the 7970 article (http://www.overclockers.com/amd-radeon-hd-7970-graphics-card-review/) for new, improved inline graphs!)

[Bobnova]

TOO MANY RULES. I DO WHAT I WANT!




(Actually I needed a number for inline width. Thanks)