WordPress School: Images

In the previous Lorelle’s WordPress School tutorial we covered preparing images for uploading to WordPress. Today’s lesson is on how to upload and embed the images in posts and Pages.

As a reminder, the sequence and data required for uploading an image to WordPress is:

1. Using the Media Uploader in a post or Page, the image is copied and transferred into a folder (directory) on your web host server typically named for the year and the month (wp-content/upload/2015/02/).
2. The following information is collected and stored in the WordPress MySQL database. WordPress stores the file name as the title (database unique key) and sets the image size options based on the full-size of the image (the largest the image maybe displayed):
   • Location of image file
   • Date and time of upload
   • File name
   • File size
   • File type
   • Dimensions

I’ve spelled out most of the information you need to know about uploading and managing images in WordPress in “How to Add Images in Your Post Content.” In this tutorial and assignment, I will go into greater depth about the things you need to know about the process.

Also note that images on the web come under international laws for web accessibility. While these laws are not strictly enforced yet in the United States, they are elsewhere in the world. The laws apply to commercial websites owned and produced by public agencies and companies, non-profits, and companies either representing or affiliated with government agencies and offices. Personal and private websites are not impacted by the laws in general. Still, like speeding, while everyone speeds, ignorance of the law is no excuse. We learn it like everything else.

The way WordPress handles media is always a work in progress. The instructions on this tutorial should be fairly consistent but the interface is subject to change, especially the names of buttons or links. The core features remain the same, so look for the feature and know the name might be different.

Instructions for Uploading an Image to WordPress Posts or Pages

The simple instructions for uploading an image to WordPress posts or Pages is:

1. Place your cursor at the start of the line where you wish the image to appear
2. Click the Add Media button above the toolbar
3. Choose from the following methods:
   1. From a file management program on your computer, click and drag the image files to the Add Media screen
   2. To upload files through the browser, go to the Upload Files Tab at the top. Click Select Files.
4. Once uploaded, go through the specifics for the Attachment Details listed below and fill out each appropriate settings and field.
5. Once completed, ensure the right image is selected and click Insert Image

There are several names for the WordPress features encountered in this process:

• Media Library: This is the name of the “library” in the WordPress Admin where you may view all the images uploaded to your site. While many think of this as “where the images go when uploaded,” the truth is that the images are uploaded to the server and the data collected is stored in the WordPress database. The Media Library generates a list of the images and offers options for editing the attachment details, editing the image, and deleting the image. Click on an image or file to see its Attachment Details.
• Media Uploader: Technically, the process of uploading the images and media to WordPress is the function of the Media Uploader. It consists of the elements to which you add images for uploading. You will often see it referred to in documentation with instructions such as “upload images and media through the Media Uploader” as opposed to uploading them via FTP Client, the original method in WordPress many years ago.
• Media Manager: While names get used, abandoned, and restored in WordPress over the years, references to the Media Manager is the overlay screen to which you upload images and select them for embedding in your post or Page. Most refer to this today as the Media Library but the screen is different from the Media Library screen. The Media Manager is directly associated with the post or Page you are writing or editing. Click on an image or file to see its Attachment Details. You may restrict the images on the screen to those previously uploaded to this post or Page by clicking the drop down box.

The Attachment Details

Each image in WordPress maybe attached to a post or Page, linking that image with the content topic. The Attachment Details are not about the process of attaching the image to the post or Page, though it is a part of the process. The Attachment Details are the specifics of the image as required by WordPress, international web accessibility laws, and your own site needs and purposes.

Let’s go through each of these one by one. Don’t be overwhelmed by them. Within short order, this will become second nature.

The first section of the column on the right of the Media Uploader/Manager is labeled Attachment Details. The second lower section, often overlooked, is the Attachment Display Settings. I will cover both sections.

URL/Filename: This is the direct address to the file. If you will be putting the file in a Text Widget later, this is one way to access the file address for the image or file.

Title: Required by WordPress, this information is stored in the database along with a link to the actual file. The title is the name of the image, not necessarily the description. WordPress automatically captures the file name, and if the image is set as an attachment, clicking the link will take the reader to a new web page featuring the image and the title will be featured as the web page title, which is why files should be properly named before uploading. You may change this to something more descriptive and appropriate. Think of the title as the name of the artwork like “The Mona Lisa by Da Vinci.”

Caption: If desired, the caption is to be set here. The caption is optional. In general, captions are necessary if the image requires explanation to the reader or features specific people and locations that must be identified as part of the purpose of the article.

