Joomla Templates Club 406,261 posts

[acusticambiente Friend acusticambienteJoin date: December 2012Posts: 68Downloads:14Uploads:19 Thanks: 9]

#1021035

how do i make intro image link to full text article in masonry layout?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1021115

Hi
The images can be linked but the layout does not work for this.
because when you hover the on the images you will get the title and readmore two links on it.
behind it there is overlay mask that does no make the image clickable.

Let me know if you want to remove the mask feature and use link the image, I will suggest further.

Regards

[magelanos Friend magelanosJoin date: December 2008Posts: 43Downloads:320Uploads:13 Thanks: 6 Thanked: 2 times in 1 posts]

#1027773

Hello,

Can you please explain how can this be done?

Pankaj Sharma wrote:

Hi
The images can be linked but the layout does not work for this.
because when you hover the on the images you will get the title and readmore two links on it.
behind it there is overlay mask that does no make the image clickable.

Let me know if you want to remove the mask feature and use link the image, I will suggest further.

Regards

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1027872

Hi
Open
/css/template.css file
Find and remove below code

.isotope .isotope-item .item-image:before {
    background: rgba(0,0,0,0);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
    display: none;
    -webkit-transition: background-color 0.2s ease 0s;
    -o-transition: background-color 0.2s ease 0s;
    transition: background-color 0.2s ease 0s;
}

It will remove the mask.
Now
open
/html/com_content/mansonry_item.php file

Add below code after line 31

$link = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid));

Here http://prntscr.com/eyzla2
Find this code

<img
                        <?php if ($images->image_intro_caption):
                            echo 'class="caption"' . ' title="' . htmlspecialchars($images->image_intro_caption) . '"';
                        endif; ?>
                        src="<?php echo htmlspecialchars($images->image_intro); ?>"
                        alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>

Replace it with

<a href="<?php echo $link; ?>" itemprop="url">              
                <img
                        <?php if ($images->image_intro_caption):
                            echo 'class="caption"' . ' title="' . htmlspecialchars($images->image_intro_caption) . '"';
                        endif; ?>
                        src="<?php echo htmlspecialchars($images->image_intro); ?>"
                        alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
                </a>

Save and check.

Regards

[Author]

Posts