Images get placed on a page with the “IMAGE” block.

You can choose alignment None, Left, Right, and Center. The next release of our theme will add support for align wide, and full width.

TIP: Try to avoid having images flush right or left with text wrapping as this formatting doesn’t work well on mobile. You end up with incredibly narrow line lengths for text, making your site hard to read on mobile.

WordPress also allows you to set the image dimensions to 25%, 50%, 75%, 100% or a set width and height. Make every effort to optimize your image to the desired width and height so images are not scaled “on the fly”. Scaling images in the browser slows down the page load and makes your pages “heavier” with more data to download than needed for the layout.

A student working in one of UVM's laboratories
Paul Bierman Lab

The image above is centered.

Young woman with baseball cap

The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned.

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!

And now for a massively large image. It also has no alignment.

UVM campus in fall, aerial view

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

And now we’re going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there… Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah… Just like that. It never felt so good to be right.

And just when you thought we were done, we’re going to do them all over again with captions!

University of Vermont seal

The image above happens to be centered. The caption also has a link in it, just to see if it does anything funky.

The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned.

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!

And now for a massively large image. It also has no alignment.

UVM campus in the spring

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

Skip to toolbar