Forum Support

Shape 5
March 28, 2024, 09:32:00 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Making the images clickable as well?  (Read 932 times)
Card1One
Jr. Member
**
Offline Offline

Posts: 37



« on: September 12, 2015, 10:58:03 AM »

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?
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #1 on: September 14, 2015, 12:40:39 PM »

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,
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Card1One
Jr. Member
**
Offline Offline

Posts: 37



« Reply #2 on: September 17, 2015, 10:51:13 AM »

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?
Logged
Card1One
Jr. Member
**
Offline Offline

Posts: 37



« Reply #3 on: September 17, 2015, 11:00:36 AM »

Actually nevermind! I downloaded and installed the extension and the new feature for hover was there! Thanks! This is a great addition!
Logged
albowers
Jr. Member
**
Offline Offline

Posts: 7



« Reply #4 on: January 26, 2016, 02:19:08 PM »

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.
Logged
Card1One
Jr. Member
**
Offline Offline

Posts: 37



« Reply #5 on: January 26, 2016, 02:28:30 PM »

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.
Logged
naokoczai
Jr. Member
**
Offline Offline

Posts: 6



« Reply #6 on: February 04, 2016, 08:50:49 AM »

It would be very great if pictures would be clickable. Hover is good, but i prefer picture.
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #7 on: February 04, 2016, 01:00:07 PM »

Thanks we will keep this in mind for future updates
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
albowers
Jr. Member
**
Offline Offline

Posts: 7



« Reply #8 on: February 04, 2016, 03:02:59 PM »

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.

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:
Code:
<a href="<?php echo $item->link;?>">

Scroll up and paste it before the image_intro img tag that looks like this:
Code:
<img alt="" src="<?php echo JURI::root();?><?php echo $images->image_intro?>" />

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

The finished product looks like this:
Code:
<div class="s5_masonry_img_wrap">
    <a href="<?php echo $item->link;?>">
    <img alt="" src="<?php echo JURI::root();?><?php echo $images->image_intro?>" />
    </a>
</div>

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!  Wink
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #9 on: February 05, 2016, 01:54:37 PM »

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 Smiley
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Card1One
Jr. Member
**
Offline Offline

Posts: 37



« Reply #10 on: February 05, 2016, 02:26:03 PM »

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.
Logged
albowers
Jr. Member
**
Offline Offline

Posts: 7



« Reply #11 on: February 12, 2016, 05:16:51 PM »

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!

Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.