Creating and Using the "Thumbnail" Image Style in a Drupal 9 Content Type

In this example, we'll explore the creation and application of a "Thumbnail" Image Style within a Drupal 9 content type. The "Thumbnail" style will automatically resize and crop images to 200x200 pixels, making them ideal for displaying as thumbnails. This practical guide demonstrates how to set up and use Image Styles effectively to enhance the visual presentation of your website's content.

Step 1: Create the "Thumbnail" Image Style

As we discussed here Demystifying Image Styles in Drupal 9: Tailoring Visual Content for Your Site


Step 2: Create a Content Type

2.1. Navigate to the Content Type Page:

  • In the administrative menu, go to "Admin > Structure > Content types."

  • Click "Add content type" to create a new content type.

    content type page

2.2. Configure the Content Type:

  • Provide a name and description for your content type, and configure other settings as needed.

    create content type

2.3. Add an Image Field:

  • To include images in your content type, add an "Image" field to it. You can do this by clicking on "Manage fields" for your content type and adding a new field of type "Image."

    fields listselect image field

give name to field of image

2.4. Configure the Image Field:

  • When configuring the image field, make sure to set the "Image Style" to "Thumbnail." This means that any images added using this field will automatically be resized and cropped to 200x200 pixels using the "Thumbnail" Image Style.

    navigate to manage display tab

     

    select thumbnail for image field created then update and save

Step 3: Create Content with the "Thumbnail" Image Style

3.1. Add Content:

  • Go to "Content" in the administrative menu and click "Add content" to create a new piece of content using the content type you just configured.

3.2. Upload an Image:

  • When adding content, use the image field you created.
  • Upload an image, and it will automatically be processed with the "Thumbnail" Image Style.

Conclusion:

In this example, we've successfully created and utilized the "Thumbnail" Image Style within a Drupal 9 content type. This Image Style automatically resizes and crops images to 200x200 pixels, making them suitable for use as thumbnails. By configuring your content type to use this Image Style, you can ensure that images displayed on your website are consistent and visually appealing.

With Image Styles, you can easily manage and optimize images, enhancing the user experience on your Drupal site.

Share on social media

Comment

Submitted by Rogersug (not verified) on Mon, 08/12/2024 - 17:08

Permalink

Интерес к недвижимости на живописном острове постоянно растёт. Место это привлекает людей, мечтающих об идеальном уголке для отдыха или постоянного проживания [url=http://sehoeng.com/bbs/board.php?bo_table=pro_qna_eng&wr_id=64099]http:…]

Submitted by Greggnub (not verified) on Tue, 08/13/2024 - 02:23

Permalink

Это внедорожный путеводитель, карта, на которой размещены интересные маршруты и необходимая информация для путешествий на квадроциклах и снегоходах. Вы сможете: Выбрать интересные маршруты и предварительно свершить по ним виртуальное путешествие [url=http://e-k-h.ru/]день рождения на квадроциклах[/url]

Submitted by Dannyanymn (not verified) on Tue, 08/13/2024 - 02:59

Permalink

Прокат и аренда квадроциклов в москве и области. Красота подмосковного леса, опьяняющий, чистый воздух, драйв и адреналин ждут вас в этом квадро приключении [url=http://kvadrociklov-prokat.ru/]аренда квадроциклов с доставкой[/url]

Submitted by JamesCam (not verified) on Wed, 08/14/2024 - 02:37

Permalink

Китайские, японские и европейские автомобили. Поставки новых и поддержанных из Китая. Доставка до России с растаможкой и полным юридическим сопровождением [url=https://wiki.mine-hoster.de/index.php?title=Chinese_Cars_16]lixiang l9 цена в россии[/url]

Submitted by EdwardGap (not verified) on Wed, 08/14/2024 - 10:04

Permalink

Кому и зачем понадобится оформление сертификата соответствия ГОСТ Р ИСО 9001 в Москве? Сведения актуальны для разных направлений работы. Оформление сертификата ИСО 9001, который будет подтверждать наличие СМК международного образца https://teletype.in/@sezdok/cena-sertifikata-ISO-9001-v-Moskve

Submitted by ManuelMyday (not verified) on Thu, 08/15/2024 - 03:53

Permalink

Подробный справочник организаций города Астрахань. У нас вы можете найти все необходимые вам адреса и телефоны организаций. Актуальная информация [url=https://astarakan.ru/]Справочник Астрахани[/url]

Submitted by Michaelhox (not verified) on Thu, 08/15/2024 - 17:01

Permalink

Предоставляем возможность купить авто от прямого поставщика по достойной цене. Высококвалифицированные специалисты всегда помогут выбрать именно ту модель автомобиля, которая будет идеально отвечать всем вашим требованиям и пожеланиям [url=http://vykup-auto02.ru]huawei aito m9 цена[/url]

Submitted by Waltercop (not verified) on Fri, 08/16/2024 - 04:47

Permalink

Если вы переезжаете, делаете ремонт или не знаете, куда девать несезонное имущество, то аренда склада для хранения вещей решит проблему. Оказываем услуги физическим лицам, предпринимателям и организациям [url=https://self-storage-msk.ru/]https://self-storage-msk.ru/[/url]

Submitted by JasonHit (not verified) on Mon, 08/19/2024 - 10:20

Permalink

Ищете, где купить стильный и удобный женский бюстгальтер? Наш интернет-магазин предлагает огромный ассортимент лифчиков, которые подчеркнут вашу индивидуальность и обеспечат максимальный комфорт.
Выбирая бюстгальтеры у нас, вы найдете модели на любой вкус и размер. В каталоге представлены классические бюстгальтеры с косточками, удобные спортивные лифчики, нежные кружевные варианты и модели для особых случаев. Мы предлагаем продукцию только от проверенных брендов, которые гарантируют качество и долговечность изделий [url=https://www.wildberries.ru/seller/479523]бюстгальтер без косточек[/url]

Add new comment