Overview

Our Drupal 10 Franklin theme supports a variety of image sizes. Here is a handy guide to show you minimum and optimal image sizes and proportions.

Table of Contents

Homepage Featured Slides

Standard Image Size:

• Cropping ratio: 10 x 3
• Minimum: 1000 pixels wide by 300 pixels high
• Maximum: 2400 pixels wide x 720 pixels high
• Any image uploaded that is at least 1000 pixels wide and 300 pixels high can be cropped after uploading to the 10 x 3 ratio.

News Articles

Standard Image Size:

• Cropping ratio - For Spotlight (above): 3 x 2
• Cropping ratio - Within Content: none, crop as you see fit
• Minimum: 325 pixels wide by 325 pixels high
• Maximum: 860 pixels wide by 860 pixels high
• Any image uploaded that is at least 325 pixels wide by 325 pixels high can be cropped after uploading to the 3 x 2 ratio for Spotlights.

Banner Image Size:

• Cropping ratio: 7 x 3 and 3 x 2 (for Spotlights)
• Minimum: 680 pixels wide by 280 pixels high
• Maximum: 860 pixels wide x 360 pixels high
• Any image uploaded that is at least 680 pixels wide and 280 pixels high can be cropped after uploading to the 7 x 3 ratio, or 3 x 2 ratio for Spotlights.

Events

Standard Image Size:

• Cropping ratio - For Spotlight (above): 3 x 2
• Cropping ratio - Within Content: none, crop as you see fit
• Minimum: 325 pixels wide by 325 pixels high
• Maximum: 860 pixels wide by 860 pixels high
• Any image uploaded that is at least 325 pixels wide by 325 pixels high can be cropped after uploading to the 3 x 2 ratio for Spotlights.

Personnel

Standard Image Size:

• Cropping ratio - For Spotlight: 3 x 2
• Cropping ratio - Square for the directory and within content (shown above): 1:1
• Minimum: 320 pixels wide by 320 pixels high
• Maximum: 860 pixels wide by 860 pixels high
• Any image uploaded that is at least 325 pixels wide by 325 pixels high can be cropped after uploading to the 3 x 2 ratio for Spotlights or the 1:1 Square ratio.

Basic Pages (and all content types with a text editor field)

Basic pages, and all content types with a text editor field (as in the screenshot below), have the ability to insert images. 

Standard Image Size:

• Cropping ratio - does not apply
• Cropping ratio - does not apply
• Minimum: no minimum
• Maximum: 860 pixels wide by 860 pixels high (full width of content column)
  
  • If you insert an image larger than 860 pixels, Drupal will automatically crop the image. 
    • Excessively large images-- usually greater than 2000 or 3000 pixels-- have been known to "white-screen" the page when Drupal attempts to crop. You may want to process and pre-crop some images, especially if they are straight from a camera or mobile phone.

A note on captions and alignment

If you make use of the caption feature, it will change your image based on how it is aligned.

It is recommended that you choose an alignment when using captions.

You'll have the option to use captions when you insert an image. Notice the checkbox for captions toward the bottom of the screen:

Beneath the image, you'll see a place to add a caption:

I have added the text: "Professor Susan Haire teaching her research methods during a criminal justice class in one of the classrooms in Candler Hall."

Here's how the edit screen looks after I have added my caption. 

After I save my content, the captioned image will take on a certain form based on how I have chosen to align it.

Right or Left Alignment: the image will be 50 percent of column width.

Center Alignment: the image will fill the content column 100 percent.

"None" Alignment: If you don't provide an alignment when you are using captions-- ie, set it to "none"-- you'll end up with extra gray space next to your image, as seen in the below example:

Additional Resources for Working with Images

Adding Images to Content

Optimizing Website Images

Creating/Editing Simple Slider Images on Homepage