Alt Text: This area is required by US and international laws for web accessibility for all commercial, non-profit, and government websites. It is also a good habit and improves your SEO.

The Alt Text is the alternative text, words that describe the image to those with vision impairment. It is a short sentence that should start with a capital letter and end with a period that describes what the image looks like such as “Children playing in the sand on beach in Manzanita, Oregon, silhouetted against the bright orange sunset.” Web browsers display the Alt Text as a hover balloon tip or in the status bar when hovering over the image. WordPress displays the Alt Text as a subtitle on attachment pages.

Description: The Description is optional and rarely necessary. It is used to explain in greater detail the description of the image such as a chart, graph, or complex image. WordPress automatically generates a text file storing this information that is read by screen readers, and displays the description as the post content on attachment pages.

Attachment Display Settings > Alignment: This set the image to float to the right, left, or center with the text wrapping around the image, or none, in which case the image sits there on the same line as the text or on its own line.

Attachment Display Settings > Link To: if the media is to be wrapped in a link, this is where that information is set. There are several options:

1. None: No link will be placed around the image.
2. Media File: This is for downloadable files such as PDF, docs, spreadsheets, text files, MP3, etc. Avoid using this option with images. If used with images, a click on the image in the post or Page will take the reader to a blank web page with only that image, no site navigation, branding, or design. See below for more information.
3. Attachment Page: Use this one for all images, especially those that are resized on the post or Page. The reader will click the image to be taken to a new page featuring the title, image, Alt Text, and description (if available) within the WordPress Theme where people may comment on the image. It literally generates a new web page on your site, opening up more opportunities for interactivity and SEO.
4. Custom URL: If you wish the file or image to direct the reader to a web page or website on or off your site, place the URL/Address here. This is ideal for calls-to-action images and badges.

Attachment Display Settings > Size: This sets the size of the image as displayed within the content.

In general, complete the following fields:

1. Title
2. Alt Text
3. Alignment
4. Link To (Attachment or none are the most common choices for images)
5. Size

Images Sizes and Alignment

When preparing your images for uploading to WordPress, you should have taken the image and file sizes into consideration. These sizes impact the alignment options in your post or Page.

The following is the 60% Guidelines for images published on the web:

• If the image is 60% or less the width of the content column, set the image aligned to the right or left with the text wrapping around.
• If the image is 60% or more the width of the content column, set the image size to full and the alignment to center.

This information was highlighted in the WordPress Publishing Checklist and elsewhere in this course and the 60% guidelines for images has withstood the test of time in web publishing.

What it means is that the image you uploaded must meet the minimum and maximum requirements for desired placement in your post or Page.

If the image is 60% or less the width of the content column, and you center it, the image will be lost on the page, a tiny postage stamp on its own line. Make all image widths for centered images the width or the content column or wider.

If the image is 60% or wider than the content column and you wish the content to wrap around it, if your content column is 600 pixels wide and the image you embed is sized to 550 pixels, what letters may fit in the last 50 pixels of space (a thumbnail’s width) won’t be very readable. Reduce the embedded width to something narrower.

Things to Consider When Uploading Images to WordPress

Below is a list of things to consider when uploading and embedding images into WordPress.

Why Can’t I Use Media File for Images?

This is an example of an image linked to a media file. Check the images above as examples of images linked to attachment pages.

Media file is the default setting for the WordPress Media Uploader/Manager. I wish I could permanently set it to be Attachment. Until we have that option, you have to set this manually.

Media files include images, but the way that WordPress handles them best, media files are downloadable files such as documents, pdf, mp3, etc.

When you use the Media File Link, a link is placed around the image. When the image is clicked, it takes the reader to a blank screen with the enlarged image.

When you use the Attachment Image Link, a link is placed around the image that takes the reader to a screen featuring your site’s design and WordPress Theme on an Attachment Page. Your branding and the ability to comment on the image is preserved, increasing interactivity opportunities as well.

Why miss an opportunity to connect more with your readers and frame the image with your copyright and site identification?

Size Matters

As mentioned in the tutorial on preparing your images, avoid uploading images larger than necessary by width and file size. A 4 megabyte file that would print out at a size to cover your garage door is ridiculous for someone viewing that same image on a moderately sized computer screen, tablet, or even smaller smartphone.

Both the size of the image file and the physical dimensions of the image impact your website’s page loading and server space.

An image set to 800 pixels wide and 100K file size will always load faster than an image set to 3000 pixels wide and 2000K file size. Search engines now evaluate a site based upon its loading speed, and readers hate waiting for images to load, especially on slower Internet connections.

