Image Properties

Whenever an image is uploaded into a blog post, an image properties window will appear. There are a few properties to take into consideration whenever applying an image to a post:

Attachment Details

Image Alignment:

An alignment should always be selected when including images in your blog post. Setting the alignment on an image affects where it is positioned and how text flows around the image. It also creates a margin in between the text and the image:

Attachment Alignment Settings

no alignment vs. right alignment
no alignment vs. right alignment

Image Alignment Left:

Align left pushes an image to the left and allows the text to wrap around the image:

Image aligned left in a blog post
example of image aligned left

Image Alignment Right:

Align right pushes an image to the right and allows the text to wrap around the image:

example of image aligned right
example of image aligned right

Image Center Alignment:

Center alignment centers the image and does not allow for text to wrap around the image. Especially, in this case, it is important to place the image between two paragraphs:

image with a center alignment
image with a center alignment

Image Size:

You can set the size of an image to thumbnail, medium, large, and full size. Generally, the best options are either medium or thumbnail. Only choose large size if the width dimensions are 500px or less, otherwise, the image will be too wide to fit on the page.

large image with 500px width
large image with 500px width

For larger images, use fullwidth, which is done by setting the width of the image to 100% instead of a set pixel value. This will expand the image to fill the window and scale accordingly.

Code

<img class=”wp-image-1970 size-large” src=”https://sites.allegheny.edu/web/files/2019/05/8049057482_f6b2a2e003_h-1028×452-1024×450.jpg” alt=”” width=”100%” height=”450″ />

Image Shape:

The Allegheny style guide supports the standard rectangular image shape as well as a circle class shape.

In order to use this feature, use the following code:

Code

<img class=”circle alignnone wp-image-1946 size-medium” src=”https://sites.allegheny.edu/web/files/2019/05/allegheny241-299×299.jpg” alt=”” width=”300″ height=”300″ />

Alt Description:

alt text screenshot

An alt image is a simple description of an image similar to a title and should be included with every image. If an image, for whatever reason, is unable to load, the alt description text will display in its place.

Alt descriptions are also important for accessibility reasons. For example, alt tags assist visually impaired individuals with understanding the contents of a website.