The "stylish" Drupal: image styles and their magic abilities

Drupal has many built-in tools with truly magic powers, and today we will describe one of them. When we say one tool, it’s hard to believe how many things it can do. It can raise a website’s attractiveness and usability, create consistency in its looks, increase its performance due to image optimization, and significantly save its owner’s efforts and budget. This Drupal’s treasure is called image styles. Let’s start discovering more details.

But before we delve into Drupal image styles, we first need to take a glimpse at website image uploading practices.

How website images are usually uploaded

Do you sometimes or regularly upload images to your website or allow other users do it? Then images probably “arrive” in different sizes and formats.

These can be in PNG, JPEG, or GIF format. Image sizes are worth a separate discussion, but huge wallpaper images may come alongside with small thumbnails create a “chaos” on your site’s pages.

This is neither attractive nor convenient. In addition, right image formatting is crucial for your website performance.

What to do? Well, it’s pretty bothersome to trim each image, especially if you have plenty of them to upload. And you definitely would not expect other users to do so.

Another solution could be to have a special moderator on your staff who will trim all users’ images, but this involves additional expenses.

Drupal has something better for you! Everything can be perfectly optimized in a good Drupal expert’s hands! See how Drupal can solve all the above mentioned issues with the help of image styles.

Drupal and its image styles

First of all, Drupal lets you impose restrictions on uploaded images (minimum and maximum resolution, maximum upload size, and particular formats). This is available in image field settings for particular content types (articles, products, etc.).

However, Drupal image styles go far beyond that, because they can automatically trim all images according to precise requirements.

With Drupal image styles, you can you apply various effects — convert, crop, desaturate, resize, rotate, scale, scale and crop your images.

Drupal lets you decide exactly on the width and height that all images should have, and many other characteristics.

You can create as many image styles as you wish and apply them to particular content types (articles, products, etc.), content collections on pages, and so much more.

In addition to creating custom image styles, you can use Drupal’s default images styles. For example, let’s say you want all your articles to be accompanied by a medium-sized photo and do not have special demands to its size. You choose Drupal’s default “medium” image style (220 x 220), and set it for your “article” content type.

“Before and after” using Drupal image styles: vivid example

Consider the difference in how a content collection can look.

Without image styles:

With image styles (the scale and crop effect):

A glimpse at how to use Drupal image styles

Creating Drupal custom image styles

To create a custom image style, go to Configuration — Media — Image styles, click “Add image style,” give it a name, and click “Create new style.” Choose the effect, add it, specify the effect details, and finally update the style. Multiple effects are available with the “Show row weights” options.

Using image styles for a content type

Just go to your content type, for example, article (Structure — Content types — Articles — Manage display) and click on a small gear to the far right of its image field. You can then select one of Drupal’s default or custom images styles.

Using image styles in collections of content (views)

To trim all images in a collection of content, select the desired image style in the image field settings of the Views (if it uses fields).

Final thoughts

In our article about creating photo galleries with Views, we mentioned how simply changing image dimensions in image styles lets you play with the spaces between photos with no need for CSS.

And this is just the beginning of the secrets that image styles hide! You can contact Drudesk developers and entrust them with the mission of bringing your site’s images to perfect harmony.

They know what can be done in Drupal for your website’s attractiveness, speed, usability, and cost-effectiveness — with images styles or plenty of other techniques. Drop us a line!