Add full-width image style layout to blog posts

[popovayoana]

Description

Our blog currently only supports centered images with large margins on both sides. This layout restriction leads to a less immersive visual experience. We want to enable full-width images in our blog posts (in addition to the current centered one). These images should stretch from edge to edge, without any padding, filling the entire width of the post container.

Details

Full-width style layout

• Description: Images span the full width of the blog post container (only images, not body text)
• Characteristics:
  • No padding around the main wrapper
  • Images extend edge-to-edge within the blog post container
  • Responsive design to ensure proper scaling across various devices

Consideration for Image height:

We need to determine an appropriate height limit for these full-width images to maintain aesthetic balance and ensure they don't dominate the screen space excessively. Potential options include setting a maximum height in pixels or a percentage of the viewport height.

Visual comparison

How it looks now

How we want the additional layout to look like

[popovayoana]

@Alex-Pavlyuk @alexmorev hey guys, can you have a look at that and estimate effort needed?

[alexmorev]

@popovayoana OK. I'll do it.

[alexmorev]

@popovayoana It's done. Please test. NOTE. In order to use and display full-width images in articles you should use Post image insertion in the Blog Post admin menu. The maximum height of an image is restricted by 25% from a viewport height.

[popovayoana]

FIXED by @alexmorev.