K2 frontpage module with categories

Hi, I can´t find any post about this.

I would like to show with the news_pro_gk4 frontpage module 8 K2 items from a category and 1 k2 category item that containing 3 or 4 items.
See attached image for a "better" explain.

When i clic in any of the first 8 k2 articles i see the article, but if I clic in the "Category thumbnail" (the last in the image) I need to show the articles in the category.

I do not know if this is possible

I hope you understand me.

Thank you.

Well you ll need a lot of changes for this. So to give you heads up following is what you need to do.
1. Change current module to 2 rows so it displays 6 boxes.
2. Copy above to make a second module, set row to 1 and set width to 66.6% and set padding to 12px, use custom suffix to make module container 66.6% and float=left. Turn off module title. This will display 2 boxes and float to left side.
3. Create a custom html module as nsp does not link to categories , use a picture same size as current thumbnails size and insert in to editor and link it to category of your choice, use custom suffix in module to set padding correctly and set to float right.

I am sorry I am very limited with time so i couldn't provide a full solution , I hope above will help you.

See you around...

Ok, thanks for your time.

I understand, this can work.

Thanks.

No problem at all, see you around...

Hi again, I'm sorry but I have still problems. I can not make it work. I have problems with custom suffix of the second module, there are many suffixes dependent on the style sheet. Can you tell me what should I change?

...use custom suffix to make module container 66.6% and float=left.

Thanks a lot.

Edit Second NSP module and set as below.

module suffix: nsp gallery second
width: 101%

in your custom html module use below module suffix with a space infront.
Module suffix: rightnsp

Edit override.css and add below css and enable css override from template settings > advanced settings > css override "on".

Code: Select all

.second { width: 68%; float: left; }
.rightnsp { float:right; }
.box { margin-top: 5px; }


Edit custom html and add your image and link it, adjust height width to match other blocks. You might need to play with width padding, margin to get them lined up.

See you around...

Great! Thank you!
It´s work.

One more question. (I hope this is the last)

Is there any possibility that one of the tables contain no link?
I have 9 items and I want the center square has no link. Is this possible?

Thanks for your great help and support.

Here is a better way to accomplish what you wanted by using javascript. Not sure if you wanted to change center box image too if not let me know.


See below for what it does.

1. Center box no 5 , replaces image, removes titles, removes link, removes hover image and any elements with it.
2. Last box no 9, replaces image, replaces link, replaces title, removes hover image and any elements with it.

You need to bring your website back to original by undoing what we have done in previous posts, disable any extra modules you have created, edit original module and set its row back to 3, remove any override.css so we are back to original style with 9 boxes.

Step1. Add JQuery
Find File: \templates\gk_myfolio\layouts\blocks\head.php
Find Line: 102 and 103 which is below

Code: Select all

   // include JavaScript
   $this->addJS($this->URLtemplate() . '/js/gk.scripts.js');


Replace with below

Code: Select all

   // include JavaScript
   $this->addJS($this->URLtemplate() . '/js/gk.scripts.js');
   $this->addJS('http://code.jquery.com/jquery-latest.js');


Step2. Add our script.
Find File: \templates\gk_myfolio\layouts\blocks\footer.php
Find Line: Add it at the end of the file.
Add below script

Code: Select all

<script>
$(document).ready(function () {
var img1 = $(".tleft .fleft").eq(4);
var link1 = $("div.gallery .nspArt > div > a").eq(4);
img1.attr('src','http://demo.gavick.com/joomla16/aug2011/modules/mod_news_pro_gk4/cache/k2.items.cache.1c0ae2205709722b62e843abc0471a55_Lnsp_207.jpg');
img1.removeAttr('title');
link1.removeAttr('href');
link1.removeAttr('title');
$("div.nspContainer").eq(4).remove();
var img2 = $(".tleft .fleft").eq(8);
var link2 = $("div.gallery .nspArt > div > a").eq(8);
img2.attr('src','http://demo.gavick.com/joomla16/aug2011/modules/mod_news_pro_gk4/cache/k2.items.cache.f710044bf79a4b1f5d8b085e5e5d9711_Lnsp_207.jpg');
img2.attr('title','Click For More News');
link2.attr('href','http://www.gavick.com');
link2.attr('title','Click For More News');
$("div.nspContainer").eq(7).remove();
});
</script>


Tip: You can use any means to include your javascript in to your joomla. Such as using modules to include your script on specific pages. See joomla extensions for more info.

