Attaching Images to a Post without Inserting Them

There are some themes that ask you to upload images to a Post but not to insert them or to create a gallery. This can be counter-intuitive so here are some step by step instructions for doing this.

Create a new Post or Page or navigate to the Post or Page you wish to edit. Then click on the “Add Media” button.

newpost.03

This will open a new window: Insert Media. To add an image you have not previously used, click Upload Files. You can either drag an image into the drop area, or click Select Files, and chose an image from your computer. You can add multiple images at a one time.

(Note: To attach images to a Post you cannot choose an image uploaded to another Post. Images must be uploaded to the particular Post.)

newpost.01

Once you’ve chosen your image, it should appear as a thumbnail, with a blue box around it. You can now enter any details that you would like to accompany the image.  Under Attachment Details along the right side, fill in the image’s details, such as title, caption, and description. This information will appear with the image depending on how your theme is designed. Be sure to read your theme instructions carefully.

upload_image_without_inserting

Close the image uploader by clicking the “X” in the upper right hand corner. (This is the counter-intuitive part). Do not click “Insert into Post”. The images because they have been uploaded to this Post are now attached to the Post and the images will be displayed according to your theme’s design.

close_image_uploader

Be sure to click “Update” or “Publish” to save changes. Check the Post or Page to view the changed order.

Ordering Images with the 3.5+ Image Uploader

To re-order images click the Add Media button.

newpost.03

Choose “Uploaded to this post” from the drop-down list. Make sure that you are looking at the Media Library screen and not the Upload Files screen.

choose_uploaded_to_this_post

The screen won’t look all that different, but only images in the post will appear.

after_only_uploaded_to_this_post

Next, drag and drop the images to re-order them.

drag_and_drop_image

Close the image uploader by clicking the “X” in the upper right hand corner.

close_image_uploader

Be sure to click “Update” or “Publish” to save changes. Check the Post or Page to view the changed order.

Deleting Images from the Media Library in Bulk

Sometimes you will want to delete images more than one at a time.

Go to your Media Library by clicking the Media button in the left hand menu.

media_button

Find the images you would like to delete, and check their check-box to the left. Choose as many as you would like.

select_images_media_library

Choose “Delete Permanently” from the drop-down list.

choose_delete_permanently

Then click “Apply”.

Note: Please be careful. Images will be deleted without a warning message and cannot be undone. The image files will be deleted from your site. If you have mistakenly deleted images you will have to re-upload them.

click_apply

Selecting a Featured Image with WordPress 3.5+ Image Uploader

Many themes use “Featured Image” as a way for administrators to choose which image represents a post. Frequently the Featured Image will be the thumbnail that represents a Post on a Category table-of-contents page (this is how it works for WPFolio). But they can also be used in slideshows for featured Posts and many other things.

(View instructions for choosing a Featured Image in versions of WordPress older than 3.5.)

To choose a feature image, first select the appropriate post from the All Posts tab on the left toolbar (or start a new one, by selecting Add New).

Click the Add Media button.

Add Media Button

If the image is not already in your Media Library, click “Upload Files” and then “Select Files” and choose the appropriate file on your computer. Be sure to choose “Set Featured Image” from the left hand menu. Once you have selected the image, click the “Set Featured Image” button at the lower right.

WordPress will create multiple sizes of an image, including a thumbnail.

The image below depicts the final steps for choosing a Featured Image, whether you have just uploaded an image or if the image was already present in your Media Library.

Select the image for your Featured Image and then click “Set Featured Image” button at the bottom right.

After clicking “Set Featured Image” you will be returned to the home screen for the Post and the Featured Image is displayed in the Featured Image subpanel in the right hand column.

Voila!

To remove the featured image click “Remove featured image” link and then repeat the process to replace the featured image.

Adding New Images with WordPress 3.5+ Image Uploader

To add a new image into a new post, first click Posts from the left toolbar, then Add New.

Enter the text of your post into the main text box. When you would like to insert an image into the text, click the Add Media button.

This will open a new window: Insert Media. To add an image you have not previously used, click Upload Files. You can either drag an image into the drop area, or click Select Files, and chose an image from your computer.

(To add an image you have uploaded previously, click Media Library, and chose the image from the thumbnails.)

Once you’ve chosen your image, it should appear as a thumbnail, with a blue box around it. You can now enter any details that you would like to accompany the image.  Under Attachment Details along the right side, fill in the image’s details, such as title, caption, and description. (This information will appear underneath the image, in a lightly shaded box.) When you are done, click the blue button: Insert into Post.

This will bring you back to the main New Post page, and your new image will then appear alongside the text you have entered.

When you are done, click Publish.

 

Adding and Modifying Artworks

To add an artwork, first click on Artworks on the left-hand toolbar, then Add New.

 

Enter the title of the image.

Click the Add Media button.

Select the Set Featured Image tab from the left toolbar. (Ignore the other two tabs – Insert Media and Create Gallery – these are for other functions.)

Click on Upload Files to add a new image that has not previously been uploaded. Then click the Select Files button. (To select an image used on the website before, click Media Library, and choose the image from the thumbnails.)

Select the image, click open.

Important Note: Make sure the image DOES NOT EXCEED 700 pixels wide and 550 pixels high. If the file is too big, it will appear too large on the website.

 

Ignore the boxes on the right hand side, you will not be adding a caption here. All you need to do is click on the blue button, Set Featured Image.

This will bring you back to the initial Add New Artwork page, and you can enter the image’s details.

Dimensions: Under Artwork Info, fill in the dimensions in inches. Be sure to spell out the word “inches” completely. Do not use any abbreviations.

Fill in the dimensions in centimeters. Here it is okay to use an abbreviation, such as “cm.”

Genre: From the boxes along the right side, select the appropriate genre. Check only one box. You cannot select more than one genre.

Medium: Select the appropriate medium. There is already an extensive list of media, so you should not have to add a new medium.

Year: Select the appropriate year. You can only select one year.

Optional Steps

Extra Content: Use the main text box to add further content or additional links. For an example, see The Ten Commandments. Underneath the artwork’s dimensions, one can find additional background information on the series, as well as a link to further reading.

Artwork Info: Fill in the photographer, if available.

Keywords: Enter any appropriate keywords that describe the artwork. Since most of his works are untitled, this step is essential. Remember, the purpose of keywords is to make cross-referencing possible, so select words that are already in use. These words will appear automatically when you begin to type.

 

 

Adding Images, Creating a Gallery

Creating a Gallery in 3.5 and above

View a comprehensive look at creating a gallery in WordPress 3.5 and above

Helpful Video Tutorial

Below is a tutorial for creating galleries in WP 3.4 and before.

Steve Lambert’s “WPFolio User’s Manual” also includes instructions on creating galleries.

Create Post

Click on “Posts” in the left hand menu of WordPress.
Click “New Post”

Make sure you choose the category for the post, in the right hand sidebar.

Add a title for the the group of images being uploaded, e.g. “Recent Sculpture”,
“River Series”, etc.

Add Images for Gallery

Click the small image icon above the “post” text box, shown below:

An overlay dialog box appears. Click Select Files

Navigate to the images on your own computer that you wish to upload and select them.
You can select multiple files.

Watch the images as they upload. It will be quick if you have broadband.
Click “Save All Changes” and the screen will refresh in the Gallery tab.

Insert Gallery

I recommend that you leave the Gallery settings, as is. The default works well.
However you may want to change the number of Gallery Columns depending on the layout of your page.

You will return to this screen later to add more information like title, media, size to your images.

Click “Insert Gallery”.

NOTE: In some themes you only upload images but do not “insert Gallery”. In some themes, the uploaded images are attached to the Post and will appear automatically on the front end of your site, without clicking “Insert Gallery”. Please read your theme instructions thoroughly.

After returning to the post page Click “Publish” on the right side of the page.
Click “View Post” to check the page.

In WPFolio with the default installation, you will see a page with several rows of thumbnails cropped to 150 x 150 pixels.
Click the thumbnails and see the lightbox in action.

In other themes galleries may be presented in different ways.


Helpful Videos


Helpful Links

http://wpfolio.visitsteve.com/wiki/instructions/adding-content/
Create Image Gallery – Technostarry

How to Find an Artwork

With hundreds of “Untitled” images, it can be difficult to find the specific artwork you wish to modify. To locate one image without scrolling through the entire archive, use the Filtering function.

First, click on the Artworks tab in the left toolbar.

Along the top of the page are a row of pull down menus. These are what you will use to narrow your search, selecting either genre, medium, date or keyword.

 

For example, if you are looking for a specific lithograph from 1982, you would select “lithograph” from the Show all medium tab, and “1982” from the Show all date tab.

 

Click the Filter button, and your results will appear in a list.

 

In addition to genre, medium and date, you can also search by keyword. Select the keyword you want from the Show all keyword tab, and click Filter.

 

Another way to search is by simply clicking on the category links that appear in blue to the right of the image.

Want to see all the other images that are tagged with “Dancing Dog”? Click the label Dancing Dog, and a list will appear.

To return to the full list of images without any filters, reset the tabs to “Show all” and click Filter again. This will give you back all the images, unfiltered.

 

When artworks do have specific titles, you can find them by typing a search word into the Search Artworks tab in the upper right corner. Keep in mind this tab only searches for words in the artwork’s title, NOT within tagged keywords.

 

 

Deleting Images

You can delete images from the Visual Editor on the Edit Posts or Edit Pages admin screens. I recommend editing images when you they are not being used. I have found that beginners need to upload images many times in order to understand how to use the WordPress interface and then run out of disk space. It is also a good idea to keep your site clean and well-organized as it grows.

There are 2 versions of deleting images. You can delete an image from a Post or Page, in which case it will continue to exist in your Media Library. And you can also delete an image permanently from your Media Library.

1. Deleting an image from a Post.

Navigate to a Post or Page, then click on the image you want to delete and click the delete icon. The image will then be removed from this Post but will remain in the WordPress Media Library.

