images in category view

Hi,

I'm trying to chenge the image size in the category view but I cannot edit the parameters in the MENU setting.
My menu item is K2 Categories set; the K2 category is set to view images Small and X-Small, but in the menu item there are other settings which are not editable.
I attach the image about the menu item to show you the problem.
Can you please help me? Thank you.
the url for this example is http://www.lodicitta.it/gavick_news2/in ... il-fondale
I am trying different type of views (using no image in the k2-item and using it).

The images width is forced to 100% of the container to avoid problems with different screen resolution. I can provide you info which code you should remove but please give me some example URL to this view.

Hi,
here is the link I am trying to adjust http://www.lodicitta.it/gavick_news2/in ... il-fondale

Please add this code to override.css file in root/templates/gk_template_name/css directory :

Code: Select all

section img { width: 100% }


and then just remember to enable "Use override CSS" option in template advanced settings tab. You can of course change the 100% to value in pixels for example: 250px.

thank you, but the images file should have a specific size or not? with this code you can see that the image is not with the best quality even if in the k2 parameters I have set 100% everywhere. can you please have a look and then tell me what to do?
thanx again.

hi. I resized the image inside the article at the top to avoid these problems, but I would really like to find the solution, because I would prefer to have the image above the title, and with my settings now is not that way. Since I need to publish my website as soon as possible, can you please help me? I only left 1 article with the image set and you can find it here: http://www.lodicitta.it/gavick_news2/in ... il-fondale
the article is SOLDI: QUANDO LA COMUNICAZIONE FA LA DIFFERENZA.
Thank you very much.

Yes, but to change the order the only way is to modify this view. Please open file template/html/com_k2/templates/default/category_item.php and move this code :

Code: Select all

<?php if($this->item->params->get('catItemImage') && !empty($this->item->image)): ?>
            <div class="itemImageBlock"> <a class="itemImage" href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>"> <img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" /> </a> </div>
            <?php endif; ?>

below the closing header tag :

Code: Select all

</header>

I have made this change but, as you can see, it moved the image (in low quality) just after the title.....

immagine_titolo.jpg

I don't understand why there are so many problems with image quality, that's the only reason why I put the image within the articles instead of using k2 image setting (which I would prefer).

Please paste the code before the title of the post in the same area, what is more you can't use the same code twice in one view so you should see one image. This means you need to CUT code and paste before title opening tag (H2 probably)

sorry, but I don't uderstand what to do.
if you go http://www.lodicitta.it/gavick_news2/at ... il-fondale you can see which is my problem, and I also have the same problem with image quality in my HP with the zoom-effect. (In HP all the articles have the image directly withinh the content).
I hope you can help me, maybe with access details you already have.

I just can't uderstand why you have duplicated images - did you modify code to place image twice? Please add this code to override.css file in root/templates/gk_template_name/css directory :

Code: Select all

.itemImageBlock img { width: auto !important}


and then just remember to enable "Use override CSS" option in template advanced settings tab. This will avoid stretch image to 100% width.

hi. I have solved the problem with the order of title and images.
But there still are these troubles:
1. when the mouse go on the image, it loose its quality with the zoom effect (the original file is 600x337px);
2. the order of the items in the category view is inverted respect to the settting (I have set Most recent before, but it works backwards).

can you help me?

If you want to remove this :hover effect please add this code to override.css file in root/templates/gk_template_name/css directory :

Code: Select all

.itemImageBlock img:hover {
   -webkit-transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
   -moz-transform: scale3d(1 1, 1) translate3d(0px, 0px, 0px);
   -ms-transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
   -o-transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
   transform: scale3d(1, 1, 1) translate3d(0px, 0px 0px);
}


and then just remember to enable "Use override CSS" option in template advanced settings tab.

2. What you mean by inverted? There are no dedicated settings for this view, it just display text + image in order to code in this layout view.

1. the hover effect I like it very much and don't want to remove it, just would like it works well....
2. the inverted items is about all items in this category and in its category view. Even if IL FONDALE has the parameters inherit from other category, is the only one that ignore them completely. Maybe there is something else I must check? I don't really know why in this category it shws the older items before the most recent.

How can I remove the effect in HP?

What you mean by HP? The hompage? There is probably not easy way to disable part of CSS only for one page…

Yes, HP is Home Page. I added the code in override and it removed all the effects within the site except from HP.... Since I still have the problem with the quality, I would prefer to remove it also from HP. Can you help me?

Please add this code to override.css file in root/templates/gk_template_name/css directory :

Code: Select all

.gkResponsive img.nspImage, img.nspImage.gkResponsive { width: auto!important{


and then just remember to enable "Use override CSS" option in template advanced settings tab.

it doesn't work.... even if I change your last parenthesis in the closing one, it doesn't work.

Please provide me URL to page where you still have the problem with this images. Are you sure that override.css file is enabled ?

the web site is www.lodicitta.it
the override.css is enabled because it is full of code!!!!

Please add this code to the same file (override.css) this will definitely resolve your issue :

Code: Select all

.nspMain .nspImageWrapper:hover img {
-webkit-transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
-ms-transform: scale3d(1, 1, 1) translate3d(0px, 0, 0px);
-o-transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
}

ok. finally it works!!!! thank you!!!!