Adding K2 item titles under image in Portfolio style

Hello,

I follow this document to add the K2 item title in Porfolio style for Creativity template: http://www.gavick.com/documentation/joo ... w-pro-gk5/
However, when I press show more button, the new ones don't have the titles: http://screencast.com/t/hCtdi2mUgkx

Could you please help?

Thanks,
Giang Anh

Could You please post an url to your site where this issue occurs?

Could You please post an url to your site where this issue occurs?

Here you are: http://japp.vn
EN version in case: http://japp.vn/en

Thanks,
Giang Anh

Please help me, Cyberek.

Ok, please edit file:
/modules/mod_news_pro_gk5/portal_modes/portfolio/script.jquery.js, find line:

Code: Select all

img.html('<img src="' + jsondata[i].src + '" alt="' + jsondata[i].title + '" />');


(around 44)
and replace it with:

Code: Select all

img.html('<img src="' + jsondata[i].src + '" alt="' + jsondata[i].title + '" />'+jsondata[i].title);


It should help.

Is there any way to get this into /template/html/mod.... folder so as to not loose it all on update ?

Sorry, no - you need to merge this change after module update .

Anybody have an updated version of the documentation of the link below http://www.gavick.com/documentation/joomla-extensions/extensions-for-joomla-1-6/news-show-pro-gk5/ for a Joomla 3 site using Creativity template?

I believe line 39 is now line 40 and the code looks too different for me to figure out what to modify.

Thanks in advance

Hello,

I follow this document to add the K2 item title in Porfolio style for Creativity template: http://www.gavick.com/documentation/joo ... w-pro-gk5/
However, when I press show more button, the new ones don't have the titles: http://screencast.com/t/hCtdi2mUgkx

Could you please help?

Thanks,
Giang Anh

Are you sure you are editing correct file?
The change should be placed just after this block of code:
You need to modify this block of code:

