Advertising sustains the DA. Ads are hidden for members. Join today

On this page

第6章 コンテンツ構造の設定

6.13. Setting Up an Image Style

Last updated on
14 April 2025

Goal

Add an image style and use it to display images on Vendor pages.

Prerequisite knowledge

Site prerequisites

Steps

  1. In the Manage administrative menu, navigate to Configuration > Media > Image styles (admin/config/media/image-styles).
  2. Click Add image style.
  3. Enter the name Extra medium (300x200)
  4. Click Create new style. The page Edit style Extra medium (300x200) appears.
  5. In the Effect table, select Scale and crop. Click Add.

  6. Fill in the fields as shown below.

    Field name Value

    Width

    300

    Height

    200

  7. Click Add effect. The image style is saved with the chosen effects.

    Add an image style

  8. In the Manage administrative menu, navigate to Structure > Content types (admin/structure/types).
  9. Click Manage display in the Operations dropdown for the Vendor content type. The Manage display page (admin/structure/types/manage/vendor/display) appears.
  10. Ensure that the secondary tab Default is selected.
  11. Click the cogwheel next to Main image for the configuration options.

  12. Fill in the fields as shown below.

    Field name Value

    Image style

    Extra medium (300x200)

    Link image to

    Nothing

    Change field formatter settings of image field

  13. Click Update.
  14. Click Save. The new image style will be used while displaying Vendor content.
  15. Open a Vendor content item and verify that it now shows up with the scaled-down image. See 「コンテンツアイテムの編集」 for information on how to locate an existing content item.
  16. Repeat steps 8-15 for the Recipe content type.

Additional resources

Drupal.org community documentation page "Working with images in Drupal 7 and 8"

Attributions

Adapted and edited by Boris Doesborg, and Jojy Alphonso at Red Crackle from "Working with images in Drupal 7 and 8", copyright 2000-2017 by the individual contributors to the Drupal Community Documentation.

 

This page is generated from AsciiDoc source from the User Guide. To propose a change, edit the source and attach the file to a new issue in the User Guide project. PDF and e-book formats are available on the User Guide project page.

Source file: structure-image-style-create.asciidoc

Help improve this page

Page status: No known problems

You can: