After learning how to set the Image Style Preview in the last article, you may need or want a bit more customized image style. Perhaps you want to add a setting between thumbnail and medium, or even one larger than the current large setting. There is a setting in Drupal 7 that allows you to create your own Image Style Preview. Follow the steps below to learn how to create or modify an image preview style in Drupal 7.

Creating an Image Preview Style in Drupal 7

  1. Log into the Drupal 7 admin dashboard.
  2. Using the top menu bar, locate and click on the Configuration option.
    _main-dashboard-configuration
  3. From this next page, click on the Image Styles link found under the Media category.
    media-image-style
  4. This screen is the Image Styles list screen. From here, click on the Add Style link found at the top of the page.
    add-image-style
  5. The next page only asks for a Style Name. In this example, I am going to create a new Image Style setting named 'small'. After naming your new style, click the Create New Style button.
    add-small
  6. After creating the style, you need to add effects to the preview style. In our example, we will mimic the effects of the default settings while making our small option. The effects dropdown has several options, shown in the table below. For our example, we will choose the Scale option. Once you choose your option, select the Add button to the right.
    Crop
    Desaturate
    Resize
    Rotate
    Scale
    Scale and Crop

    image-style-settings
  7. This takes us to another page to further design the scaling effect. Here we will set the max settings to 150 width and 150 height. This means that the image will scale, keeping proper dimensions, until either height or width hits 150 pixels. The Allow Upscaling setting, if checked, will increase the image size if it was below 150 x 150  until it hits the same 150 pixels or, if unselected, will keep its original size. In this case, we selected the option. Click on the Add Effect button once completed.
    edit-scale



  8. You are taken back to the page to edit the style. You can add additional effects if you like. Once you are finished, click the Update Style button. This will conclude adding your new image preview style. The screenshot below shows the new style as it appears in the dropdown when you modify the Image Style Preview.
    image-style-after
Continued Education in Course 109: Working with Images in Drupal 7
You are viewing Section 9: How to create an image preview style in Drupal 7
Section 8: How to add a subfolder to default image directory in Drupal 7
Section 10: How to set a default image for content types in Drupal 7
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

0 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!