Knowledgebase

How to change the image style of images displayed by nodes in Drupal

In Drupal you can insert images in content items (nodes) by adding an image field type to the content type to which the nodes belong. An example is the preconfigured article content type which has an image field by default. Image styles are used to standardize the images that are displayed by nodes belonging to a particular content type. Image styles can be used to scale, resize, crop, etc., the uploaded images and to add other effects. The original images are kept on your Drupal hosting account, and the copies processed by the particular image style are shown on the frontend.

Once the image field is added to the particular content type, you can edit its display settings and assign an image style. To do this, log in to the admin panel of your Drupal, click on the Structure tab in the top navigation bar and on the page that opens click on Content types. On the next page click on the manage display button for the desired content type. After you click on the button you'll see a table with the fields that are shown on the frontend in nodes from the particular content type. Find the image field and on the right side of its row in the table you'll see a small wheel button. Click on it and some settings will appear. Use the Image style drop-down menu to select the desired style, click on the Update button that's under the settings, and then click on the Save button at the bottom of the page.

If nodes from that content type are displayed on the frontend first in a teaser view and then in full view, you can specify a different image style for each view. To change the settings of the different views, use the small buttons that are in the top right corner of the Manage Display page for the particular content type.

If you want to add and edit image styles, in your Drupal admin panel click on the Configuration tab and then on Image styles.

Was this answer helpful?

 Print this Article

Also Read