Gallery Image Borders....

Follow

Comments

7 comments

  • Avatar
    Zetya Support

    Hi Scott,

    The css (styles.css.liquid in Theme > Template Editor) you are looking for is "#products .image". It currently has a 1px border though, so you can't really reduce it any further.

    Gavin.

  • Avatar
    Scott Sporleder

    Thanks Gavin,

    I guess I should have described it better.... if you take a look at the link below I have a sample image I am using for numerous products. I am trying to figure out how to enlarge my entire product image so that it fills the whole square (so the black part of the image goes all the way out the the edge.

    http://sporlederart.myshopify.com/collections/waves

    I hope that explains what I mean a little better. Thanks for the help! Love the Theme

  • Avatar
    Zetya Support

    Ok, I see what you mean now.

    Shopify has predetermined image sizes. For the gallery I am using compact which is 160px. What we need to do is use the next one up which is medium and 240px. Unfotunately, once you account for margins and padding it will be too wide, so we need to limit the image size via CSS.

    Two steps:

    1. Open the gallery snippet (Theme > Template Editor) and replace 'small' to 'medium'  where it  says product_img_url: 'small'. It should look like this:

                <img src="{{ product.images.first | product\_img\_url: 'medium' }}" alt="{{ product.title | strip\_html | escape }}"/>

    Save and Close.

    1. Open styles.css.liquid and add the following to the bottom of the file:

    #products .image img {max-width:210px; max-height: 210px;}

    Save and Close.

    Using CSS to reduce the image size is not considered optimal as you will lose some quality. I'd recommend trying it to see if it matters for your images.

    The alternative path is to got to a 3 col layout with the medium images. Let me know if you are interested in how to do that and I'll write it up.

  • Avatar
    Scott Sporleder

    Gavin,

    Thanks so much for all of the help, I really appreciate it as well as how prompt your responses are. I just have one last question before I launch my site.... there seems to be an issues in safari and I.E. that when you roll over the images in the gallery it causes the next few images to get bumped down into the next row. I've played with the CSS but can't get it to go away... .please let me know if you have any thoughts on it. You can see what I am talking about by following the link below in either Safari or IE:

     

    http://sporlederart.myshopify.com/collections/exotic-places

     

    Thanks! and I look forward to hearing back from you ,

    Scott

     

  • Avatar
    Zetya Support

    Hi Scott,

    The site is looking good so far. Colors are working nicely.

    The "jump" is caused by the hover effect defined by #products .image:hover in the CSS:

    #products .image:hover {

    border:5px solid #CCCCCC;

    padding:1px;

    }

    It is making the border 5px, but it is also setting the padding to 1px. This is because #products .image originally had a border of 1px and padding of 5px. In effect, when you hover it is taking up some of the padding with the larger border. However, there is no longer enough padding defined for #products .image.

    Ok, so to fix the problem I'd suggest the easiest way would be to simply change the hover border width to 1px. You could also use the highlight color:

    #products .image:hover {

    border:1px solid #9FD17C;
    }

     

    Cheers, Gavin.

  • Avatar
    Scott Sporleder

    Gavin,

    I swear.... just one more question and you'll never have to deal with me again! Ha

     

    I've launched my new site and everything is looking killer, it's just that in Safari the product boxes are now loading in a long rectangle? Any thoughts on what's causing this?

    http://sporlederart.myshopify.com/collections/waves

     

    Thanks so much for the help... really really appreciate it.

     

    Scott

  • Avatar
    Zetya Support

     

    Hi Scott,

    I'm not seeing the long rectangle - is that on the product page or collection page?

    The other thing I was going to suggest is removing the borders, since your product photos have a border already (see attached).

     

    sans-border.png

     

    Thanks, Gavin.

Please sign in to leave a comment.