ayz1 Posted February 24, 2016 Share Posted February 24, 2016 How would I make all the image boxes the same size like they were in V3 - V5? Need them to all be equal height and width so that all the product titles line up when in grid view. I'm using Foundation skin V6.10. Quote Link to comment Share on other sites More sharing options...
bsandall Posted February 24, 2016 Share Posted February 24, 2016 An easy way (i.e. doesn't require code edits) is to make sure all my images are the same size using a free utility program such as FastStone Resizer. Using the advanced options, it is super easy to resize entire directories full of images with the added bonus that it also tends to dramatically reduce file size which is important for website images. Couple that with an image importer script and you can have all your images updated in just a few minutes. Quote Link to comment Share on other sites More sharing options...
ayz1 Posted February 24, 2016 Author Share Posted February 24, 2016 Thanks for that seems like a handy utility to have. What I am hoping to achieve is to make the image frames all the same size with a white background and center the images vertically and horizontally within the frame. The images sizes are OK as they are as there does seem to be some sort of automatic resizing going on when the thumbnails are created. Quote Link to comment Share on other sites More sharing options...
ayz1 Posted February 24, 2016 Author Share Posted February 24, 2016 Had a look at this a bit further and it seems the image thumbnail isn't in its own frame so maybe I need to look at creating a frame for it. Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 24, 2016 Share Posted February 24, 2016 As long as the source images are bigger than the largest size defined (in the skin's config.xml file), CubeCart make them smaller to for each size defined. That is, if the skin's config.xml file has a definition that makes an image 600 pixels, then be sure to upload at least a 600 pixel image. But here's the part that most seem to not realize - the image variants will be created so that the longest side of the image is that length. That means, a 700x210 pixel image will get resized to 200x60 (if there is a definition for a 200 pixel size), which is wide and short, and a 210x700 pixel image will get resized to 60x200. which is tall and narrow - because it is important to maintain the "aspect ratio". What does not happen is that the 700x210 and 210x700 images both are resized to 200 wide -- 200x60 and 200x667. It is obvious that a 667 pixel tall image is not going to fit in a box that is 200x200 pixels Included with Foundation is a plugin called the Equalizer. Properly used, it will make sure each product panel is the same height regardless of the height of the image in that panel, and that the price and form controls (quantity and "Add to Basket" button) are at the same location in each panel. Other CCS tricks can be employed to make sure the image is centered within the container that holds it. It is your need to use these CSS tricks to make sure the images show in the middle and center of the container. That trick is to apply a display:table-cell;vertical-align:middle;" style to the container. Also, you may want to adjust the size of the font in the panels, as this is twice as big as they need to be. Quote Link to comment Share on other sites More sharing options...
ayz1 Posted February 25, 2016 Author Share Posted February 25, 2016 Many thanks for the info bsmither. Will play about with it and see how I get on. I have it almost there but can't get the image to move from the top of the container to the middle. Think I will need to set a new class and try it with that as getting some odd results when I change the existing one as it is used in other sections of the page. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.