Why are the photos on the Webflow 'Flowers' page uploading as landscape instead of portrait, and is there a way for the client to change the orientation through the CMS?
TL;DR
- Webflow ignores EXIF data, so re-save rotated images in an editor before uploading.
- Check Designer settings for fixed sizes or aspect ratios that force landscape display.
- Optionally, add an 'Orientation' CMS field to apply rotation or styling via CSS based on user selection.
Your Webflow 'Flowers' page images are displaying in landscape instead of portrait likely due to image orientation metadata being ignored or CSS constraints forcing a specific aspect ratio. Here’s how to investigate and allow flexibility through the CMS.
1. Check Original Image Orientation and EXIF Metadata
- Webflow may discard or ignore EXIF orientation data (usually embedded by cameras/smartphones).
- If a portrait photo is uploaded but Webflow interprets it using its actual pixel dimensions instead of metadata, it may appear as landscape.
- Solution: Open the image in an editor (like Preview, Photoshop, or an online tool), manually rotate it as needed, save a flattened version (re-export), then re-upload to Webflow CMS or Assets.
2. Inspect Your Image Element Settings in the Webflow Designer
- Select the image element bound to the CMS.
- In the Style panel, check if it's constrained by fixed width/height, or forced into a landscape aspect ratio using padding, aspect-ratio, or Flex/Grid settings.
- Remove or adjust any width/height rules that force all images to have the same proportions, unless you intend that.
3. Allow the CMS to Handle Image Orientation Through Custom Field or Settings
- Webflow currently does not support image rotation controls directly in the CMS.
- However, you can create a workaround by:
- Adding a 'Orientation' Option field to the CMS Collection (e.g., "portrait", "landscape").
- Then, apply CSS classes conditionally using Webflow Conditional Visibility or custom code that:
- Applies a rotation (
transform: rotate(90deg)) or sets specific height/width behavior based on that field.
- Applies a rotation (
- This is not ideal and can only workaround the visual result — it doesn’t actually rotate the original image.
4. Recommended Best Practices
- Ask the client to upload portrait images already correctly rotated and cropped.
- Use a tool like Canva or an image editor to re-save as upright orientation.
- Alternatively, give clients a guide or train them to use an external image editing tool before uploading.
Summary
Webflow does not respect EXIF orientation data, so photos may appear landscape if not saved properly. Have the client re-save rotated images before upload, and avoid hard-coding aspect ratios in the Designer. If needed, add a CMS field to manually flag image orientation and handle that with styles.