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
