Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Insert excerpt
Complexity
Complexity
nameIntermediate
nopaneltrue


Info
titlePermission Level

Level 2 or Higher - See permission level document for details

Shortcomings of

automatic image cropping on sites

Automatic Image Cropping on Sites

If you are looking for help with optimizing your images because the file size is too big, please read this document about Photoshop: Resizing and Optimizing Large Images

With images, your site does a lot of automatic cropping and sizing to create consistency throughout. 

Image RemovedImage RemovedImage AddedImage Added


The problem is, some of this auto cropping doesn't do a good job. An image that looks good in the directory as as a square shape, may not look so great when it appears in a spotlight with a 3:2 ratio. 

Image RemovedImage Added

We've installed some functionality which will give you more control -- (if you want it-- ) of how images appear throughout your site: in directories, in spotlights, and with regular content.

Steps

Table of Contents

Table of Contents
minLevel2

How to

make use

Make Use of the

new cropping functionality

New Cropping Functionality

Here's an example on the Chemistry website.

There's a guest speaker coming to campus soon, but the site's automatic cropping has cut off his chin and part of his mouth. 

Image RemovedImage Added

Visually, it is better to trim the head than the chin, so we're going to fix this image. 


Step 1

)

: Click on the

content where

Content Where the

image

Image is

coming from

Coming From

Notice how the image appears differently when it is not in a list?

Again, this is because we employ different image styles and automatic cropping throughout the site, and it doesn't always work well.

Image Removed

Image Added

Step 2

)

: Click

"

on 'Edit

."

'

We'll check out this new cropping functionality.

Step 3

)

: Scroll

down

Down to the

image field

Image Field and

click

Click the

dropdown.

Dropdown

Notice the "Crop Image (Cropping applied)" dropdown. This is new.

Image RemovedImage Added

Click the "Crop Image (Cropping applied)" dropdown.

4)

Step 3: Crop Image

Adjust the blue box to change the cropping for option. 

For this image field, there are two options: "Crop 3:2 Spotlight" and "Free Crop." 

The "Crop 3:2 Spotlight" will determine how this image will appear in spotlights and lists-- like the list of upcoming events-- throughout the site. 

It is set to an aspect ratio of 3:2 but you can decide what is the focus. 


Notice the blue box. This determines what part of the image will show. Notice how his chin is cut off. Visually it is always preferable to trim heads than chins.

I'm going to drag the blue box down a little.

Image RemovedImage Added


Notice that if you shrink the image, the blue box eventually turns pink. This is the "soft limit." It's letting you know that your image will be less than the preferred size, so it may appear slightly blurry or pixelated (but Drupal 8 will still try and make it work). 

Image RemovedImage Added


If you shrink it further, it will eventually become red and you won't be able to shrink the image any more. This is the "hard limit." You can't have an image smaller than this.

Image RemovedImage Added


This image also has "Free Cropping" available. The cropping you do here will determine how the image appears next to the text on this page.

Image RemovedImage Added


This image looks fine as-is, but to show this functionality in action, I'm going to trim the sides. 

Image RemovedImage Added

Step 5

)

: Save

the content.

To see your cropping changes in action, hit the save button at bottom of the edit page.

Step 6

)

: View Your Changes

View the content by itself, in lists and spotlights to see your crop changes in action.

Here's what the image looks like next to content. 

The screenshot on the left is with cropping, and the screenshot on the right is before we cropped it. Notice it is thinner.

Image RemovedImage Added


So what about that 3:2 cropping we did?

Going back to the list of upcoming events, I see that Dr. Beaupré's chin is no longer cut off.

Much better!

Image RemovedImage Added

If you don't like the way you cropped an image, you can go back and change it as many time as it takes for you to be satisfied.

Conversely, if you are content with the site's automatic cropping of an image, there's no need to change anything. 

Images that

can be cropped

Can Be Cropped

This functionality is available for all image fields (except galleries and images inserted via the text editor).

If you have trouble using this functionality, or it doesn't appear to be working as it should, please put in a ticket to helpdesk.franklin.uga.edu.


Info
titlePermission Level

Level 1 or Higher - See permission level document for details


Insert excerpt
Drupal

8

Support
Drupal

8

Support
nameLogin
nopaneltrue

Insert excerpt
Franklin OIT Self Service Website
Franklin OIT Self Service Website
nopaneltrue