Image Ratio Picker

Image Ratio Picker makes choosing an image aspect ratio simple and intuitive for content editors. Instead of a cryptic text list (16:9, 4:5, 21:9…) that forces editors to guess the result, they pick from visual cards that show exactly how each ratio will look, with the height and width values right next to it. No technical knowledge needed, no trial and error.

Why editors will love it

• See before you choose: each ratio is a preview card with the ratio centered in the image and the height and width values displayed on the sides.
• Fewer mistakes, less support: editors no longer need to know what "3:2" or "9:16" means.
• One click: pick a card and you're done. No image style to select, no crop tool to learn.
• Consistent results: the same ratios across the whole site, defined once by site builders.
• Only relevant choices: site builders can disable the ratios they don't need, so editors see a short, clear list.
• Plain labels: rename a ratio for your team (e.g. "Square", "Banner", "Story") so the choice is self-explanatory.

Features

• Image ratio field with a visual card picker in the form display.
• Nine ready-to-use presets: 1:1, 4:3, 3:2, 16:9, 21:9, 2:3, 3:4, 4:5 and 9:16.
• Pure CSS rendering: the chosen ratio is applied with aspect-ratio on the target field wrapper, with no extra markup in your templates.
• Optional image style or responsive (adaptive) image style per ratio. Core image styles image_ratio_{id} (scale and crop, max width 1920) are created on install.
• Simple admin UI (Configuration → Media → Image Ratio Picker) to enable or disable ratios, edit labels and aspect numbers, and upload your own picker previews.
• Safe fallback: if no ratio is chosen, or the preset has no style, the entity display settings are left untouched.
• Works with any media or image field on the same entity, either auto-detected or selected in the field settings.
• Distribution friendly: settings can be overridden at install time, and a hook lets you provision extra styles.

How it works

Editor picks a ratio → CSS aspect-ratio is applied to the target field wrapper → the optional image or responsive style from the preset is applied.

See the README for configuration details, the service API and uninstall options.