Help on K2 image crop

rossella1

Hello I'm trying to get the K2 images to be cropped so that in K2 category view they are the same height.

I'd like to get the images cropped in K2 item view as well.

A couple of years ago I managed to get those K2 overrides in another site with MSocial template, but I cannot remember how I did it: I know I made a css override, but I don't know why it does not work in my TechNews template site.

The css override I have in my MSocial template site is:
.itemImageBlock {
height: 300px;
overflow: hidden;
}

But it does not apply in TechNews template...

I searched all over the forums, K2's included, but no luck.

Thanks in advance for any help,

:-)

teitbite

rossella1 Hi. Please add this to custom js filed and than Your code should work.

<script type="text/javascript">(function($) {$(document).ready(function() {
$('.header-wrap .img').wrap('<div class="itemImageBlock"></div>');
});})(jQuery)</script>

rossella1

Hello,

thanks for your reply; maybe I'm missing something: uhm... where do I put custom js?

I added in custom.css the code
.itemImageBlock {
height: 300px;
overflow: hidden;
}

In template directory there is a js folder; I created a custom.js file and I added the code you provided to it, without results; I added it also to gk.scripts.js, but none of methods works.

Emptying the cache did not help

Thanks for your kind reply :-)

saguaros

rossella1

For JS custom code, you can insert at the end of this file: /templates/gk_technews/layouts/blocks/head.php

rossella1

Hello,

unfortunately it does not work:

1) I added at the very bottom of the file /templates/gk_technews/layouts/blocks/head.php the code (I can see it in the source page)
<script type="text/javascript">(function($) {$(document).ready(function() {
$('.header-wrap .img').wrap('<div class="itemImageBlock"></div>');
});})(jQuery)</script>

2) I added in the override.css the code
.itemImageBlock {
height: 300px;
overflow: hidden;
}

3) I enabled the css override

4) I emptied both the browser and joomla cache

No result...

Yet I managed on a MSocial template site to get the K2 images being cropped both on item view and category view... But I can't remember how I did this: I think I only added the css override without any other hack.

Thanks in advance for any further help :-)

teitbite

rossella1 Hi. Please provide an access to joomla panel. I'll check what can be wrong wiht the script added.

rossella1

Ok I edited the post to access to joomla panel; thanks in advance :-)

saguaros

Hi rossella1
If you simply want to set the height for K2 image, you can use this css:

#k2Container img {
    height: 300px;
}

and add style as you wish.

rossella1

saguaros thanks for your reply, but I would like the K2 item image to be cropped (in height possibly in the center of the image) not just resized: your code simply resizes the image in proportion.

I managed to get what I want in the MSocial template, but it seems the css override in that template does not apply in technews

teitbite

rossella1 Hi. Sorry there've been a small typo in my code, an extra dot.

Here is the correct one and looks like it's working:

<script type="text/javascript">(function($) {$(document).ready(function() {
$('.header-wrap img').wrap('<div class="itemImageBlock"></div>');
});})(jQuery)</script>

to crop the middle of the image add this code to css:

.itemImageBlock {
    position: relative;
}

.itemImageBlock img {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
}

rossella1

Thank you very much: it works like a charm.

Thanks for adding the code :-)