Matthew J. O'Dwyer » Uncategorized

Sample Image Sizes and Alignments

March 10th, 2016

First off, here’s a fast and dirty video I recorded to show how to upload images and to explain some of the options. I apologize for all the “uhms.” I was pretty tired and fighting a cold! Also, at one point I say to not worry about the “image title attribute,” but that is actually pretty handy.

The following images will demonstrate the various size differences and alignments and will be grouped by alignment. The alignments will go from LEFT (text wraps to the right of the image), NONE (text does not wrap around the image), CENTER (the image floats in the center of the column without any text wrapping–not particularly attractive in most cases), and RIGHT (text wraps to the left of the image).

The sizes will go from FULL (the full-sized image is served, but it will shrink down to fit the column–this is not particularly useful since it won’t look different from the LARGE version–if you want people to have access to the full-sized image, you can link to the file, and I would recommend including a note in the “title” option or maybe even in a caption about clicking for the full-sized version), LARGE (a maximum of 640px wide–this is probably the best option if you want an image to fill the column. It will serve a smaller image than the full-sized version, saving bandwidth and making the page load faster, and you can still link to the full-sized version as described above), MEDIUM (a maximum of 320px wide), and THUMBNAIL (160px x 160px–WordPress does the cropping if the image is not already square).

Align left. Full size (shrinks to the maximum width of the column: 640px).

Again, because this is a large image, the coding is squeezing it down to fill the space–which is why the FULL SIZE and LARGE versions look the same on the live page, though you can see a difference in the editor since that window can grow larger than the content area on the live site (which leads me to a tip–resize your browser window while editing a post to make the editing window as close to the size of the content column on the live site as possible so that you can see a closer approximation of what the final product will look like).

Align left. Large (shrinks to the maximum width of 640px wide). I have set it to link to the file, and clicking on it will open up a new window, in which the image will show at its full size. This is useful for high-resolution images that you want people to have access to (such as book covers). I’ve also set up the “title” attribute to direct people to click for the full-sized version. Go ahead and mouse over it to see the message.

From here on out, the body text will be Lorem Ipsum filler text, so all you need to pay attention to are the image captions. When you get down to the images without captions, you’ll see that I added short paragraphs of descriptive text in bold font.

Align left. Medium (shrinks to 320px wide).

Proin non consequat mi. Cras tincidunt quam metus, eu venenatis magna porttitor consectetur. Curabitur ultrices ipsum ut nibh volutpat suscipit. Donec tincidunt neque eu purus pharetra facilisis. Morbi volutpat sagittis accumsan. Proin sit amet maximus ex, a tempor lectus. Nam a felis libero. Vestibulum et consequat justo. Nulla ut sapien non erat placerat consequat ac quis velit. In nec enim mi. Curabitur vel tellus at sapien tristique auctor. Nunc auctor dignissim tincidunt. Curabitur id fringilla nibh. Suspendisse ornare dolor non tincidunt viverra.

Vivamus sodales dui est, ut suscipit eros pretium et. Etiam magna eros, dictum quis urna vel, rutrum malesuada quam. Aliquam condimentum erat ac mauris rhoncus, nec lacinia neque iaculis. Integer sed felis id nulla scelerisque pharetra ullamcorper id felis. Morbi faucibus erat sit amet sapien facilisis, at laoreet leo porta. Phasellus eleifend mi et tellus posuere luctus eu et nibh. Sed et euismod nibh. Sed venenatis magna ac diam dictum aliquet. Maecenas leo mi, posuere porta ante id, sollicitudin condimentum lacus. Fusce tristique felis vel ex consectetur eleifend. Nam suscipit arcu suscipit nibh egestas bibendum. Sed magna purus, aliquet et tempus vel, porta at enim. Fusce pellentesque lacus sit amet tristique sagittis. Aenean sollicitudin dapibus odio in accumsan.

Align left. Thumbnail (crops images that are not already square and shrinks them to 160px x 160px). It might be useful to link to the full image so visitors can see the whole thing.

Align none. Full. (Again, not very useful, and it wastes bandwidth.) Note as well that this looks the same as the left-aligned versions of the LARGE and FULL SIZE versions. Since they fill the whole column, the alignment does not really matter. I’m not going to show any more LARGE or FULL SIZE images since they will look the same.

Align none. Medium.

Align none. Thumbnail.

Align center. Medium.

Align center. Thumbnail.

Align right. Medium.

Align right. Thumbnail. From here on out will be versions without captions.

This is a large image without a caption aligned left. The full-sized version would look the same. This text is simply normal paragraph text with bold applied.

Alt text! This is a medium image aligned left.

This is a thumbnail aligned left.

Alt text!

A medium image with no alignment.

A thumbnail with no alignment.

Alt text! A medium image aligned right.

A thumbnail aligned right.

Tags: artwork, books, fantasy

Posted in Uncategorized | 2 Comments »