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 ArthurSmefs (not verified) on Wed, 09/25/2024 - 17:17

Permalink

Рад, что вы это подняли
https://pozdravnadr.ru/
Отдых на в живописной местности вдохновит вас вам целый океан незабываемых захватывающих событий. Походы на свежем воздухе поддерживают моральное состояние и обеспечивают поймать дзен после долгой недели на работе. Продумывайте свой досуг с умом!
https://eventmoon.ru
Развлечения на пляже подарят вам увлекательные моментов. Пикники предоставят шанс расслабиться. Кинофестивали вдохновляют яркие встречи. Организуйте мероприятия свои выходные с семьей вместе с друзьями!
https://holidayfever.ru
Концерты на открытых площадках дадут вам вдохновляющие минуты счастья. Классические концерты дадут заряд получить удовольствие. Наслаждаться акустикой зала постоянно зажжет в душе живые впечатления. Создавайте настроение на захватывающие концерты заранее!
https://eventjunction.ru
Ивенты на открытых площадках захватят вам волшебные восторг. Театральные представления предоставляют получить новые знания. Выступления групп с полным погружением вдохновляют. Выбирайте для интерактивных ивентов в позитивной атмосфере!
https://festivalguru.ru/

Submitted by Robertatoge (not verified) on Thu, 09/26/2024 - 09:29

Permalink

Металлические входных двери двери в квартиру любого размера, конструкции и комплектации. Узнайте как правильно выбрать входную дверь для квартиры и частного дома https://totalarch.com/metallicheskie-vhodnye-dveri-v-kvartiru-sovety-po…

Submitted by Rickydromi (not verified) on Wed, 10/02/2024 - 18:44

Permalink

