Product attribute images

[vmax]

[hi guys im trying to find the correct setting to get all my attribute images to be the same height

i have tried adjusting the settings under admin>configuration>images but nothing seems to control this, i have tried a google search as well as searching zencart.com and found a few people ask the same question but they never responded if they sorted it or how
i basically want them the light up in a row rather than being all different heights
if its relevant i have image handler mod installed but can see anything there either

see screen shot and product page so you can see what i am referring to
and thanks for taking the time to read this

https://www.cjscreativecrafts.com/tr...traw-p-35.html

[mc12345678]

Attribute image html tags are basically generated in includes/modules/attributes.php. There are multiple ways to force consistency, with some more business use friendly than others.

I apologize for not digging through the coffee of that file further before posting. I saw no one had answered even a pay off your question and thought I would at least get things started. I did apparently also find out that on a Google Pixel device, use of the web address prefix view-source: to a web address doesn't show me the html like it did for me on a Samsung. Still have to figure out the quirks but...

There is CSS that accompanies the HTML; however, it would be better for the browser to pull the image of the desired size directly rather than the guest experiencing a screen shift.

As for template type things, sometimes s purchased template will out features of a core files capabilities. Sometimes it will add to it. One way though to identify differences is to activate one of the default templates and then activate the test template, review the differences such as what is seen, what is sent to the browser, how the code differences have an effect, etc.

[vmax]

Attribute image html tags are basically generated in includes/modules/attributes.php. There are multiple ways to force consistency, with some more business use friendly than others.

I apologize for not digging through the coffee of that file further before posting. I saw no one had answered even a pay off your question and thought I would at least get things started. I did apparently also find out that on a Google Pixel device, use of the web address prefix view-source: to a web address doesn't show me the html like it did for me on a Samsung. Still have to figure out the quirks but...

There is CSS that accompanies the HTML; however, it would be better for the browser to pull the image of the desired size directly rather than the guest experiencing a screen shift.

As for template type things, sometimes s purchased template will out features of a core files capabilities. Sometimes it will add to it. One way though to identify differences is to activate one of the default templates and then activate the test template, review the differences such as what is seen, what is sent to the browser, how the code differences have an effect, etc.

many thanks for taking the time to respond
this is the default responsive template that is built into zencart
i have spent hours playing with the css both manually and by using the inspect option in google chrome but nothing i have tried will change the height of these images and give anything like consistent results, i have tried resizing the actual images themselves to all be 1 size and even then i get this mixed height issue that outs everything out of line
i am at a complete loss as to how to control this

[balihr]

The best way to achieve it is to have all images in uniformed dimensions. This takes A LOT of time for preparing the images, but is generally worth it. So, let's say you opt for 600x600 px - make sure ALL images use those dimensions. Same goes for attribute images.

If all of your original images are the same dimensions, you should be fine, but as always, there's a but... If your titles that show with the images are different lengths, or maybe multiple words so the title ends up split into two rows, you're back to square one and the layout will be messy. You could mess around with the template and make the container a flexbox and apply various flex styling, which will then automatically align everything, but it might be a bit overwhelming.
You could also try a jQuery plugin, such as this. It's quite old, but still works like a charm and, depending on your coding skills, might be easier to implement than flexbox.

[vmax]

The best way to achieve it is to have all images in uniformed dimensions. This takes A LOT of time for preparing the images, but is generally worth it. So, let's say you opt for 600x600 px - make sure ALL images use those dimensions. Same goes for attribute images.

If all of your original images are the same dimensions, you should be fine, but as always, there's a but... If your titles that show with the images are different lengths, or maybe multiple words so the title ends up split into two rows, you're back to square one and the layout will be messy. You could mess around with the template and make the container a flexbox and apply various flex styling, which will then automatically align everything, but it might be a bit overwhelming.
You could also try a jQuery plugin, such as this. It's quite old, but still works like a charm and, depending on your coding skills, might be easier to implement than flexbox.

hi there
all of the images are identical dimensions and resolution but even after taking the trouble to do that they still dont all line up it really is driving me insane

[balihr]

Looking at the link you posted above, they are NOT the same dimensions. First row all images ARE 1000x1000px, but then comes Pikachu at 2462x2984 px, followed by a 1100x1100 px image (which is fine as long as all ratios are always the same).