HI,
I’ve been able to implement image maps, sliders, custom site styles and all kinds of neat things but when trying to simply line up three images to Lightbox or three identical (or nearly identical size) images in a row within a two column stack say for instance in the right hand stack,
the stacks like to alter the sizes of the images and give the center a special miniature size with the outer two images left near their normal size. Then it seems to fight the padding assigned to it and the outer images still show up larger than life with the center image squishing in and up.
I thought there was a way to constrain the images within a box that can fit neatly side by side with other image boxes within a stack that will responsively react to browser size.
Does anyone know of a stack that will shove images next to each other seamlessly without any of this struggle? Lightboxes that will keep all the thumbnails one size?
I used to create enormous sliced artworks in photoshop and export them to dreamweaver without a sliver of space.
Now i’m struggling taking three large images and just putting them side by side. or thumb nailing three images under a main image and having them line up. What am I doing wrong here?
An example of the misalignment can be seen here: vitalisvapor.com
There were thumbnails below both larger image sets and they were removed due to the sizing issue
I think the built in 3-column stack and the built-in images stack.
The built-in 3-column stack:
can have zero padding/margin/gutter between columns
is responsive
resizes all columns the equally
responsively stacks the columns on mobile (you can disable this if you want to)
The built-in image stack will resize images.
My only recommendation would be to start with 3 equal columns and 3 images that are the exact same dimension – as their differences will be magnified as the images are resized.
You seem to have a lot of “other stuff” going on there too: alignment with other things, thumbnails, lightboxes, etc.
I’d strongly urge you to work on one problem at time: make a partial or a separate page to isolate just the the issue at hand – then you can be sure that problem is solved before adding the other pieces of the puzzle.
Thanks for the advice Isaiah - I’m sort of new to the procedure -
I recreated the image from scratch and made sure the slices are exact.
placed the images into a new 3 column foundation stack that is full page width with no interference.
The first two images appear to display correctly and the third image (to the right ) is scaled slightly smaller. I’ve played with every setting and tried adding padding to match the size etc and nothing balances out…
This is just three images that were sliced from a single image. With no other coding around it. Why is this so difficult? As a user what I expect when I drag three images and the settings say things like “equalize” tried both on and off and there are 0 padding and margins. The images should all show proportionately at the same size together. Odd the right most image is the only image being altered by the code size wise and refuses to match
still It makes no sense to me why this is happening. I’d like to see the setting that is chosen to create this
I’m afraid you’ll have to ask @joeworkman directly about why this is happening in Foundation. I could make a guess – but without being the author of that code, I’d be as likely to send you off in the wrong direction.
As a quick test, let’s eliminate some of the variables and just use built in things. Try this:
I removed some of the variables from your setup: no 3rd-party stacks or themes. No other content on the page. No possible chance of slicing the images differently (since I use the same one).
If this experiment also works for you – you can add back in your complexities one at a time – when things break you know you’ve found your culprit and you can eliminate it, fix it, or report it to the developer.
Give it a try and let me know how it goes for you.
you are a great guy for taking the time to put that reply together.
These slices are taken and optimized with no size alterations of any kind. I used the un-optimized images to test and same problem occurred within weaver. I took EXTREME CARE to make sure the slices were exact. The computer perfectly trisects the image and creates the output. I aligned to grid lines and the image software is Not the problem. the image is aligned to the Pixel.
Here is the image program with the slices set up at 33 and 66 percent.(notice the thin blue lines)
Are the slices also the same width? Responsive layout will resize things until they are the exact same width. If they start out with different widths then when they responsively resized it will result in different heights
yes indeed they are different widths* 419, 420, 433 pixels all are 1252height
I will redo the image and create an even width sliced version and test it out however this is ridiculous if that is the case and there is no easy work around.
If that is the case then the mystery is solved and we know what is doing it and how to remedy the issue right?
This can’t be desirable by default. there has to be a checkbox for this somewhere and if there isn’t we need to put in a request pronto !
What do you think? I’m guessing someone has already encountered this and there is a stack or at least discussion pertaining to this somewhere already…
UPDATE:
That seems to have worked.
it is the image width . Good man.
Now that we know of this simple issue we should have this as part of the next update.
The idea of responsive content is that you define the width of the column and the content is fit inside that width. If you start with images with different widths and force them to have the same width – then they will, of course, be resized different amounts.
I guess what you were looking for is to have the columns change their width relative to dimension of the images within them. That’s not actually a very easy problem to solve, much less within constraints of HTML/CSS.
Whenever I see someone having a tough time trying to make a tool do a job different from the thing it normally does I think it’s best to take a step back. Maybe there’s a different way to solve the overarching problem that is less work? Perhaps you just need a sort of image map stack? Or maybe something else? Maybe look at how other sites are solving similar problems and try to go-with-the-flow. Sometimes it’s easier to do that then keep trying to hammer nails with your spanner.
I wasn’t aware of the fact it isn’t the average thing to slap images into a page and define the image dimensions by the boxes they are inside. I was under the impression the boxes could be made to whatever size one chooses and then within the three column stack if one was to define the size of that stack over all, everything within that box would scale proportionately. That isn’t the case here. The math is based on width heavily and not so much 3d proportion.
I always bring up dreamweaver because they are pretty good with intuitive controls and functions and years ago the table tools actually behaved the way I am describing because that is what I was used to and had no trouble with. I don’t have an adobe membership any more (hence why I have rapid weaver and not dream) and so I have no idea what that tool is like these days. I’m sure it has become infinitely enhanced vs when I used it around the time flash was just coming on to the scene and was being overdone everywhere…
In this case I was assuming the program behaved this way because that would be convenient however you are right I mistook a hammer for a crowbar and was hoping it could get the job done but really can’t in that fashion. It would take welding a hammer head to this crow bar
There should be an image stack with constrain proportions and adjust heaight and width and choose to link the height and width the same way image programs work.
Scaling based on height, width or both height and width linked as well as an option to use scaling based on a percentage should be possible i would imagine.