Be sure to click “Update” or “Publish“, as well, to save changes.


2. Permanently Deleting an Image from the WordPress Media Library.

To view your site’s images click the “Add Media” button.

Add Media Button

In the next screen, select the image you would like to delete and then click “Delete Permanently”. Make sure you are viewing your “Media Library” by clicking the “Media Library” tab at the top of the screen. Optional – If you would like to view only the images uploaded to this post choose “Uploaded to this post” from the drop-down menu.

select_images_from_this_post

Click “OK” in the alert box, to permanently delete the image from your site.

Once deleted close the Media Library by clicking the “X” at the top right.


Deleting Images with the Image Uploader in WordPress 3.4 and below.

To begin navigate to the Post or Page which hosts the image you want to delete>
Click the Upload/Insert icon.

Click the Gallery tab.

Click “Show” on the image you wish to delete.

Once the image and image info is exposed, scroll down and click the “Delete” link.

You are not finished yet. Deleting an image is a two-step process. You need to click “Continue” to confirm the deletion and finally delete the image.

And now you are done and have deleted the image. Repeat the process as needed.

Preparing Images

1) Take hi-res images of work. Take more than one image of each piece, with different lighting, etc.

2) Choose the best images.

3) Create a copy of the chosen image and convert it (File->Save As) into the format of your image editing program. Knight Digital Media has a very good tutorial on exporting jpegs and the difference between “save as” and “save for web and devices”.

Photoshop - Save As

Photoshop - Save As

The format for Photoshop has the .psd extension and the format for Fireworks has the .png extension. Frequently I name my files so that I know which one is a “working” copy, e.g. imagename_work.psd.

NOTE: Do not work on the original image. Keep it, just in case something goes wrong.
And do not work on a jpeg. Jpegs are “lossy” whichmeans every time you save them, data is compressed and lost. The longer you work on a jpeg the more degraded it becomes.

3) Size your image in the working file. Online images should be 72dpi. And for this project images should have a maximum width of 900px and a maximum height of 600px.

4) Color correct your image. In Photoshop use “Adjustment Layers” so changes are not written in stone and can be easily modified. (Fireworks has equivalent functions.)
Work on the image with RGB color, not CMYK.

Color correct for the screen not for print. And remember that different screens, operating systems and browsers render images differently. If you are very fussy about color look at your image on different screens, operating systems and browsers and you will see that color, brightness and contrast will vary quite a bit. When you are color correcting you will have to make a compromise so that the image looks good on the most screens possible. You will not be able to get the color absolutely perfect for all screens, so don’t stress out.

Color Correction and AdjustmentLayers

http://www.zuberphotographics.com/content/photoshop/levels-color.htm
http://www.photoshopsupport.com/photoshop-blog/10/cs5-01/video-adjustment-layers.html
http://help.adobe.com/en_US/Photoshop/11.0/WSfd1234e1c4b69f30ea53e41001031ab64-787ba.html

5) When you are satisfied with the image in your working file, then export (not “save as”) it as a jpeg.

See the next page, Exporting Images, for instructions.

NOTES ON IMAGE EDITING SOFTWARE

An image editing program is needed for image resizing, color correction and conversion/compression to a jpeg. These needs are basic and simple. Operating systems come with simple image-editing programs (iPhoto and Preview on the Mac). Flickr and Picasa have some basic image editing capabilities. Most digital cameras come with a basic image editing program. Photoshop Elements will do the trick. There are many online image-editors and WordPress, itself, can do the some image resizing. (prices and availability may vary in the rapidly changing and developing market…).

THE BIG GUNS
Photoshop – $699 – http://www.adobe.com/products/photoshop/compare/ (also available in Adobesoftware bundles)
Photoshop Elements – $79.99 (after rebate)- http://www.adobe.com/products/photoshopelwin/
Fireworks – $299 http://www.adobe.com/products/fireworks/ (also available in Adobe softwarebundles)

ALTERNATIVE IMAGE EDITORS
Mac Pixelmator – $29 (for a limited time)- http://www.pixelmator.com/
MacIris – $79 – http://nolobe.com/iris/
Acorn – $49 – http://flyingmeat.com/acorn/

Unix,Mac, Windows – Gimp – Free – http://www.gimp.org/

Online -Free – Aviary – http://aviary.com/
Online – Free -Picnik http://www.picnik.com/ – edit photos stored on Flickr, $29 upgrade, available
Online – Free – Phixr- http://www.phixr.com/
Online -Free – FotoFlexer – http://fotoflexer.com/
List of Online Image Tools – http://www.catswhocode.com/blog/super-useful-online-tools-to-work-with-images

List of online image editing
http://mashable.com/2008/03/01/online-image-editing/
http://mashable.com/2007/08/03/online-image-editors/

90+ Online Photography Tools and Resources
http://mashable.com/2007/06/23/photography-toolbox/

Added, just cuz, it’s cool, an online painting tool
SumoPaint – http://www.sumopaint.com/home/