I’m trying to place some images onto various pages around my portfolio website that are pretty tall, and that would ideally appear seamless with the next / previous images on the page (for example, a full-page screengrab of a website layout that spans a few viewport heights). On other editors like Squarespace, I’ve never had an issue—just place your tall image in there, and it’s as tall as it needs to be while respecting the set column width. The next placed image simply sits below, and so on. On EditorX, I’m having a lot of trouble figuring out what to tell my grids / sections so that images aren’t automatically cropping vertically. Any advice? Thanks!
To fit it in the view port of your screen, put in a container, set to 100vh, then set it to be 100vh as well and dock it to all sides.
I hope that helps.
Thanks for the reply. What I actually need is for an image, no matter the height, to fit itself to the width of my grid, but then just display as tall as it needs to without cropping (whether you have to scroll for 2 viewport lengths, or 3, or 10). Basically, I want to just drop an image and not have to worry about its vertical cropping behavior.
Still use vh and within a section/container. You have to decide how big it is going to be. Personally, I wouldn’t make an image any taller than the view port, unless you want to allow for visitor to inspect the details of the image.
Cropping occurs when you change either the containers heigh, but not the image’s width, and hide the overflow. OR mess with the image’s proportions and don’t stay true to it ratios.
If you share a situation, either in the editor or live site, I may have a better understanding of your case.
Hm. So I guess what I’m getting at is that I don’t really want to decide how tall the image is. I just want the viewer to see the whole image as intended, so long as it respects the grid’s column width.
On other platforms, like Squarespace, you just drop your image, and it’s as tall as it needs to be to see the whole thing (again constrained by the width rather than the height). Then when you drop the next image, it just starts below the first image with no issue. That’s what I’m going for here.
In some cases, it’s because I simply want to show a long (tall) image. In other cases, it’s because I want to create the illusion of a “seamless” experience as you scroll down the page, so I want multiple images strung together to look like they are one long unbroken image, so having random crops in there will break that illusion.
A few examples (not from EditorX but the goal is illustrated here:
-
If you scroll down this project page you will find a long website mockup. It’s a tall image, and it doesn’t really matter how long the user scrolls, as long as they see the whole thing.
-
Here’s another example . This page is comprised of multiple images, but they have elements that connect one image to the next so that it appears like a long, seamless layout.
Sorry if I seem dense; appreciate you taking a look.
If you want an image to appear like that, then set your Section Row to either AUTO or have a min-height of what ever and auto max-height. Drop the image into the row, then select the expand icon at top right the image. This will conform the image to the row and the row to the the image size.
I hope this helps.
So I guess that’s where I’m confused. When I’m in my grid and set my height to AUTO, it just doesn’t ever actually honor that—it seems to exclusively favor the Min-Height. Like if I set my Min-Height to 600px and my Max Height to Auto, it just becomes 600px, both in the editor and in preview. If I set my min-height to Content, the whole row and image just disappear.
Maybe the Grid and Section relationships are not correct somehow? I know the Section settings override the Grid settings kind of, right?
See two attached screengrabs of my Grid + Section settings (and I’ve played with these 100 different ways but I believe this is what you’re saying).
There are two things you need to look at when managing grids; the settings in the grid layout itself and the dimensions in the editor inspector, as they both need to correlate.
Sections do not always have a grid applied, and I always apply one, especially when I have content that goes past a page-fold.
The Grid is a tool to allows you to control portions of your page that are interchangeable. Allowing you to move major blocks by simple redefining which row or column that are occupying in the inspector.
Looking at your screen shots, I only see one row housing numerous elements. I would be break down the grid into more rows to be able to control your elements more.
SOLUTION TO YOUR IMAGE HEIGHT ISSUE IN THIS CASE
Create a Grid with as many columns and rows as you need. Drop image onto layout, assign it to a Grid’s row and column, and then make image 100%… This worked for me.
I set my grid to have 4 rows, then assigning my image to start at 1 and end on 2.
Then set the image to 100% and centered it.
No messing with grid row heights or grid inspect heights, leave them as is.
I hope this helps.
Here is a link to the examples. Put a tall image and employed the same methods to demonstrate.
Ah, thank you! The issue was that I had been stretching my image to the grid cells (similar to what you were showing above—that’s how most of the images on my site live when I don’t care about cropping), rather than placing it and assigning Width = 100% .
The multiple elements you’re seeing are just part of a flat image of a website design, not actually comprised of different elements.
Thanks so much for your patience and help here. You saved the day!
You are welcome good luck and most of all don’t forget to have fun!
@teejay I’m trying! At risk of wearing out my welcome, any ideas as to what might be causing this one? If not no worries; I do appreciate the time you’ve taken with me already, ha.