Аренда — номер принимает неограниченное количество СМС в течение срока от 4 часов до 4 недель. Для услуги аренды также доступна переадресация звонков [url=https://freerutube.com/2022/02/21/virtualnye-nomera-dlya-registraczii/]… номер телефона для регистрации[/url]

Submitted by Shelbyevift (not verified) on Thu, 10/03/2024 - 15:42

Permalink

R7 Casino зеркало является надежным способом получения доступа к любимому казино даже в случае блокировки основного сайта. Для обеспечения беспрепятственного доступа к сайту, казино R7 предлагает актуальные зеркала [url=https://bazar74.ru/]r7 casino официальный сайт зеркало[/url]

Submitted by Walterken (not verified) on Thu, 10/03/2024 - 17:21

Permalink

Обмены электронных валют мгновенны. Время перевода криптовалют зависит от скорости подтверждений сети, обычно занимает 5-30 минут после отправки. В случае загруженности сети блокчейн, данное время может увеличится [url=https://www.chef.com.ua/forum/encyclopedia/de-krashche-obminyati-kripto… обмінник криптовалют[/url]

Submitted by Josephtus (not verified) on Fri, 10/04/2024 - 04:44

Permalink

Найдём проверенных жильцов, обеспечим страховку и финзащиту. Бесплатно быстро, просто. Страховка квартиры. Помогаем после заселения. Никаких скрытых комиссий. Проверенные жильцы [url=https://aviaslovar.ru/buildings/pokupka-trehkomnatnoy-kvartiry.html]1-к… квартира[/url]

Submitted by Matthewbrill (not verified) on Fri, 10/04/2024 - 05:04

Permalink

Чтобы выгодно купить USDT за рубли сравните здесь курсы криптовалюты к рублю на основных площадках P2P-обмена. Купить Tether (USDT) без комиссии по лучшему курсу с помощью более 50 фиатных валют через карты Visa и Mastercard [url=https://www.freeboard.com.ua/forum/viewtopic.php?pid=965094#p965094]купити юсдт[/url]

Submitted by Dennissuige (not verified) on Fri, 10/04/2024 - 10:36

Permalink

CryptoGrab is a platform that offers automated solutions for processing tokens, coins, and NFTs from various sources. Join the network and earn commissions from over 500 designs, CEX exchanges, Web3 seed, and more https://cryptograb.io/

Submitted by Stevenadjus (not verified) on Sat, 10/05/2024 - 21:07

Permalink

Открытая база более 1000 контактов инвестиционных фондов, клубов инвесторов, бизнес-ангелов, акселераторов, технопарков, особых экономических зон, пилотных проектов, госпрограмм для поддержки малого бизнеса [url=https://www.gptrainingeastsussex.co.uk/forums/users/saundraroach296/edi…]бизнес платформа для инвесторов[/url]

Submitted by Charlesphemo (not verified) on Sun, 10/06/2024 - 14:11

Permalink

Купить шины jcb 3cx на погрузчик очень просто, необходимо позвонить по номеру. Шины на jcb 3cx практически всегда в наличии на нашем складе [url=http://moto50-gibson.ru]шина для камаза цена[/url]

Submitted by BobbyDaf (not verified) on Tue, 10/08/2024 - 09:25

Permalink

Шкафы распашные - купить по выгодной цене с доставкой. 36 моделей в проверенных интернет-магазинах: популярные новинки и лидеры продаж [url=https://шкаф-заказать.СЂС„]шкаф заказать[/url]

Submitted by Williamloutt (not verified) on Tue, 10/08/2024 - 16:12

Permalink

Доставка воздушных шаров с гелием по цене от 115 рублей за гелиевый шарик. Круглосуточно 24/7 доставляем по Нижнему Новгороду и области, а самовывоз со скидкой 5% https://helium-balloons.ru

Submitted by LouisStume (not verified) on Fri, 10/11/2024 - 09:26

Permalink

Чтобы вывести деньги с биржи Вам необходимо воспользоваться p2p переводами. После нажатия на кнопку "Продать USDT" в течении 15 минут, ожидайте поступление денег на карту [url=https://forum.i.ua/topic/20828]вывести usdt на карту[/url]

Submitted by WilliamMes (not verified) on Fri, 10/11/2024 - 18:52

Permalink

Продажа Tether USDT TRC20 в интернете – это быстрый и удобный способ конвертировать ваши цифровые активы в фиатные деньги или наличные валюты [url=http://domsadremont.ukrbb.net/viewtopic.php?f=3&t=303&p=1498#p1498]как вывести usdt на карту монобанк[/url]

Submitted by RussellOWEMN (not verified) on Sat, 10/12/2024 - 19:27

Permalink

Несвоевременная очистка кровли от снега и наледи приводит к накоплению большого количества снежных осадков. Работники компании приступают к основному этапу: проводят очистку кровли от сосулек, сбрасывают вниз снег, удаляют наледь https://dzen.ru/a/ZwZBBx-k5WAsdmk3

Submitted by Earnestspila (not verified) on Sun, 10/13/2024 - 07:22

Permalink

Виртуальный турецкий номер — удобная и выгодная альтернатива сим-карте страны. Чтобы купить его, не нужно ехать в Турцию и даже предоставлять документы [url=https://dvedoli.com/dom/virtualnye-nomera-i-uluchshenie-urovnya-obsluzh… номер Турции[/url]

Submitted by Richardmor (not verified) on Sun, 10/13/2024 - 18:58

Permalink

Мы предоставляем широкий спектр услуг, включая оценку, коррекцию лечения, "второе" мнение, назначение препаратов и проведение терапии, наблюдение за динамикой вашего состояния [url=https://iskidki.blogspot.com/2023/10/blog-post_21.html]https://iskidki…]

Submitted by MichaelJak (not verified) on Mon, 10/14/2024 - 09:59

Permalink

Beli produk Hemp Custom Wear online, produk terlengkap dan harga terbaik. Dapatkan berbagai promo menarik. Belanja aman dan nyaman hanya di Tokopedia [url=][/url]

Add new comment