How to Configure Image Styles for "Card Two Columns" and "Card Three Columns" bundles including options like resizing, scaling, or desaturating: A Step-by-Step Guide

Hello,

The "Card Two Columns" and "Card Three Columns" bundles use a nested bundle called "Card Image Section" for images.

Card Image Section: your-site-dot-com/admin/structure/paragraphs_type/card_image_section_bundle/display

It uses a media field for images and displays them with a responsive image style called "Card (PB)": your-site-dot-com/admin/config/media/responsive-image-style/pb_card

This style includes four sizes for different screen widths, converting images to WebP and scale and crop them to fixed dimensions.

Small: your-site-dot-com/admin/config/media/image-styles/manage/pb_card_image_sm
Medium: your-site-dot-com/admin/config/media/image-styles/manage/pb_card_image_md
Large: your-site-dot-com/admin/config/media/image-styles/manage/pb_card_image_lg
Extra Large: your-site-dot-com/admin/config/media/image-styles/manage/pb_card_image_xl

You can update the four image styles as needed, including options like resizing, scaling, or desaturating. When resizing, it's best to add either the height or the width, but not both, to avoid distorting the image.

If you choose not to use the responsive mode and just create a simple resized image for a logo:

1. Go to Image Styles (your-site-dot-com/admin/config/media/image-styles) and create a new style.
2. Configure it as needed.
3. Go to Media Display Settings (your-site-dot-com/admin/structure/media/manage/pb_media_image/display/pb_media_card).
4. Under "Format," choose "Image" and select your new style in the settings.

Note: This change will apply to both the "Card Two Columns" and "Card Three Columns" bundles. Changing the format affects all content using this bundle.

Best wishes,
Alaa

Thanks a lot, this helped! :)