Blog item images too big

Hi:
The image that shows in the "blog" K2 "item view" is always XL even if I set the K2 parameters to another size. Can I disable this override? Can I also disable the image zoom/rotate on mouse over because it is not necessary in item view (I have already disabled the k2 modal).
Thanks,
Stephen

Hi

Please check if setting was not overwritten by category or item settings.

Tell me the url to the page with this problem.

No, all the item settings are "inherit from category" and in the category image size is set to "medium".
In general parameters I set medium image width to 400 and Xlarge is 880. In the item view, the image is coming up 880, but it is pixelated, so I think K2 is using the "medium" image.
Page is here (I previously sent you back-end login credentials):
http://www.dev.ficcionesmedia.com/prove ... er-special

Hi

Please go to templates/gk_steakhouse/css/k2.css and in line 97 replace the class:

Code: Select all

.itemImageBlock img {
    display: block;
    height: auto;
    max-width: 100%;
    padding: 0;
    transition: all 0.3s ease-out 0s;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    width: 100% !important;
}


with

Code: Select all

.itemImageBlock img {
    display: block;
    height: auto;
    max-width: 100%;
    padding: 0;
    transition: all 0.3s ease-out 0s;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    width: 100%;
    margin: 0 auto;
}


Thank you. I have done that but now the image is not centered. To I need to add an align to the same class?

Hi

Something is wrong. Not all the lines are copied and also the code I copied here is not complete.

Here is the code You need to replace this class with:

Code: Select all

.itemImageBlock img {
    display: block;
    height: auto;
    max-width: 100%;
    padding: 0;
    transition: all 0s ease-out 0s;
    -webkit-transition: all 0s ease-out 0s;
    -moz-transition: all 0s ease-out 0s;
    -ms-transition: all 0s ease-out 0s;
    -o-transition: all 0s ease-out 0s;
    width: 100%;
    margin: 0 auto;
}


also remove this class from same file (a very next class)

Code: Select all

.itemImageBlock:hover img {
    transform: rotate(5deg) scale(1.3);
    -webkit-transform: rotate(5deg) scale(1.3);
    -moz-transform: rotate(5deg) scale(1.3);
    -ms-transform: rotate(5deg) scale(1.3);
    -o-transform: rotate(5deg) scale(1.3);
}


My fault. Thank you for your patience. It's fine now.

Hi

Great news glad I could help.