How to Pick and Insert a Featured Image

[MattNo5ss]

I'm posting this to help people decide on what image they want to be featured on the frontpage. The following is what I go through in my head when picking a photo to feature. However, I've never written it all down like this, and my decision has just been based on seeing so many images and what they look like featured. I've always just picked an image with what I want featured centered horizontally, but a little above center vertically. Now, I have a little more exact method than the eyeballin' I've been using.

Also, if you have a pic that would be nice to feature but doesn't meet the following criteria, then you can always edit the photo to get what you want in the photo where you need it so that it will look good as a featured image.

First, we need to know the size of the image on the frontpage. It looks to be around 700x250 pixels. I did a print screen of the frontpage, cropped to the featured image, then checked the image dimensions to get this measurement.

102146

Next, we need to know the area of the original picture that is displayed on the frontpage. I'm pretty confident that it shows the center of the picture regardless of original picture size, after seeing so many featured images and double checking. So, now the 700x250 pixel center of the picture will be displayed. Measuring from the center lines of a typical 800x600 image we get something like this:

102144

Another thing to remember is the black pop-up with the article title and excerpt (denoted by dark gray). It seems to take up the bottom 70 horizontal lines of pixels; I got this measurement by print screen and cropping too. That means we want our good part of the image to be in the top 700x180 part (denoted by light gray).

102145

[Bobnova]

That's awfully sciency there matt

I'll keep it in mind when I'm taking pictures so I can be sure(ish) to get one that'll work nicely in 700x180+70.

[MattNo5ss]

I thought it would be good to post up since we can't actually preview how the articleimg will look before publishing. Hopefully this can help us make a good decision... It sucks when you see an image that would look awesome featured, but when you use it, the awesome part isn't displayed...

Eyeballin' can work okay too. Just pick an image with what you want featured in the middle of the photo and preferably a little higher than center.

[Seebs]

A bit of checking on the CSS for the section shows me that the carousel is indeed 700x250 pixels in dimensions.

The bottom part (dark gray with the title and description of the post) is 700x70 pixels in dimension.

I also found that the images shown on the carousel are crops of one of the images from the article/post. They look like this:


hxxp://www.overclockers.com/wp-content/uploads/2011/12/Featured-1.jpg


Here is where the hitch comes.

If you guys are not doing the cropping on your own and letting the jQuery carousel do it for you; there will always be situations where the image shown will not be the best possible.

Why don't you guys simply take the picture that you want featured and make a crop of it to the size that the carousel uses (700x250), upload that picture along with the normal ones and set it as the "featured" image?

You don't even have to publish that picture on the body of the article and it still can be used as featured.

A very easy way of making sure that the images going to the carousel look good is to follow the "Rule of 3s".

You can use the image below as a template. Just edit/crop one of your pictures so that whatever you want your audience to "focus" on is on or around the 4 dots. :D

102196

Hope this helps.
Sebas

[MattNo5ss]

Thanks for confirming the 700x250 and 700x70 image sizes!


I also found that the images shown on the carousel are crops of one of the images from the article/post.

If you guys are not doing the cropping on your own and letting the jQuery carousel do it for you; there will always be situations where the image shown will not be the best possible.

Yep, that's the reason for posting about this, since we can't preview how the image will look in the carousel. We usually just use an image in the article without cropping, so the carousel shows the middle 700x250 of the pic. My 2nd image shows what part will be featured if a 800x600 image is used as the featured image, instead of a 700x250 one.


Why don't you guys simply take the picture that you want featured and make a crop of it to the size that the carousel uses (700x250), upload that picture along with the normal ones and set it as the "featured" image?

You don't even have to publish that picture on the body of the article and it still can be used as featured.

This is what I did on mudd's article yesterday. I cropped a 700x250 part out of one of his images, making sure the good part was in the top 700x180, and uploaded it as a separate image. :D

[EarthDog]

Nice to have some EXACT numbers on this....eyeballing seems to have worked well for the most part, but this is perfect. :)

[I.M.O.G.]

Thanks for sharing Matt. :)

Unfortunately as we editors know, there are some things like this we don't have a good way of automating or helping all our authors to do consistently. The instructions can be tedious for a new author who already has to deal with Wordpress often for the first time... Usually for anything on the frontpage where we end up in this situation, it naturally ends up becoming a lead editor sort of task.

So your instructions make it easier for us to do, and maybe we can tip off our regular writers to them also to make it a bit easier on ourselves. Nice work. :)

PS. Things like this always make me wish we had some solution that was automatic and easy. Not sure how to make that happen, maybe this is just another one of those "little things" that add up on the editorial workload.

[MattNo5ss]

This was meant to help the editors mainly, but if the authors feel up to task I won't complain :D

I started messing around with this b/c there's no preview of the carousel with the articleimg. One of the guys said that sometimes he'll change the featured image a few times right after publishing to get the best one.

[MattNo5ss]

Figured I'd add this small section about inserting the image for reference.

How to Insert the Featured Image

Upload the image like normal and copy the image's URL.

108330

Go to the Custom Fields module and do the following


Select articleimg from the drop-down menu
Paste the copied URL into the Value box
Click Add Custom Field
The custom field should be added to the top of the module

108327

[Bobnova]

I was wondering how it was done. Thanks!

[MattNo5ss]

No prob, I couldn't find it referenced anywhere else. I thought it was in the uploading images thread by hokie, but I didn't see it.

[EarthDog]

Excellent.. thanks Matt!

[capttripppp]

Thanks Matt! I searched high and low before I asked you about it

[MattNo5ss]

I figured you did. Since you didn't find it, that probably meant it wasn't out there.