Is your feature request related to a problem? Please describe.
Yes. Currently, the Photo module does not provide a way to enforce consistent aspect ratios for images. This becomes problematic when working with image grids, cards, or dynamic content where source images have varying dimensions.
At the moment, the only available control is width, which does not solve layout consistency issues. As a result, images with different aspect ratios break alignment, create uneven layouts, and require custom CSS or workarounds to standardize their appearance.
Describe the solution you'd like
I would like to see a native “Aspect Ratio” control added to the Photo module (and ideally other media modules like Video). This could include:
- Predefined ratios (e.g., 1:1, 4:3, 16:9, 3:2, etc.)
- Optional custom ratio input (Like in Box Module, Row or Column)
- Built-in handling using modern CSS (e.g.,
aspect-ratio or a fallback)
This would allow users to maintain consistent layouts without custom development.
Describe alternatives you've considered
Currently, I’m using a workaround by injecting a custom field into the Photo module and applying CSS classes to enforce aspect ratios.
Example (simplified snippet):
if ('photo' === $form_id) {
$form['style']['sections']['general']['fields']['mf_aspect_ratio'] = [
'type' => 'select',
'label' => __('Aspect ratio', 'fl-builder'),
'options' => [
'' => __('None', 'fl-builder'),
'mf-aspect-ratio169' => '16:9',
'mf-aspect-ratio1610' => '16:10',
],
];
}
Then I apply CSS to control the ratio via these classes.
While this works, it is not ideal because:
- It requires custom plugin code
- It is not accessible to non-developers
- It adds maintenance overhead
- It duplicates functionality that could exist natively
Creating a full custom module is also an option, but it feels excessive for such a fundamental layout feature.
Additional context
This feature would significantly improve workflows in many real-world scenarios:
- Card layouts / grids: Ensuring all images align uniformly regardless of source dimensions
- Dynamic content (ACF, CPTs): Editors upload inconsistent image sizes, breaking layouts
- Responsive design: Maintaining visual consistency across breakpoints
- Hero sections & banners: Enforcing cinematic ratios like 16:9
- E-commerce / listings: Product thumbnails need consistent cropping
- Performance & UX: Avoids layout shifts caused by varying image heights
Modern CSS already supports aspect-ratio, making this feature lightweight to implement while providing a major usability improvement.
Overall, this would eliminate a common pain point and reduce the need for custom code for what is essentially a core layout requirement.
Is your feature request related to a problem? Please describe.
Yes. Currently, the Photo module does not provide a way to enforce consistent aspect ratios for images. This becomes problematic when working with image grids, cards, or dynamic content where source images have varying dimensions.
At the moment, the only available control is width, which does not solve layout consistency issues. As a result, images with different aspect ratios break alignment, create uneven layouts, and require custom CSS or workarounds to standardize their appearance.
Describe the solution you'd like
I would like to see a native “Aspect Ratio” control added to the Photo module (and ideally other media modules like Video). This could include:
aspect-ratioor a fallback)This would allow users to maintain consistent layouts without custom development.
Describe alternatives you've considered
Currently, I’m using a workaround by injecting a custom field into the Photo module and applying CSS classes to enforce aspect ratios.
Example (simplified snippet):
Then I apply CSS to control the ratio via these classes.
While this works, it is not ideal because:
Creating a full custom module is also an option, but it feels excessive for such a fundamental layout feature.
Additional context
This feature would significantly improve workflows in many real-world scenarios:
Modern CSS already supports
aspect-ratio, making this feature lightweight to implement while providing a major usability improvement.Overall, this would eliminate a common pain point and reduce the need for custom code for what is essentially a core layout requirement.