Ecommerce Shopify WordPress Discussion

Is there a way to make both Text First and image first layouts render in the same way

Below is my liquid file as I am building a shopify theme for someone, however when using the text-first layout the image is half hidden due to content after it and the height of the image-with-text div collapses {% assign selectedImage = section.settings.image %} {% assign layout = section.settings.layout %} <div class='image-with-text'> <div class='container'> <div class='wrapper {% if layout == "image-first" %} image-first {% endif %}'> <div class='content-container'> <div class='content-inner'> <h3 class='title'> {{ section.settings.title }} </h3> <div class='text-container'> {{ section.settings.content }} </div> <div class='button-container'> <a href='{{ section.settings.button-link }}' class='button'>{{ section.settings.button-text }}</a> </div> </div> </div> <div class="image-container"> {% if selectedImage %} <img src="{{ selectedImage.src | img_url: '600x600' }}" srcset="{{ selectedImage.src | img_url: '400x400' }} 400w, {{ selectedImage.src | img_url: '800x800' }} 800w, {{ selectedImage.src | img_url: '1200x1200' }} 1200w" sizes="(max-width: 400px) 100vw, (max-width: 800px) 50vw, 33.3vw" alt="{{ selectedImage.alt | escape }}" /> {% endif %} </div> </div> </div> </div> {% style %} /** text with image and accent dots */ .image-with-text { position: relative; display: block; justify-content: center; align-items: center; padding: 20px; width: 100%; } .image-with-text .wrapper { display: inline-flex; align-items: stretch; justify-content: space-between; width: 100%; position: relative; } .image-with-text .image-container, .image-with-text .content-container { flex: 1; display: flex; flex-direction: column; position: relative; } .image-with-text .content-container { display: flex; flex-direction: column; } .wrapper.image-first { flex-direction: row-reverse; } .image-with-text .image-container img { width: 100%; min-height: calc(100% + (160px * 3)); object-fit: cover; } .image-with-text .content-container .content-inner { z-index: 2; top: 0; left: 0; right: 0; bottom: 0; padding: 40px; transform: translate(120px, 160px); background-color: white; } .image-with-text .image-first .content-container .content-inner { transform: translate(-120px, 160px); } .image-with-text .content-inner { align-self: stretch; height: auto; } .image-with-text .content-inner h3{ margin-top: 0; font-size: 64px; margin-bottom: 0; } {% endstyle %} {% schema %} { "name": "Accented Text with Image", "class": "section", "disabled_on": { "groups": ["header", "footer"] }, "settings": [ { "type": "image_picker", "id": "image", "label": "t:sections.image-with-text.settings.image.label" }, { "type": "text", "id": "title", "label": "Title", "default": "Image with text" }, { "type": "richtext", "id": "content", "label": "Content", "default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum vestibulum ante, vel ultrices ante cursus eget. Vivamus finibus turpis eu quam feugiat, at convallis sapien finibus. Suspendisse potenti. Mauris nisl diam, accumsan fringilla nisi vitae, pharetra blandit erat. Nam purus leo, posuere sed viverra ut, rutrum sit amet justo.</p>" }, { "type": "url", "id": "button-link", "label": "Button Link" }, { "type": "text", "id": "button-text", "label": "Button Text", "default": "Read More" }, { "type": "select", "id": "layout", "options": [ { "value": "image-first", "label": "Image first" }, { "value": "text-first", "label": "Text first" } ], "default": "image-first", "label": "Layout", "info": "Place image first or second" }, { "type": "select", "id": "content_layout", "options": [ { "value": "no-overlap", "label": "t:sections.image-with-text.settings.content_layout.options__1.label" }, { "value": "overlap", "label": "t:sections.image-with-text.settings.content_layout.options__2.label" } ], "default": "no-overlap", "label": "t:sections.image-with-text.settings.content_layout.label" } ], "blocks": [ { "type": "heading", "name": "t:sections.image-with-text.blocks.heading.name", "limit": 1, "settings": [ { "type": "inline_richtext", "id": "heading", "default": "Image with text", "label": "t:sections.image-with-text.blocks.heading.settings.heading.label" } ] }, { "type": "text", "name": "t:sections.image-with-text.blocks.text.name", "limit": 1, "settings": [ { "type": "richtext", "id": "text", "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>", "label": "t:sections.image-with-text.blocks.text.settings.text.label" }, { "type": "select", "id": "text_style", "options": [ { "value": "body", "label": "t:sections.image-with-text.blocks.text.settings.text_style.options__1.label" }, { "value": "subtitle", "label": "t:sections.image-with-text.blocks.text.settings.text_style.options__2.label" } ], "default": "body", "label": "t:sections.image-with-text.blocks.text.settings.text_style.label" } ] }, { "type": "button", "name": "t:sections.image-with-text.blocks.button.name", "limit": 1, "settings": [ { "type": "text", "id": "button_label", "default": "Button label", "label": "t:sections.image-with-text.blocks.button.settings.button_label.label", "info": "t:sections.image-with-text.blocks.button.settings.button_label.info" }, { "type": "url", "id": "button_link", "label": "t:sections.image-with-text.blocks.button.settings.button_link.label" }, { "type": "checkbox", "id": "button_style_secondary", "default": false, "label": "t:sections.image-with-text.blocks.button.settings.outline_button.label" } ] } ], "presets": [ { "name": "Accented Text With Image", "blocks": [ { "type": "heading" }, { "type": "text" }, { "type": "button" } ] } ] } {% endschema %} the variants should look like this however this does not occur placing the image works as expected however when i tried setting it to be second it collapses as described. I've tried everything in CSS that I can think off and unfortunately this seems order dependent where an image can actaully set the height. Id rather not use any hacky method to get this to work
The issue you're facing with the image height collapsing in the "text-first" layout is related to the way you're using Flexbox and the order of elements. To achieve the desired layout without any hacky methods, you can modify your Liquid and CSS code as follows: Wrap the image and content in separate containers. Use Flexbox for both containers to maintain their heights. Adjust the order of elements in the "text-first" layout using Flexbox's order property. Here's the modified Liquid and CSS code: {% assign selectedImage = section.settings.image %} {% assign layout = section.settings.layout %} <div class='image-with-text'> <div class='container'> <div class='wrapper {% if layout == "image-first" %} image-first {% endif %}'> <div class="content-container"> <div class='content-inner'> <h3 class='title'> {{ section.settings.title }} </h3> <div class='text-container'> {{ section.settings.content }} </div> <div class='button-container'> <a href='{{ section.settings.button-link }}' class='button'>{{ section.settings.button-text }}</a> </div> </div> </div> <div class="image-container"> {% if selectedImage %} <img src="{{ selectedImage.src | img_url: '600x600' }}" srcset="{{ selectedImage.src | img_url: '400x400' }} 400w, {{ selectedImage.src | img_url: '800x800' }} 800w, {{ selectedImage.src | img_url: '1200x1200' }} 1200w" sizes="(max-width: 400px) 100vw, (max-width: 800px) 50vw, 33.3vw" alt="{{ selectedImage.alt | escape }}" /> {% endif %} </div> </div> </div> </div> {% style %} /** text with image and accent dots */ .image-with-text { position: relative; display: block; justify-content: center; align-items: center; padding: 20px; width: 100%; } .image-with-text .wrapper { display: flex; align-items: stretch; justify-content: space-between; width: 100%; position: relative; } .image-with-text .image-container, .image-with-text .content-container { flex: 1; display: flex; flex-direction: column; position: relative; } .image-with-text .content-container { display: flex; flex-direction: column; } .wrapper.image-first { flex-direction: row-reverse; } .image-with-text .image-container img { width: 100%; min-height: calc(100% + (160px * 3)); object-fit: cover; } .image-with-text .content-container .content-inner { z-index: 2; top: 0; left: 0; right: 0; bottom: 0; padding: 40px; background-color: white; } .image-with-text .image-first .content-container .content-inner { transform: translate(120px, 160px); } .image-with-text .content-inner { align-self: stretch; height: auto; } .image-with-text .content-inner h3{ margin-top: 0; font-size: 64px; margin-bottom: 0; } {% endstyle %}