That's it, see below on how to change boxes, images, titles, links etc...
Usage:
Our script selects box no5 by using below. Scripts starts from "0" so our fifth box becomes "4" in script so ".eq(4);" is our 5 box. Formula is n-1=x, ".eq(x);"
var img1 = $(".tleft .fleft").eq(4);

For other users want to change box selection to change it to their usage simply change its box number as above.

Change following samples with your own links, text, image url etc.
Image

Code: Select all

http://demo.gavick.com/joomla16/aug2011/modules/mod_news_pro_gk4/cache/k2.items.cache.1c0ae2205709722b62e843abc0471a55_Lnsp_207.jpg
http://demo.gavick.com/joomla16/aug2011/modules/mod_news_pro_gk4/cache/k2.items.cache.f710044bf79a4b1f5d8b085e5e5d9711_Lnsp_207.jpg


Title

Code: Select all

Click For More News


Link

Code: Select all

http://www.gavick.com


Optional: Also see below link for customized css for each box

Code: Select all

https://www.gavick.com/forums/133/solved-remove-launch-project-11117.html?p=71391#p71391


See you around...

---------------------------------------
Search Terms:
Myfolio edit boxes.
My folio chage link
Myfolio change image
News Show Pro My Folio change image change link

Hi, thank you. It´s work pretty good. This is what I need.

When I add the jquery code at my front page I can´t view the Image Show GK4 module, I mean, I can see the module but never end to load the images. If I remove the jquery code the module works again.

Another question, ¿How can I limit this code to one page? When I add the script it affects to all my News Pro modules.

Thanks for your help and support.

Because for test purposes i have placed the javascript in footer code for quick testing because of this it loads all the time. I have also stated that you can use other means to include your javascript

See below link for custom html modules which you can include custom javascript and assign the module to a specific page id or menu id.

Code: Select all

http://extensions.joomla.org/search?q=custom+javascript


I am on holiday at the moment so i can't do any testing, if you can't work it out I'll check it out and post here when I am back, see you soon...

Hello, I installed various modules to insert custom javascript, but I could not make it work.

I can put the script in a module and assign to a item menu.
My problem is this code:

Code: Select all

   // include JavaScript
   $this->addJS($this->URLtemplate() . '/js/gk.scripts.js');
   $this->addJS('http://code.jquery.com/jquery-latest.js');

How and where do I have to put it?
If I put the code in the same module doesn´t work. If I put the code in another module doesn't work...

But if I put this code in gk_myfolio/layouts/blocks/head.html and the script with the extension module it work but the problem is that the module I have in the home page (Image Show GK4) stops work.

Thanks again for your time.

Please, I need a little help.
Can someone please answer my previous post?

Thank you.

I have done this test with Imageshow GK4 and it is working fine. What is your Imageshow GK4 version and which template are you using inside Imageshow GK4 module.

Let me know, see you around...

Hi NormanUK, good to see you.

Template of Imageshow -> cherrydesign, version ->1.26

If I put the jquery code at the ../head.html then the images inside of the module loads forever.

Thank you.

Please disregard step 1 which was adding javascript library in head.php.
In your javascript module or in my example "footer.php" include following code instead of previous one.

Code: Select all

<script>
jQuery(document).ready(function(){
var img1 = jQuery(".tleft .fleft").eq(4);
var link1 = jQuery("div.gallery .nspArt > div > a").eq(4);
img1.attr('src','http://demo.gavick.com/joomla16/aug2011/modules/mod_news_pro_gk4/cache/k2.items.cache.1c0ae2205709722b62e843abc0471a55_Lnsp_207.jpg');
img1.removeAttr('title');
link1.removeAttr('href');
link1.removeAttr('title');
jQuery("div.nspContainer").eq(4).remove();
var img2 = jQuery(".tleft .fleft").eq(8);
var link2 = jQuery("div.gallery .nspArt > div > a").eq(8);
img2.attr('src','http://demo.gavick.com/joomla16/aug2011/modules/mod_news_pro_gk4/cache/k2.items.cache.f710044bf79a4b1f5d8b085e5e5d9711_Lnsp_207.jpg');
img2.attr('title','Click For More News');
link2.attr('href','http://www.gavick.com');
link2.attr('title','Click For More News');
jQuery("div.nspContainer").eq(7).remove();
});
</script>


See you around...

Thank you.
It´s work. Thanks for all your time.

See you around.

No problem at all, see you around...