How to Add Images in Your Post Content

Round beach rocks in shade - photography by Brent VanFossen.Images, graphics, photographs, drawings, cartoons, badges…our websites are filled with imagery.

This article addresses the techniques used by WordPress for aligning images and image sizing and links in published content. Check your publishing platform for their methods.

Image Terminology in WordPress

There are several terms we need to develop to help you understand how images are used in WordPress. The most important terms describe the images within WordPress based upon how they are used and generated: original image, published image, media file, and attachment image.

The image uploaded to your site is called the original image or image file. When uploaded to WordPress, a minimum of three sizes are automatically created and stored in the wp-content/uploads/ directory on the server. The images are grouped by year then month by default.

The image sizes available for displaying in your content are thumbnail, medium, and full-size. Depending upon the image’s original size, large and x-large may be available. Full-size is the original uploaded image size.

When an image is used on a web page in WordPress, it is typically viewed within the content area of a post or Page. For the sake of this tutorial, we will called this the published image. WordPress makes available the three size options by default.

Image Sizes and Links

WordPress Media Uploader featuring multiple images - screencap by Lorelle VanFossen.

The WordPress Media Uploader redesigned in 2012 now features Attachment Display Settings options. They include setting the alignment of the image, the size of the published image, and the Link To feature. Continue reading

Public Domain, Free Photography and Images for Your Blog

Originally published on Lorelle on WordPress and used here with permission. This list is for my classes and workshops needing public domain, royalty free images for their projects.

Colorful brain scan of a mouse - US Science Departments, public domain photographs

Colorful brain scan of a mouse.

I’ve been collecting a variety of resources for free photographs to use on your website and blog. These images are, for the most part, free to use, but may have copyright and usage restrictions. Some may require registration, use only on non-commercial sites, and/or a link back to the source. Others may require more. Check thoroughly for the specific usage rights before using any of these images.

Just because you select a filter for public domain and royalty free images on a Google Image search does not mean these images are actually public domain and royalty free. Check. Ask first, they might say yes.

is a major resource for images, but many of these have restricted use. Not every image on Flickr or the web is free to use. Check thoroughly for usage rights, and if in doubt, get permission or don’t use the image. Check out Flickr’s Public Domain Photos’ Photostream for images specifically marked as public domain.

Autumn Leaves - Morgue Files - public domain free photographs.The images featured range from people, places, wildlife, and space, as well as textures, patterns, and artistic graphic images. These free photos sites listed may have nude or violent images, though I did my best to exclude image sites which specialize in those.

One of the best, kept up-to-date lists for images and graphics in the public domain for free use is Wikipedia:Public domain image resources. I usually start my search from their list, which includes government collections and resources, special subject-based collections, and more.

Continue reading

How to Create a WordPress Theme Wireframe

WordPress Design Wordle graphicWireframes are website mockups, prototypes, layouts, and doodles. For many, wireframes begin with with pen and paper, others use sticky posts and crayons. More technically inclined folks turn to graphic and design software and web apps to layout the look and feel of a site for themselves or a client.

Wireframes are essential in the process of getting ideas down and the site design fleshed out. They are also critical for working with clients to ensure the designer/developer and the client are on the same page.

However you make your wireframes, make sure they are flexible and easily altered as your site evolves.

A Google search for WordPress and wireframe images turns up some excellent examples.

Here are some articles featuring wireframe tips and resources.