change Mouseover / Hover on Portfolio Grid

GK User
Sat Feb 21, 2015 3:11 pm
Hi,
First of all thx for the great photo skin.

I made a sort like grid on my website as the one on your demo and got a question.
(demo.gavick.com/joomla25/photo/index.php/work/portfolio-grid)

If you hover over the items you get a dark overlay with 3 dots.
Is it possible to change the 3 dots into the actual title of the linked item?
Or is that joomla related?

I couldn't find anything related to this on your website or the net.. So sorry for my 'newbie' question. :oops:
User avatar
Fresh Boarder

teitbite
Sun Feb 22, 2015 9:22 am
Hi

I'm afraid this is a customisation request since it would require changes to module's code and style. Unfortunately we do not support that, sorry.
User avatar
Moderator

GK User
Sun Feb 22, 2015 10:34 am
ah ok. Thank you for the info.
User avatar
Fresh Boarder

GK User
Mon Feb 23, 2015 12:41 pm
Coming back to this question.
Normally, using K2 you should be able to change display by modifying /templates/gk_photo/html/com_k2/templates/portfolio-grid/category_item.php (if your using k2 template portgolio-grid on your k2 category setup)

However, I'm not finding exactly what I'm looking for.
in the category_item.php , I've got one nested <a> between H2 tags
Code: Select all
<article class="itemView gk-active" data-tags="<?php echo $tag_ids; ?>" data-link="<?php echo $this->item->link; ?>">
     <div class="itemImageBlock<?php echo $bg; ?>">
          <?php if($this->item->params->get('catItemTitle')): ?>
          <h2>
               <---...--->
               <a href="<?php echo $this->item->link; ?>"><?php// echo $title; ?></a>
               <?php else: ?>
               <?php echo $title; ?>
               <?php endif; ?>
          </h2>
          <?php endif; ?>
          <?php if($this->item->featured): ?>
          <sup><i class="gk-icon-star"></i></sup>
          <?php endif; ?>
     </div>
</article>



however, using firebug in firefox, I see this

Code: Select all
<article class="itemView gk-active" d..........;">
<h2>
<a href="/index.php/item/19-global-game-jam-bordeaux"></a>
</h2>
<a class="gk-overlay" href="/index.php/item/19-global-game-jam-bordeaux">
<span></span>
</a>
</div>
</article>


What I'd like to know is how that second <a> tag got there, where was it generated ? It would then be easy to put the title at the place of the <span> (which hides the dots).

Would you kindly tell me where this second <a> tag is generated ?

Thank you
User avatar
Fresh Boarder

teitbite
Tue Feb 24, 2015 12:10 pm
Hi

I do not know what is this code, but it surely is wrong. There can be no construction like "d..........;"" please tell me the url to the page where You can see it.
User avatar
Moderator

GK User
Tue Feb 24, 2015 11:11 pm
I edited the stuff to not clog up the page.

I've figured out how to get title to show up on mouse over instead of the dots. This was atricky one :)

The overlay is generated by javascript, not in the category-item.php. Lol !

So, here's how I got my site showing things the way I want !

The javascript is in (siteroot)/templates/gk_photo/js/gk.scripts.js

around line 207 comment out the line (putting // in front of the line) like this :
Code: Select all
//var overlay = $('<a href="'+item.attr('data-link')+'" class="gk-overlay"><span></span></a>'); // commented out for hack


you now need to modify the php file
it's in (siteroot)/templates/gk_photo/html/com_k2/templates/portfolio-grid/category_item.php

Code: Select all
          <h2>
               <?php
            
               $title = explode('--', $this->item->title);
               $title_part_one = $title[0];
               
               if(isset($title[1])) {
                  $title_part_two = '<small>' . $title[1] . '</small>';
               }
               
               $title = $title_part_one . $title_part_two;
               
            ?>
               <?php if ($this->item->params->get('catItemTitleLinked')): ?>
               <a href="<?php echo $this->item->link; ?>"><?php //echo $title; ?></a><!-- NO TITLE WITHOUT OVERLAY -->
               <?php else: ?>
               <?php echo $title; ?>
               <?php endif; ?>
          </h2>
               <a class="gk-overlay" href="<?php echo $this->item->link; ?>"><h2><?php echo $title; ?></h2></a><!-- ADDED FOR TITLE HACK -->
          <?php endif; ?>


Modify your code to look like above. I commented the title to not show without the mouseover (was hard to read white title over white background pics) but if you don't want to remove the titles when image isn't hovered, just remove the // in the <?php //echo $title; ?> in the middle of above code.

Hope this helps. It works fine for me. I did a little css optimisation to get the title to show centered & smaller (I've got long titles)

This is done in (siteroot)/templates/gk_photo/css/k2.css around line 1493
here's my settings if you wanna give it a try :
Code: Select all
.portfolio.portfolio-grid .itemView h2 {
   bottom: 0;
   color: #fff;
   font-size: 36px;
   left: 0;
   letter-spacing: 3px;
   line-height: 1;
   padding: 110px 55px;
   position: absolute;
   text-align:center;
   text-transform: uppercase;
   width: 100%;
}



keep in mind that the javascript changes will dissapear if you update the template, so I suggest that you keep a copy of that file somewhere safe to get back on track after updating template.

Regards
Enzo
User avatar
Fresh Boarder

teitbite
Fri Feb 27, 2015 1:03 pm
Hi

Ok. I cannot check it right now since I have other questions to answer, but if You have tested it than I believe it can be a correct solution. Thank You for shearing this with users.
User avatar
Moderator

GK User
Tue Oct 06, 2015 9:12 pm
Hello,

I try to apply this hack to the template portfolio and not to the portfolio-grid

how can I do?

thanks a lot

Andrea

PS: Sorry for my bad english
User avatar
Fresh Boarder

teitbite
Thu Oct 08, 2015 3:01 pm
Hi

I'm sorry, but since we do not support customisation I'm not able to help with this transition.
User avatar
Moderator


cron