images in wordpress
DESCRIPTION
Adding an image to your Wordpress post or page: which images to use - and which not to use! - how to upload them and which fields to fill in when you upload. Then how to edit an image and get it sitting nicely with your text.TRANSCRIPT
Why have an image at all?
True, you don’t have to have an image but...
- they are eye-catching
- they provide the opportunity to use another keyword in the ‘alt’ tag
- a more visually pleasing post may well get forwarded to friends and colleagues
- a picture says a thousand words so they say...
www.rosemariegant.com
When using images
Please DON’T grab images by copying them from other people’s websites.
You should assume that the copyright of a picture appearing on a website belongs to the website
owner.
You could be in breach of copyright if you use it.Instead...
Use your own photographsor
Purchase image collections, e.g.
http://www.serif.com/AllProducts/Extras/ClipartStockPhotos/
Purchase the rights to stock photos, e.g. http://www.istockphoto.com
www.rosemariegant.com
What size should my image be?
This will depend on your theme. If you have two sidebars or a very narrow page then your images will be smaller than a full width site with one sidebar.
This would be the widest you could have an image in this theme.
How do you know what size that is? There are screen ruler tools such as http://wonderwebware.com/screen-ruler/ or MeasureIt plugin for Firefox: https://addons.mozilla.org/en-US/firefox/addon/measureit/
or you can guess! (see next slide!)
www.rosemariegant.com
Well yes, you can. You see Wordpress will shrink and resize your image for you or you can do it yourself in Wordpress.
But if you can get the image roughly the right size, you won’t take up loads of room on your hosting space unnecessarily.
Guess?!!
Some tips- images straight from digital cameras tend to be huge - reduce both the image and file size if you can.- generally .gif files for drawings and .jpg for photos are small files but still good quality- try www.pixlr.com if you don’t have a photo editor on your computer.- make web images lower resolution, i.e. 100 dpi would be fine - saves files space and reduces likelihood of people copying and printing them.
www.rosemariegant.com
- Open the page or post
- Place the mouse where you would like the image
to appear in the text
- Click on the image button just above the text
box
- Browse for the image
- Click upload
- Fill out the details (see next slide)
Phew, finally add the image to your post!
www.rosemariegant.com
When you have added your image there are all sorts of little boxes to fill in. Don’t ignore these - they contain useful stuff :-)
Title: put something meaningful in English - its good for SEO
Alternate Text: Alt text is what screen readers read out and what those who have turned off images will see, so make sure it makes sense and don't just randomly stuff these fields with keywords. They must be relevant, but don't
miss the opportunity.
Caption: text under your image which may or may not appear on your website depending on your theme, so you may want to leave that blank unless you want
a caption to your image of course.
Description: Appears when you look at your Media Library, so it can be used for notes on your images. Descriptions can also appear when you use galleries
on your site - so if you do use them for notes make sure the note could be published without embarrassment, just in case it is!
Adding the details - pt 1
www.rosemariegant.com
Link URL: if you leave this with the default entry, then people will be able to click on your image to view the image original. If you don't want this, you can click none or Post URL so they can't separate the image from its text. Or you might
want to link the image to a document available for download, or another website, for example.
Alignment: This is to wrap text around your image so if you choose left the image will move to the left and your text will start from the top right corner of the image.
Adding the details - pt 2
This image is aligned to the left so the text wraps around it.
If you don’t want the text to wrap, centre your image.
You choose left, right or centre from the bottom of the image placement box that we have just been looking at.
www.rosemariegant.com
A 'featured image' may be available with your theme.
Some themes use featured images for previewing articles or in slideshows.
If you have a featured image option in your theme, you will see an extra box on the bottom right of your post screen, when you are creating a new post. And you will have an option to use an image as a featured
image when you are loading it.
The best way to work out what it does is to create a test post and preview it on your site.
Featured image?
www.rosemariegant.com
So you have an image in your post.
Now the image is there, move your mouse over it and you will see two boxes come up in the left hand upper
corner.
The right of the two boxes - a red circle with a line through - will delete the image.
Editing a placed image
www.rosemariegant.com
The other one is if you want to edit the image
after you have inserted it. One of the reasons
you may want to do this is padding...
Padding is the space around the image.
If there is no padding then the text will butt right up to the image with no space between the two.
Your theme may well have an option for image padding written in to it already so if you have a nice little gap
between image and text then you are fine. If not you will need to click on the edit image button once you have
inserted an image.
Padding
www.rosemariegant.com
Click on the edit image button once you have inserted an image.
Click 'advanced' and you will see an option for padding.
Unusually padding doesn't require any form of measurement such as cm or px.
It is just a number.
You get two options: vspace and hspace - vertical and horizontal space around the image. And you probably want to go for 5 or 10 as your option. Again this is down to personal taste so see
what works best for you.
Change the Padding
www.rosemariegant.com
So what can you do with the Media Library? Here you can...- edit, delete or view images. If you click the little boxes to the right you can
do this in bulk if you wish.- see which posts and pages images are attached to
- search your images using any of the words in your alt text, description etc.
The Media LibraryOnce you have added an image, it appears in your Media Library (Media button on the left hand menu in your dashboard.
A quick word about “View”. When you “view” an image from here, you will see it as if it was in a page or post on your site.If you want the actual link to your image (perhaps to use in a text box in a widget for example) click to edit the image and you will see the proper image link under “File URL”.
www.rosemariegant.com
Your theme may have the option to change or edit the “banner image” - the one that appears on the top of each page of your site. (Look to see
if you have a theme/options button to do this.).
If it does, when you upload the banner images these will also appear in your media library. If you delete them from your Media Library, they will
disappear from your banner too!
If you want to do things with lots of images on your site, such as create galleries etc, I would recommend using a specific image plugin such as
NextGen Gallery: http://alexrabe.de/wordpress-plugins/nextgen-gallery/
Some final image notes
www.rosemariegant.com