Setting up an Image Style

Setting up an Image Style with Amber Matz In this tutorial, we’ll walk through the process of setting up an image style. By the end of this tutorial, you will understand how to add an image style and use it to display images on Vendor pages. To follow along, you should understand how to add basic fields to a content type, how to change content display, and the concept of image styles. On your demo site, the Vendor and Recipe content types must exist, and the Main Image field should be added to each. Finally, at least one Vendor and Recipe content item should be created. In particular, a large image should be uploaded to the Main Image field on each. See the written version of this tutorial for links to the prerequisites. In the Manage administrative menu, navigate to Configuration. Then, in the Media section, click on Image styles. This is the path - admin/config/media/image-styles. Click Add image style. Enter the name Extra medium, and in parentheses, 300x200. Click Create new style. The page Edit style Extra medium (300x200) appears. In the Effect table, select a new effect, Scale and crop. Click Add. Fill in the width as 300 and the height as 200. Click Add effect. The image style is now saved with the chosen effect. Now we can apply this image style to the display of an image field. In the Manage administrative menu, navigate to > Structure > Content types. This is the path admin/structure/types. Click Manage display in the drop-down for the vendor content type. This is under the Operations column. The Manage display page for the vendor content type appears. Ensure that the secondary tab Default is selected. This means we’re configuring the display for the default view mode, as opposed to the teaser. Click the cogwheel next to Main Image for the configuration options. For Image style, select Extra medium (300x200). Link image to Nothing. Click Update. Now click Save. The new image style will be used when displaying vendor content. Open a vendor content item and verify that it shows up with the scaled-down image. Navigate to Content from the Manage administrative menu and click on the title of a vendor item. Now, we can see that the image is displaying with the image style applied, and is 300X200, instead of the original, very large image size. Repeat these steps for the Recipe content type. And verify that the image style is being applied to the Main Image on the Recipe content item as well. See the written version of this tutorial for links to related tutorials and additional resources. In this tutorial, we added an image style and used it to display images on Vendor pages.