Finding photography that is free and clear to use, meets brand guidelines and is visually interesting can be quite a challenge. A good place to start is University Marketing's brand photos repository. These are original sized photos, so they need to be resized and compressed for the web.
There are also stock photography websites that provide free photographs:
When possible, align with the university's photography brand style when selecting images from 3rd party repositories.
Looking for something else? Let us know.
Sizing Images in Drupal
With Layout Builder, there are more options for sizing, so this guide can't cover every possibility. These are guidelines as a way to get started, but images may need to be resized multiple times to get it just right. If you're having trouble, come to Open Lab for some help.
OSU Hero
Images should be at least 1900 x 800 pixels. The OSU Hero in the Layout Library defaults to 800 pixels high. But, with Layout Builder you can now select the height that you want. The possibilities are endless! This is a good starting size, but you may need to adjust it based on your specific photo choice.
Don't forget to check how your photos looks on mobile. There is now a built-in tool with Drupal 9 in the upper right of the admin bar. Click the phone icon to select one of the common device sizes to preview what your page looks like.
Full Width Cheat Sheet
- At least 1900 pixels wide. If a photo is smaller than that, it may appear blurry at larger monitor sizes.
- The height is up to user preference. There isn't a set height for a full width layout. The default height is 800 pixels, but it can be adjusted.
Settings for the section above:
- 1 column
- Edge to edge
- No gutters
- 200 pixels tall
- Fixed background: this setting gives the effect of the photo moving while scrolling
Shorter sections can be used to break up a page as needed and add a visual aspect to a section with a lot of copy.
2 Column Image Sizes
For a 2 column background photo, a good starting place is 800 x 600 pixels. The height of the background photo will be controlled by the amount of text in the block next to it. So if this block has a lot of text, the background image next to it will need to be sized larger. The height of the block can also be controlled in the sizing settings. Since background images set to cover will stretch to fill the space they are in, you can control how your background images behave. Mozilla's MDN documentation has an example of how background sizing works.
For a photos added via the CKEditor, you can size your images to whatever desired result. They don't stretch to fill a space, so there is less of a worry of them appearing blurry.
Inline vs Background Images
An inline image (photos added via the CKEditor) won't ever get cut off. It will size down based on the size of the screen.
Use an inline image for portraits, to ensure that people don't get any part of them cut off.
Background photos by default will fill the space that they are in, but there is a bit of nuance to this. Just know that background images can cut off parts of the image depending on the screen size. They are generally best for decorative images.
This is an inline image that is 800x533 pixels.
2 Column with Background Image
This 2 column layout option includes an option to add a background image to either side and it will fill the height of the space. If this block has very little text, it won't be very tall. With the added filler text below, it will force the image to fill the space.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus urna et pharetra pharetra massa. Egestas sed tempus urna et. Lacus suspendisse faucibus interdum posuere. Nulla pharetra diam sit amet nisl. Nunc sed blandit libero volutpat sed cras ornare arcu dui. Duis ultricies lacus sed turpis tincidunt id aliquet risus. In egestas erat imperdiet sed euismod nisi. Nullam non nisi est sit amet facilisis magna etiam tempor. Ante in nibh mauris cursus mattis molestie. Morbi quis commodo odio aenean sed adipiscing diam donec. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Id diam vel quam elementum pulvinar etiam non quam lacus. Elementum tempus egestas sed sed.
Libero nunc consequat interdum varius sit amet. Nibh ipsum consequat nisl vel pretium lectus quam id. Dictum fusce ut placerat orci nulla pellentesque. Justo eget magna fermentum iaculis eu non diam phasellus. Id venenatis a condimentum vitae sapien. Neque ornare aenean euismod elementum nisi quis eleifend quam. Ornare arcu odio ut sem nulla pharetra. Libero justo laoreet sit amet cursus. Vel pharetra vel turpis nunc eget lorem. Est ultricies integer quis auctor elit sed vulputate mi. Amet mattis vulputate enim nulla. Consectetur adipiscing elit ut aliquam purus sit amet. Quam pellentesque nec nam aliquam sem. Tortor at auctor urna nunc id cursus metus. Tellus in metus vulputate eu scelerisque felis imperdiet proin fermentum. Vel facilisis volutpat est velit egestas dui id.
3 Column Image Sizing
Consistency is key with 3 columns. You want to size your images all the same height and width for a clean look.
Some common sizes:
- 400x400 pixels
- 800x600 pixels
3 Column Images
This is a great place to use square photos, which is a quick and easy way to create a consistent layout. You can use any ratio you'd like, but we recommend you use the same size for each photo.
These photos are 400 x 400 pixels.
Spacing between photos and text
For this layout, the image and text are in separate blocks. The spacing between the image and the text can then be controlled by the margin and padding option in the Style tab.
These text blocks have 16 pixels of padding at the top to provide spacing.
Title Here
Donec magna quam, lobortis vitae eleifend a, rhoncus et urna. Nam convallis est quam, sit amet vestibulum risus lacinia sit amet. In lorem libero, fermentum pharetra orci eget, convallis venenatis mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque tristique viverra metus, eu mattis mauris rhoncus eu.
These photos are 800 x 533. The original image aspect ratio was preserved.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fringilla est ullamcorper eget nulla facilisi. Vestibulum lectus mauris ultrices eros in cursus turpis. Eros donec ac odio tempor. Viverra orci sagittis eu volutpat odio. Consectetur adipiscing elit duis tristique sollicitudin.
Egestas diam in arcu cursus euismod quis viverra nibh cras. Quis commodo odio aenean sed adipiscing diam donec adipiscing. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Viverra aliquet eget sit amet tellus cras. Lorem ipsum dolor sit amet consectetur adipiscing.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At quis risus sed vulputate odio ut. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Pharetra sit amet aliquam id diam.
4 Column Photo Sizing
Photos for 4 columns can be sized much smaller. Just like the 3 column, consistency is key. The photos below are all sized at 300 x 300 pixels. You could do multiple sections of 4 photos to create a photo grid.
Image Positioning
You can choose where a background image gets its focus. By default it will focus on the center of the photo, both horizontally and vertically. But if you have a subject to the left or right or top or bottom, you can focus the image at those points.
This section has the position set to the top center. If it is set to center for both horizontal and vertical, the top of the building is cut off at larger screen sizes.
This section contains the same photo, but the position of the background image is set to bottom center. Notice how the top of the photo is cut off at larger screen sizes (1920 pixel wide).
This option will give you more control over the placement of your background photos.