Shape 5

Hi, great extension!  I would like to make the image use the same link as the title link. So that when you hover over the image you can click on it as well as the title link. How can I achieve this?

Hello,

We did add a new feature that now has a hover over the image with the title that you can click.  Perhaps this will work for you?

To make the other method have a clickable image like the title would require custom coding to achieve.

Here is a demo of the new method just scroll down until you see it:

http://www.shape5.com/demo/fitness_center/

Regards,

Yes that would be perfect! How do employ that on my own template? Do I just download and install the masonry extension? Is it a new version or something?

Actually nevermind! I downloaded and installed the extension and the new feature for hover was there! Thanks! This is a great addition!

I'll jump in as someone who also wants the images to be clickable. It seems it wouldn't be too hard to add that as an option since the code is already in place to make the title clickable. People naturally want to click the image and it's frustrating to click what should be a link and find it does nothing.

If you could add that feature at some point I would really appreciate it! It's the reason I came to the forum today.

Hi hbclynch,

Please re-read the thread. The extension was updated to include the image being clickable. You have to update the extension if you have not already and then go back into the module. You will then find a new "Hover" option.

It would be very great if pictures would be clickable. Hover is good, but i prefer picture.

Thanks we will keep this in mind for future updates

You might actually need to re-read the thread because I don't think you understand the issue. Hovering and clicking on a text link is different that making an image clickable and still having the intro text below.

The OP was willing to settle for hover but it's not a good solution for others. We need the actual image to be clickable because that is what people expect when they visit. They know it's leading content and assume that the image should take them to the full article, which it doesn't. Even having to hover and then click the title is counter-intuitive. I had it on a previous site and it was just confusing. People assume that, because the box animates on hover, the whole box is a link. Nope! You still have to click right on the title text.


At any rate, I modified the code to do what we want and it was very easy. Here are the instructions for the benefit of others. It really completes Masonry in my opinion:

Open _item.php in /modules/mod_s5_masonry/tmpl

Copy this from the title link:

Scroll up and paste it before the image_intro img tag that looks like this:

Close the < a > tag after the img tag with this:

The finished product looks like this:

Presto. Actual linking images just like the titles. No hover effect required. Could easily be turned into a setting in the module parameters.

For what it's worth, it would have been great if customer support had directed us to that file for the time being. There's a ton of potential there!  ;)

Hello,

Thanks for posting this code and helping out! True there is a ton of potential there in that file, all the mods to your layout can go there as you've already know now :)

When I first posted this I did the same thing and modified the code to make the images clickable. And it worked well!  However, the drawback I found to this is that if the descriptions/titles under each image had to roughly be the same amount of characters to keep the Masonry grid lined up. Meaning if the description/title varied in length the text has to wrap to a second line and I found that this messed up the nice and tidy grid layout. So the end result was images not lining up do to the text wrapp pushing them down.

So I found that the "Hover" feature that was added was cleaner solution that accommodated longer titles/descriptions.

True, that is a byproduct of using the normal layout with descriptions instead of the hover effect, regardless of whether you make the images clickable. However, you can establish a set height for the descriptions using css in that file. So either way the posts can be forced to line up nicely in a set grid.

I should note that the entire box should also be clickable with the hover effect, so that will require a hack as well and I hope will just be a setting in the future.

In my case, I don't want a set grid and prefer the posts to adapt to the size of the description. I'm glad you found a solution that works well for you!