The free plan for WordPress.com includes 3 gigabytes of storage space on its servers per website. Do the math on how many images you could host at 100K compared to 5 megabytes each. The size of the images impacts the amount of storage space used on a web host server.

Do I Have to Add the Titles and Alt Text?

You do not have to add the titles and alternative text for images. If your site is a business or commercial site, and any site that sells anything, even one thing, or features income producing ads for the site author/owner, is considered a commercial site, a non-profit, or government-related agency, the answer is yes.

Think about the bigger picture. While the statistics wander, estimate that 1 in 4 people visiting your site has some form of disability. I’ve heard many people make sweeping assumptions that they don’t have disabled folks on their site. “It isn’t of interest to them.” I am required to wear glasses, considered a disability as I require an assistive device to see and read. Me and millions of others. If we take all the eye glass wearers and those requiring larger type to read without glasses into consideration, odds are that this number is 1 in 2 or better.

By providing web accessibility features on your site through links and images as well as design elements, you help most of us access and read your site better. By describing the image in the ALT, you give a contextual description of the image for those having trouble seeing the image or using a screen reader or other device to access and read your site on the web.

We will cover more on web accessibility later in this course, but think about it as you go forward when I mention it. As with all things on the web, since we aren’t there in person to make a good impression, it is the details that matter, and these are the details that matter to many.

Upload via Media Library or Post or Page?

This is a question that challenges many WordPress users. It makes sense to upload all the images you think you will be using for a variety of posts and Pages to the Media Library prior to creating the content. They are there ready to use. However, WordPress automatically attaches images to posts and Pages by a linked relationship when uploaded through the content. These attachments are not present when uploaded through the Media Library.

When attached to a post, the image’s attachment page is linked to the attached post such as example.com/2015/02/03/test-post/trees-in-snow/. If that image is then used on another post as an attachment, the attachment link won’t change. It will stay the same, linked to the original post. The image floated to the right in this section is attached to another post, not this one. Click it and you will see the link change to reflect the original post.

While it doesn’t matter in general, click the next and previous images in the attachment page. The web page moves from the next and previous images in the original attached post, not this post. The images become like an album, a collection of images associated with a specific post or Page. Click one of the images attached to this post and you will find other images in the sequence related to this post.

Images uploaded directly to the Media Library have no such attachments, but you may attach an image to the post.

Unfortunately, once attached, there isn’t a simple way to unattach an image, a feature many think is a bug or overlooked detail in WordPress. The Unattach and Re-attach Media Attachments WordPress Plugin allows those using a self-hosted or managed version of WordPress to have both options.

Which do you choose? It’s up to you. If the attachment sequence matters to you, grouping the viewing experience of images within a post or Page together as attachment Pages, then upload through posts or Pages. If not, upload your images in whichever fashion works for you.

For more information on image attachment links, see:

• Using Image and File Attachments – WordPress Codex
• What is an Attachment in WordPress?
• Awesome Image-Attachment Recipes for WordPress – Digging Into WordPress
• How to Disable Image Attachment Pages in WordPress – WPBeginner
• The Problem With Image Attachments In WordPress – WPTavern

More Information on Adding Images to WordPress

• Check Out the New Media Manager in WordPress – Lorelle on WordPress
• Images — Support — WordPress.com
• Image Settings — Support — WordPress.com
• Image Alignment — Support — WordPress.com
• Inserting Images into Posts and Pages – WordPress Codex
• Using Images – WordPress Codex
• Using Image and File Attachments – WordPress Codex
• Styling Images in Posts and Pages – WordPress Codex
• Manipulating Images – WordPress.com VIP
• Image Editing — Support — WordPress.com

Assignment

Your assignment is to edit the second post in your article series and add three images:

1. One image no wider than 60% of the content column width aligned to the right
2. One image no wider than 60% of the content column width aligned to the left
3. One image the sized the full width of the content column aligned center

You may incorporate other images into the tutorial where and how you feel is appropriate, experimenting with placement and alignment.

Experiment with adding a caption to one or more images.

Remember, all images must be royalty and copyright free or original, and all images are required to have titles and alt text. Failure to do so in my workshops and college classes is an “instant fail.” Just ask my students. 😀

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

• Lorelle’s WordPress School Introduction
• Lorelle’s WordPress School Description
• WordPress School Tutorials List
• WordPress School Google+ Community
• WordPress Publishing Checklist
• How to Give Feedback and Criticism

---