How to create an image preview style in Drupal 7


Tutorials - Tutorials

User Rating: / 0

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.

  3. From this next page, click on the Image Styles link found under the Media category.

  4. This screen is the Image Styles list screen. From here, click on the Add Style link found at the top of the page.

  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.

  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.
    Scale and Crop

  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.

  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.

About Us

Royal Developer Top three Web Designing and Web Development Company in Dehradun, Uttarakhand, India. Royal Developer Best SEO Company in Dehradun takes pride in its philosophy of 'Employee First' which empowers to create a real value for the customers. Royal Developer can offer Best and cheap Website Development Software Development & SEO Services. We are the Best service Provider of SEO, SEM, SMO Services Company in Uttarakhand. Web Designing Course in Dehradun, Web Designing Classes in Dehradun, Web Design Training Institute in Dehradun, Web designing institute in dehradun, Best institute for web designing in dehradun, Web development training in dehradun, Web development course in dehradun, Web Designing Training in Dehradun.


- Contact Information - 

Add : RDIT Services Pvt Ltd, 3rd Floor, RGM Plaza, Above Chandu Canteen,
          23 Chakrata Road, Dehradun - 248001, Uttarakhand, India

Email : 


 : +91 8171200108, +91 8979462451,
                                  +91 7895753921

Quick Enquiry Form

Enter your full name

Enter your valid email address

Enter your correct mobile number

Invalid Input

Your Message
Invalid Input

Enter Code
Enter Code
  RefreshInvalid Input


You are here: Home Tutorials How to create an image preview style in Drupal 7