December 30, 2023

it turns out i was looking at the problem in the wrong way and infact simply adding margin to the .content-inner solved the issue <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image with Text</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, sans-serif; } .container { max-width: 1280px; margin: 0 auto; padding: 0 40px; /* 40px padding on both sides */ } .image-text-section { display: flex; margin: 80px 0; } .left-content, .right-content { flex: 1; position: relative; } .content-inner{ position: relative; z-index: 2; margin-top: 160px; margin-bottom: 320px; padding: 40px; background-color: #fff; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); } .left-content, .left-image { order: 1; } .right-content, .right-image { order: 2; } .left-content .content-inner{ transform: translateX(120px); } .right-content .content-inner{ transform: translateX(-120px); } .right-image, .left-image { flex: 1; overflow: hidden; position: relative; width: 100%; object-fit: cover; } .image { width: 100%; height: auto; min-height: calc(100% + (3 * 160px)); /* Set min-height based on content height + 3 times 160px */ object-fit: cover; } .title { font-size: 64px; margin-bottom: 10px; } .text { font-size: 18px; line-height: 1.5; margin-bottom: 20px; } .button { display: inline-block; background-color: #007BFF; color: #fff; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-weight: bold; } </style> </head> <body> <div class="container"> <section class="image-text-section"> <div class="left-content"> <div class="content-inner"> <h3 class="title">Our Process</h3> <p class="text"> Nunc ultrices nisi vel ultricies aliquam. Nulla arcu dui, posuere quis eros eget, convallis maximus purus. Nulla sed urna et orci ultrices bibendum. Praesent consequat nulla vitae turpis eleifend condimentum. Aliquam nec sollicitudin mauris. Nunc eu faucibus erat. Donec a risus quis erat rutrum varius. Etiam ultrices vehicula metus, in euismod arcu tempus ut. Aliquam vel ipsum accumsan, ornare nisi sed, facilisis massa. Mauris vitae orci vitae nibh porttitor interdum. Etiam sit amet dolor elementum, euismod est ac, venenatis risus. Aenean lobortis dui in magna accumsan, vitae consectetur diam pretium. Suspendisse in pharetra enim, nec aliquam felis. Morbi interdum lobortis blandit. Cras eu ante eu ante venenatis suscipit. </p> <a href="#" class="button">Read More</a> </div> </div> <div class="right-image"> <img src="fabric.jpg" alt="Image" class="image"> </div> </section> <section class="image-text-section"> <div class="right-content"> <div class="content-inner"> <h3 class="title">Our Process</h3> <p class="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae commodo ipsum. Sed auctor varius feugiat. Praesent quis est eget mi commodo elementum. Praesent sed orci et dolor dictum consectetur ut vitae est. Nam euismod tempor est, non blandit magna dictum id. Nullam et hendrerit nisi. Mauris sed porta velit, eget semper magna. Maecenas lobortis purus vitae elit iaculis hendrerit. Etiam scelerisque ac sapien eget posuere. Sed nec orci ut purus accumsan sodales. Sed suscipit euismod dapibus. Maecenas eget neque gravida, tempus odio id, accumsan turpis. Suspendisse nec quam quis odio egestas tristique. </p> <a href="#" class="button">Read More</a> </div> </div> <div class="left-image"> <img src="fabric.jpg" alt="Image" class="image"> </div> </section> <section class="image-text-section"> <div class="left-content"> <div class="content-inner"> <h3 class="title">Our Process</h3> <p class="text"> Nunc ultrices nisi vel ultricies aliquam. Nulla arcu dui, posuere quis eros eget, convallis maximus purus. Nulla sed urna et orci ultrices bibendum. Praesent consequat nulla vitae turpis eleifend condimentum. Aliquam nec sollicitudin mauris. Nunc eu faucibus erat. Donec a risus quis erat rutrum varius. Etiam ultrices vehicula metus, in euismod arcu tempus ut. Aliquam vel ipsum accumsan, ornare nisi sed, facilisis massa. Mauris vitae orci vitae nibh porttitor interdum. Etiam sit amet dolor elementum, euismod est ac, venenatis risus. Aenean lobortis dui in magna accumsan, vitae consectetur diam pretium. Suspendisse in pharetra enim, nec aliquam felis. Morbi interdum lobortis blandit. Cras eu ante eu ante venenatis suscipit. Nunc ultrices nisi vel ultricies aliquam. Nulla arcu dui, posuere quis eros eget, convallis maximus purus. Nulla sed urna et orci ultrices bibendum. Praesent consequat nulla vitae turpis eleifend condimentum. Aliquam nec sollicitudin mauris. Nunc eu faucibus erat. Donec a risus quis erat rutrum varius. Etiam ultrices vehicula metus, in euismod arcu tempus ut. Aliquam vel ipsum accumsan, ornare nisi sed, facilisis massa. Mauris vitae orci vitae nibh porttitor interdum. Etiam sit amet dolor elementum, euismod est ac, venenatis risus. Aenean lobortis dui in magna accumsan, vitae consectetur diam pretium. Suspendisse in pharetra enim, nec aliquam felis. Morbi interdum lobortis blandit. Cras eu ante eu ante venenatis suscipit. </p> <a href="#" class="button">Read More</a> </div> </div> <div class="right-image"> <img src="fabric.jpg" alt="Image" class="image"> </div> </section> </div> </body> </html> the code here might look different but it solves the issue i was facing and gets to the root of the problem ill be reformatting before using it in my production environment / theme

December 30, 2023

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.