Code: Select all

            if($amount < ($this->parent->config['portal_mode_portfolio_cols'] * $this->parent->config['portal_mode_portfolio_rows'])) {
               echo '<a href="'.$this->get_link($i).'" title="'.strip_tags($this->parent->content[$i]['title']).'" class="gkImage animate_queue_element active">';
               echo '<img src="'.strip_tags($this->get_image($i)).'" alt="'.strip_tags($this->parent->content[$i]['title']).'" />';
               echo '</a>';
               // increase the amount
               $amount++;
            } else {



so it looks this way:

Code: Select all

            if($amount < ($this->parent->config['portal_mode_portfolio_cols'] * $this->parent->config['portal_mode_portfolio_rows'])) {
               echo '<a href="'.$this->get_link($i).'" title="'.strip_tags($this->parent->content[$i]['title']).'" class="gkImage animate_queue_element active">';
               echo '<img src="'.strip_tags($this->get_image($i)).'" alt="'.strip_tags($this->parent->content[$i]['title']).'" />';
               echo ''.$this->parent->content[$i]['title'].'</a>';
               // increase the amount
               $amount++;
            } else {



Are you sure you are editing correct file?
The change should be placed just after this block of code:
You need to modify this block of code:

Code: Select all

            if($amount < ($this->parent->config['portal_mode_portfolio_cols'] * $this->parent->config['portal_mode_portfolio_rows'])) {
               echo '<a href="'.$this->get_link($i).'" title="'.strip_tags($this->parent->content[$i]['title']).'" class="gkImage animate_queue_element active">';
               echo '<img src="'.strip_tags($this->get_image($i)).'" alt="'.strip_tags($this->parent->content[$i]['title']).'" />';
               echo '</a>';
               // increase the amount
               $amount++;
            } else {



so it looks this way:

Code: Select all

            if($amount < ($this->parent->config['portal_mode_portfolio_cols'] * $this->parent->config['portal_mode_portfolio_rows'])) {
               echo '<a href="'.$this->get_link($i).'" title="'.strip_tags($this->parent->content[$i]['title']).'" class="gkImage animate_queue_element active">';
               echo '<img src="'.strip_tags($this->get_image($i)).'" alt="'.strip_tags($this->parent->content[$i]['title']).'" />';
               echo ''.$this->parent->content[$i]['title'].'</a>';
               // increase the amount
               $amount++;
            } else {



Forgive my ignorance for missing something but these 2 blocks of code look identical.

In my Joomla 3.2 site, the respective file located at


Has this for lines starting 37 and ending 48 and it does not match the code shown here so I'm not sure what to edit http://www.gavick.com/documentation/joomla-extensions/extensions-for-joomla-1-6/news-show-pro-gk5/

Code: Select all

   if($this->get_image($i)) {
            if($amount < ($this->parent->config['portal_mode_portfolio_cols'] * $this->parent->config['portal_mode_portfolio_rows'])) {
               echo '<a href="'.$this->get_link($i).'" title="'.strip_tags($this->parent->content[$i]['title']).'" class="gkImage animate_queue_element active">';
               echo '<img src="'.strip_tags($this->get_image($i)).'" alt="'.strip_tags($this->parent->content[$i]['title']).'" />';
               echo '</a>';
               // increase the amount
               $amount++;
            } else {
               array_push($jsondata, array(
                     'title' => str_replace("'", "\'", strip_tags($this->parent->content[$i]['title'])),
                     'link' => $this->get_link($i),
                     'src' => strip_tags($this->get_image($i))

Any clarification is very much appreciated

so for not putting all these into one single response, but here's a screenshot showing lines 38 through 44, exactly the same lines as in the original "how-to" guide, and mine looks different so not sure what to edit. If you could modify the code from my previous post I'd feel a little better about making the modification.

modules/mod_news_pro_gk5/portal_modes/portfolio/controller.php

I'm not quite sure how is it possible, that you are citing text that is different :/.
The line 41 should look this way:

Code: Select all

echo ''.$this->parent->content[$i]['title'].'</a>';


I'm not quite sure how is it possible, that you are citing text that is different :/.
The line 41 should look this way:

Code: Select all

echo ''.$this->parent->content[$i]['title'].'</a>';


I do not know how it is possible either, but the screenshot of the code is untouched code for the Joomla 3.0 Creativity template. I was hoping you (the developers) would know why / how it is possible AND how to fix.

Are you stating that I should modify my line 41 to what you have shown?

This thread is not about "is there a modification", but "how to make a modification" - its a custom job and this thread shows exactly how - its up to you to implement it to your template.

This thread is not about "is there a modification", but "how to make a modification" - its a custom job and this thread shows exactly how - its up to you to implement it to your template.

I agree, sorry for commenting on your response.

I've made the changes mentioned in this thread and still do not get the desired results of the item titles under each image in Portfolio mode. Can you please clarify the steps to take? That is all I am asking for... a little clarification on "how-to-do" myself. Thank you

Could you please (again if I have already asked) provide me a link where I can see those changes live?

Could you please (again if I have already asked) provide me a link where I can see those changes live?

The site is usually turned offline as it's still in development and I'm trying to prevent indexing but it is http://www.imagineV11.com and I've previously PM'd you backend login account info in the event the site isn't on-line when you view it.

Ok, please edit file:
/modules/mod_news_pro_gk5/portal_modes/portfolio/script.jquery.js, find line:

Code: Select all

img.html('<img src="' + jsondata[i].src + '" alt="' + jsondata[i].title + '" />');


(around 44)
and replace it with:

Code: Select all

img.html('<img src="' + jsondata[i].src + '" alt="' + jsondata[i].title + '" />'+jsondata[i].title);


It should help.

For whatever it's worth, clicking the button (that shows more) with the above edits works and shows the titles, but only on the additionally loaded images, not on the items above or prior to clicking the button

Lets try different road. Probably you will have to remove previous changes, but keep them for now.
File to edit:

Code: Select all

/modules/mod_news_pro_gk5/portal_modes/portfolio/script.jquery.js, find line:


Find this block of code:

Code: Select all

// add overlays
module.find('.gkImage').each(function(i, img) {
   img = jQuery(img);
   if(img.find('.gkImgOverlay').length == 0) {
      // create overlays
      var overlay = new jQuery('<div class="gkImgOverlay"></div>');
      overlay.html('<span></span>');
      img.append(overlay);


You will find it twice in your .js file (in the middle and at the end)
Replace it with this code:

Code: Select all

// add overlays
module.find('.gkImage').each(function(i, img) {
   var img = jQuery(img);
   var title = jQuery(img).attr('title');
   if(img.find('.gkImgOverlay').length == 0) {
      // create overlays
      var overlay = new jQuery('<div class="gkImgOverlay"></div>');
      overlay.html('<span></span>');
      img.append(overlay);
      img.after(title);


Applied the above modifications and it almost works, but not quite there yet. I'm attaching 2 screenshots showing the before and after above noted mods.

Screen 1

original-modifications.jpg

Screen 2

new-modifications.jpg

Please advise accordingly and thank you for your time.

Please send me a PM with:
1. URL to your website
2. ftp data (host, user, password)
3. link to this thread

Ill check on your site on saturday.

Please send me a PM with:
1. URL to your website
2. ftp data (host, user, password)
3. link to this thread

Ill check on your site on saturday.

Thank you kind sir, I just sent you a PM with above info as well as the module ID and URL with module placement.

Here is part of script.jquery.js that works fine in your case:

Code: Select all

var gkPortalModePortfolioInit = function(module) {
   // button events
   if(jQuery(module).find('.gkLoadMore')) {
      module = jQuery(module);
      var btn = module.find('.gkLoadMore');
      btn = jQuery(btn);
      var preloaded = 0;
      var maxpreloaded = btn.attr('data-max') * 1;
      var pageamount = module.attr('data-cols') * module.attr('data-rows');
      var jsondata = btn.attr('data-toload') != null ? JSON.decode(btn.attr('data-toload').replace(/\\\'/g, ''').replace(/\'/g, '"')) : false;
      // button
      if(btn.attr('data-text') != 'false') {
         // add the load area
         var loadarea = jQuery('<div class="gkImagesWrapperLoadArea"></div>');
         module.append(loadarea);
         // add the click event
         btn.click(function(e) {
            // if there are thumbnails to load
            if(preloaded < maxpreloaded && !btn.hasClass('inactive')) {
               // prevent the default event
               e.preventDefault();
               e.stopPropagation();
               
               var prevtext = btn.html();
               btn.html('<div class="gkLoader"></div>');
               btn.addClass('inactive');
               
               var start = preloaded;
               var toInject = [];
               for(i = preloaded; i < start + pageamount && i < maxpreloaded; i++) {
                  var img = new jQuery('<a></a>');
                  img.attr('href', jsondata[i].link);
                  img.attr('title', jsondata[i].title);
                  img.attr('class', 'gkImage active');
                  img.html('<img src="' + jsondata[i].src + '" alt="' + jsondata[i].title + '" />'+jsondata[i].title);
                  toInject.push(img);
                  module.find('.gkImagesWrapperLoadArea').append(img);
                  preloaded++;
               }
               
               var imgWrap = module.find('.gkImagesWrapper');
               imgWrap = jQuery(imgWrap);
               imgWrap.css('height', imgWrap.outerHeight(true) + "px");

               var preloaderTimer = setInterval(function() {
                  var sum = toInject.length;
                  var loaded = 0;

                  for(var i = 0; i < sum; i++) {
                     if(toInject[i].find('img')[0].complete) {
                        loaded++;
                     }
                  }
                  
                  if(loaded == sum) {
                     
                     clearInterval(preloaderTimer);
                     for(var i = 0; i < sum; i++) {
                        
                        module.find('.gkImagesWrapper').append(toInject[i]);
                        //toInject[i].inject(module.getElement('.gkImagesWrapper'), 'bottom');
                        //toInject[i].addClass('show');
                        gkPortalModePortfolioImgClass(toInject[i], 'show', true, 150, i);
                        
                        
                     }
                     
                     btn.removeClass('inactive');
                     
                     // height animation
                     imgWrap.animate({
                        height: imgWrap[0].scrollHeight,
                        }, 350, function() {
                           imgWrap.css('height', 'auto');
                         });
                     
                     // add overlays
                     module.find('.gkImage').each(function(i, img) {
                           var img = jQuery(img);
                          var title = jQuery(img).attr('title');
                        if(img.find('.gkImgOverlay').length == 0) {
                           // create overlays
                           var overlay = new jQuery('<div class="gkImgOverlay"></div>');
                           overlay.html('<span></span>');
                           img.append(overlay);
                           // add overlay events
                           img.mouseenter( function() {
                              var overlay = img.find('.gkImgOverlay');
                              var realImg = img.find('img');
                              overlay.css({
                                 'margin-left': (-1.0 * (realImg.width() / 2.0)) + "px",
                                 'width': realImg.width() + "px"
                              });
                              overlay.attr('class', 'gkImgOverlay active');
                           });
                           
                           img.mouseleave( function() {
                              var overlay = img.find('.gkImgOverlay');
                              overlay.attr('class', 'gkImgOverlay');
                           });
                        }
                     });
                     
                     if(preloaded < maxpreloaded) {
                        btn.html(prevtext);   
                     } else {
                        btn.html(btn.attr('data-text'));
                     }
                  }
               }, 1000);
            }
         });
      }
   }
   
   // add overlays
   module.find('.gkImage').each(function(i, img) {
      var img = jQuery(img);
      var title = jQuery(img).attr('title');
      if(img.find('.gkImgOverlay').length == 0) {
         // create overlays
         var overlay = new jQuery('<div class="gkImgOverlay"></div>');
         var subtext = new jQuery('<div class="subText"></div>');
         overlay.html('<span></span>');
         subtext.html(title);
         img.append(overlay);
         img.append(subtext);
         // add overlay events
         img.mouseenter( function() {
            var overlay = img.find('.gkImgOverlay');
            var realImg = img.find('img');
            overlay.css({
               'margin-left': (-1.0 * (realImg.width() / 2.0)) + "px",
               'width': realImg.width() + "px"
            });
            overlay.attr('class', 'gkImgOverlay active');
         });
         
         img.mouseleave(function() {
            var overlay = img.find('.gkImgOverlay');
            overlay.attr('class', 'gkImgOverlay');
         });
      }
   });
};


The only thing left is to change image titles so they doesn't show as Copy of...

That's brilliant, you rock Cyberek! Finally the Creativity template has titles showing on items in Portfolio mode / style of the NSP gk5 module / extension.

Thank you so very much for your time and assistance, it is greatly appreciated. This works perfect now, cheers!

@xristo thanks for appreciation
Sorry it took so long, but finally there is a working solution.
If You will have any other questions, feel free to post new forum threads.

@xristo thanks for appreciation
Sorry it took so long, but finally there is a working solution.
If You will have any other questions, feel free to post new forum threads.

Cyberek,

My Joomla Admin section is showing me that I have 1 update available and it's the NSP gk5 Module. If I update the extension will it overwrite the custom work you did? Not sure what to do... hoping that the update has your patch included! I'm running Joomla 3.2.3 with NSPGK5 version 1.3.7 and the update is to 1.4.0 - Please advise when you get a chance. Thank you in advance.

Nope. The changes doesn't have the patch as it is custom job I have done for you.
Please make a copy of:
/modules/mod_news_pro_gk5/
folder, then update, and finally compare file:
/modules/mod_news_pro_gk5/portal_modes/portfolio/script.jquery.js
with backed up one.
It should be obvious what need to be changed.