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 Gregoryimmef (not verified) on Sun, 08/04/2024 - 05:24

Permalink

Цена сертификата соответствия ИСО 9001 всегда рассчитывается индивидуально, так как зависит от ряда факторов: сферы деятельности; количества и местоположения площадок; численности. Сертификат выдается сроком на 3 года https://teletype.in/@sezdok/optimalnaya-cena-sertifikata-iso09001-v-ros…

Submitted by Danielblula (not verified) on Sun, 08/04/2024 - 10:48

Permalink

Сертификат соответствия ИСО 9001 – документ, который выдается по результатам экспертной проверки и подтверждает, что система менеджмента качества (СМК) организации соответствует международному стандарту ISO 9001 «Системы менеджмента качества. Требования» либо его национальному аналогу ГОСТ Р ИСО 9001 и своевременно совершенствуется https://vc.ru/u/3200429-marev/1137556-sertifikat-iso-9001-chto-eto-tako…

Submitted by Jefferyhab (not verified) on Sun, 08/04/2024 - 16:58

Permalink

Приобретение собственного жилья – важное и ответственное решение. Для большинства людей это одно из самых значимых вложений в жизни. Однако накопить нужную сумму бывает непросто. Именно здесь на помощь приходят финансовые инструменты, позволяющие сделать мечту о собственном доме реальностью [url=https://xn--80asucf0d.xn--j1al4b.xn--p1ai/index.php/component/k2/itemli…]

Submitted by DouglasImabe (not verified) on Mon, 08/05/2024 - 01:35

Permalink

Полный список промокодов Яндекс Путешествий на первый заказ и не только на июль 2024 Актуальные скидки, промокоды и кешбэк на отели и авиабилеты на сервисе [url=https://t.me/sale_travels]яндекс путешествия промокод 12[/url]

Submitted by Greggnub (not verified) on Mon, 08/05/2024 - 12:44

Permalink

Магистерские диссертации на заказ в Москве. магистерская диссертация на заказ. Оформление заказа: Заполните форму на нашем сайте, указав все необходимые детали вашей магистерской диссертации [url=http://dissertaciya-dlya-studentov.ru/]магистерская диссертация[/url]

Submitted by Charleswen (not verified) on Tue, 08/06/2024 - 02:58

Permalink

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

Submitted by HubertMyday (not verified) on Wed, 08/07/2024 - 05:33

Permalink

«Аутстаффинг Рейтинг» – рейтинг агентсв, предоставляющих клиентам услуги трудоустройства и ведения документооборота по иностранным работникам в России. Помогаем бизнесу выбрать лучшего подрядчика https://outstaffing-rating.ru/

Submitted by Phillipwab (not verified) on Fri, 08/09/2024 - 05:53

Permalink

MostBet je mezinarodni organizace a jeji webove stranky jsou dostupne s domenou .com. V tomto clanku se zamerime prave na mezinarodni sazkovou kancelar Mostbet.com.

Na oficialni webove stranky mezinarodni sazkove kancelare Mostbet.com se lze snadno dostat obejitim blokace. K tomu je treba pouzit prohlizec s rezimem uspory provozu (Opera, Firefox) nebo sluzby VPN. Na domovske strance se nachazi dalsi sekce s obchazenim blokovani a take odkazy na aplikace pro iOS a Android, pres ktere je sazkova kancelar vzdy pristupna [url=https://mostbets-cz.com/]most bet[/url]

Submitted by FelixSpevy (not verified) on Fri, 08/09/2024 - 13:00

Permalink

you in dreams for a long time, if you now decide to order Cookstown escorts services using a search engine of our these late. The second category prefer meeting clients in the morning and afternoon. Such a gradation is very Escort women work at belfast escorts

Submitted by Andrewpiort (not verified) on Sun, 08/11/2024 - 02:54

Permalink

Мечтаете об уюте и комфорте в тропическом уголке? Каждый год всё больше людей выбирают для себя постоянное место обитания в местах, где солнце светит круглый год [url=https://www.aura-invest.com/bbs/board.php?bo_table=free&wr_id=3621519]h…]

Submitted by WayneNot (not verified) on Sun, 08/11/2024 - 08:57

Permalink

Лизинг грузовых автомобилей может стать эффективным решением для ИП, которым необходимо расширение или обновление автопарка без значительных единовременных затрат [url=https://1abakan.ru/forum/showthread-60295/]https://1abakan.ru/forum/sho…]

Submitted by Briangak (not verified) on Sun, 08/11/2024 - 11:23

Permalink

Что можно приобрести в лизинг? Вы можете взять в лизинг новый легковой или грузовой автомобиль, спецтехнику от официального дилера или автомобиль любой категории с пробегом [url=http://autopodbor-yaroslavl.ru/]лизинг для физических лиц на грузовой автотранспорт[/url]

Submitted by JeffreyGergo (not verified) on Sun, 08/11/2024 - 14:23

Permalink

Лизинг автотранспорта на выгодных условиях. Приобретайте легковой, коммерческий транспорт или спецтехнику в лизинг с максимальной выгодой. Выбрать автомобиль [url=https://wagner-automobile.ru/]как получить лизинг на спецтехнику[/url]

Submitted by JeffreyGergo (not verified) on Mon, 08/12/2024 - 02:09

Permalink

Steam aauthenticator is a option of two-step authentication on steam. It provides additional step privacy your nicknames and passwords. If this option is enabled, Steam Aauthenticator asks you for one-time passcode every time , when you login to Steam on a unfamiliar device [url=https://playsoftzone.com/SteamDesktopAuthenticator]sda steam[/url]

Submitted by DavidExcig (not verified) on Mon, 08/12/2024 - 12:02

Permalink

Лизинг авто — это аренда, по истечении срока которой транспорт становится собственностью арендатора. То есть арендатор постепенно выкупает автомобиль, которым пользуется [url=https://mashlizing.ru/]обратный лизинг[/url]

Add new comment