Sizing and alignment
Images on the website are one of four different sizes – 100%, 50%, 25%, or thumbnail – and use one of three different alignments – left, right, or center.
Note that you shouldn’t use one of these sizing or alignment classes to create text columns. Instead, learn about making columns. And vice versa, don’t use columns to align images.
100% width images
100% width images should be landscape (horizontal) orientation, and ideally no taller than 450px. Portrait (vertical) orientation images are too tall and take up too much space on the page when 100% width.
- Minimum image width for pages without a sidebar: 1000px
- Minimum image width for pages with a sidebar: 650px
100% alignment options
- Yes: Center: Recommended for most images, should be landscape (horizontal) orientation.
- No: Right and left: You can’t align an image to the right or left that is full-width!
100% responsive behavior
These images are 100% width on desktops, tablets, and phones.
100% development info
- Stylesheet location:
/_source/styles/components/_images.scss - In WordPress, choose “Align center” and “Size: 100%” in the “Add Media” window or when editing an image on a page.
- Your image will need to be at least 1000px wide. If it’s smaller, “Size: 100%” won’t show up in the options.
- Learn about adding images in WordPress in Spaces.
- 100% width class:
<img class="size-percent-100"> - Align center class:
<img class="aligncenter">
100% example
This is text on the page. The images align to the left, right, or center, and the text wraps around them as needed. If the text is longer than the image is tall, it will flow around the bottom of the image and span the full width of the page.
This is text on the page. The images align to the left, right, or center, and the text wraps around them as needed. If the text is longer than the image is tall, it will flow around the bottom of the image and span the full width of the page.
50% width images
50% width images can be either landscape (horizontal) or portrait (vertical) orientation, and can be any height.
- Minimum image width for pages without a sidebar: 500px
- Minimum image width for pages with a sidebar: 350px
50% alignment options
- Yes: Right: Recommended, can be either landscape or portrait orientation.
- No: Left: Only for special cases (like a logo), should be portrait orientation or square.
- No: Center: Only for special cases (like a logo), should be landscape orientation.
50% responsive behavior
These images are 50% width on desktops and tablets. They switch to the width of the image file (up to 100% the screen width) on phones. They are centered on small screens, regardless of alignment or size.
50% development info
- Stylesheet location:
/_source/styles/components/_images.scss - In WordPress, choose “Align right” and “Size: 50%” in the “Add Media” window or when editing an image on a page.
- Your image will need to be at least 500px wide. If it’s smaller, “Size: 50%” won’t show up in the options.
- Learn about adding images in WordPress in Spaces.
- 50% width class:
<img class="size-percent-50"> - Align right class:
<img class="alignright">
50% example
This is text on the page. The images align to the left, right, or center, and the text wraps around them as needed. If the text is longer than the image is tall, it will flow around the bottom of the image and span the full width of the page.
This is text on the page. The images align to the left, right, or center, and the text wraps around them as needed. If the text is longer than the image is tall, it will flow around the bottom of the image and span the full width of the page.
25% width images
25% width images can be either landscape (horizontal) or portrait (vertical) orientation, although portrait is ideal (landscape photos at this width will be very small).
- Minimum image width for pages without a sidebar: 250px
- Minimum image width for pages with a sidebar: 175px
25% alignment options
- Yes: Right: Recommended, should be portrait orientation (landscape is often too small).
- No: Left: Only for special cases (like a logo).
- No: Center: Centered images that are this small look silly.
25% responsive behavior
These images are 25% width on desktops. They switch to the width of the image file (up to 50% of the screen’s width on tablets and 100% on phones) on medium and small screens. They are centered on small screens, regardless of alignment or size.
25% development info
- Stylesheet location:
/_source/styles/components/_images.scss - In WordPress, choose “Align right” and “Size: 25%” in the “Add Media” window or when editing an image on a page.
- Your image will need to be at least 250px wide. If it’s smaller, “Size: 25%” won’t show up in the options.
- Learn about adding images in WordPress in Spaces.
- 25% width class:
<img class="size-percent-25"> - Align right class:
<img class="alignright">
25% example
This is text on the page. The images align to the left, right, or center, and the text wraps around them as needed. If the text is longer than the image is tall, it will flow around the bottom of the image and span the full width of the page.
This is text on the page. The images align to the left, right, or center, and the text wraps around them as needed. If the text is longer than the image is tall, it will flow around the bottom of the image and span the full width of the page.
Thumbnail images
Thumbnail images can be used for things like biography images or logos. Don’t use the thumbnail size for regular images meant to show off your program or organization – they’re too small to display much detail. WordPress crops thumbnail images to square regardless of the orientation.
- Minimum image width: 150px
Thumbnail alignment options
- Yes: Right
- Yes: Left
- No: Center: centered images that are this small look silly
Thumbnail responsive behavior
Thumbnail images never get larger than 150px wide or tall, even on small screens. However, they are centered on small screens regardless of alignment.
Development info
- Stylesheet location:
/_source/styles/components/_images.scss - In WordPress, choose “Align right” or “Align left” and “Size: Thumbnail” in the “Add Media” window or when editing an image on a page.
- Your image will need to be at least 150px wide. If it’s smaller, “Size: Thumbnail” won’t show up in the options.
- WordPress will crop the image to a square, so either upload a square image or make sure the important part of the image is in the center.
- Learn about adding images in WordPress in Spaces.
- Thumbnail class:
<img class="size-thumbnail"> - Align right class:
<img class="alignright"> - Align left class:
<img class="alignleft">
Thumbnail example
This is text on the page. The images align to the left, right, or center, and the text wraps around them as needed. If the text is longer than the image is tall, it will flow around the bottom of the image and span the full width of the page.