Jump to content


Photo
- - - - -

Make Feature Slider Media Area Clickable

feature slider media area

Best Answer James B , 21 February 2013 - 03:29 AM

Hi there,

 

You're correct, the only way I've managed to come close to this in the current set up with the text enabled, is to include the image in the media area as html with a link attached, then choose the link option for the text. So the large image on the side is a link, and then the text link has a link in it too.

 

 

There's a few new sliders in the store that might be able to help like http://www.pagelines...sections/beefy/

Go to the full post


  • Please log in to reply
18 replies to this topic

#1 blatka

blatka

    Member

  • Members

  • 17 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 02 November 2012 - 12:53 PM

Is there a custom way to make the Media Area, not the Full Size-Feature Background Area of the Feature Slider clickable? I like the way the text are is clickable when using only the Media Area for the image, but it seems to be more intuitive to have the image clickable as well. At least for me because I am using a jpg of a Vimeo video as one of my images.

Thanks

Pagelines Framework 2.3.4

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 02 November 2012 - 02:56 PM

There isn't a setting for making just the media area clickable, but if you want to make it clickable, I think there may be some kind of workaround with code. I'm not a developer so I can't say exactly what can be done, but I'm guessing it would be similar to this approach:

Please Login or Register to see this Hidden Content

(at least when it comes to making a specific area clickable)

#3 blatka

blatka

    Member

  • Members

  • 17 posts
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 02 November 2012 - 11:49 PM

Thanks for the suggestion, Catrina. That link was for the old platform and does not work on the new one. Still looking for help on this!

#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 03 November 2012 - 05:15 AM

Looking at the link that Catrina suggested you might still be able to get that working using a hook. You'll need to use the new hooks for the Pagelines Framework. There is one listed for Feature Media, you can view them here

Please Login or Register to see this Hidden Content



Otherwise you might need to look at a third party slider which already had this function in. Something like Royal Slider?

#5 trebord_55

trebord_55

    Member

  • Members
  • 17 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 18 February 2013 - 08:37 PM

Hello James,

 

A clickable image sure would be nice . . . The code advice at Catrina's

Please Login or Register to see this Hidden Content

, above, isn't doing the trick for me (breaking my site and/or slider - even the revised 2.x code in the comments) . . . And I would vastly prefer not to de-install my Pagelines Feature Slider that I've gotten

Please Login or Register to see this Hidden Content

and go with a 3rd party, like Royal Slider.

 

Might there not be a relatively simple php solution . . . say, adding a link to the "fmedia-pad" or "media-frame" div class, which would (as the "plmore" div does now, presumably) query the Feature Link URL as specified on the Feature Setup page?

 

Many thanks for your help!



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 February 2013 - 11:26 PM

Hi,

 

The solution to make the text within the feature slider clickable is easy.  To make the text area clickable requires a hook.  Only a very, very small number wish this, so coding an old section to accomplish this isn't really warranted.  Other sliders do this and if desired, should be used.   James' recommendation of Royal Slider was most apropos as it does what you're trying to achieve. 

 

Let me point out that installing Royal Slider does not mean "deinstalling" the PageLines Feature Slider.  All you'd do is remove the section from the template.  Existing code, even modified code, and all slide settings will remain intact.  Any time you wish to put it back, it's just a matter of dragging and dropping the section back into a template.  Couldn't be easier. 



#7 trebord_55

trebord_55

    Member

  • Members
  • 17 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 19 February 2013 - 04:05 AM

Hi Rob,

 

Thanks for your reply. Blatka and I were looking to make the "Media Area", i.e. the image, clickable, rather than the text – but same diff. I guess I will have to use someone else's slider to accomplish this - obviously, having a clickable image in a Wordpress slider is a pretty standard feature, so I'm sure that Royal Slider or many others would serve.

 

I'm familiar with the Pagelines drag and drop interface. When I mentioned "de-installing" my Pagelines Feature Slider, I was referring to the prospect of losing the fairly precise CSS formatting I've done for my Pagelines Slider installation. Yes, I can easily pull the Feature Slider out, but I'll have to start from scratch making someone else's slider fit and look nice. Guess I should have first verified that the Pagelines slider had (or could easily be made to have) the basic functionality of a clickable image.



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 19 February 2013 - 04:12 AM

The image in PageLines Feature Slider is fully clickable by simply entering the URL in the settings.  Have you tried that?   The slider's had the ability to be clickable for over a year. Check the documentation and the settings.

 

Blatka's post is nothing like what you're asking. He's speaking of the media area - videos. You're speaking of the image and thus you're actually hijacking this topic.

 

You'd not lose your CSS. If you take the time to check the settings and go through

Please Login or Register to see this Hidden Content

step by step, you'll see what the slider is capable of doing.  I'm confident you'll be surprisingly pleased.



#9 trebord_55

trebord_55

    Member

  • Members
  • 17 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 19 February 2013 - 04:12 PM

Is there a custom way to make the Media Area, not the Full Size-Feature Background Area of the Feature Slider clickable? I like the way the text are is clickable when using only the Media Area for the image, but it seems to be more intuitive to have the image clickable as well. At least for me because I am using a jpg of a Vimeo video as one of my images.
 

 

My request is identical to blatka's; no topic hijacking is ocurring. Like blatka,

Please Login or Register to see this Hidden Content

an image in my Media Area that I wish were clickable. This does not appear to be possible using the built-in option set. A Feature Slider is currently clickable only when "Full Width Background Image" is selected in the Feature Setup Options; but when one of the Feature Text Positions is used ("Text On Left/Right/Bottom"), the Feature Link applies only to the entered Link Text. As blatka says, "it seems to be more intuitive to have the image clickable as well."

 

A posting in the comments of the

Please Login or Register to see this Hidden Content

mentioned by catrina offered code that employed a Pagelines 2 hook to accomplish a workaround, but that code proved problematic, and my php is not up to fixing it.

 

Just to be clear: Both blatka and I are talking about the method by which a user formats a Pagelines Feature Slider to include both text and an image (or a video - no difference): 1) Enter slide title and text into the content field; 2) Select the Feature Text Position (Left/Right/Bottom) and desired Feature Design Style; 3) Choose an image for the Media Area; and 4) Enter a Feature Link URL and Link Text. This is straighforward – it works great – but the only clickable link option is for the Link Text.

 

Thanks.



#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 19 February 2013 - 04:50 PM

Since the method I posted before didn't work, then perhaps another PHP solution would be best, but I'm not exactly sure what that would be - but it would definitely be a hook.



#11 trebord_55

trebord_55

    Member

  • Members
  • 17 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 19 February 2013 - 06:26 PM

Hi catrina,

 

The relevant code in the Features section.php seems to be

Please Login or Register to see this Hidden Content

Where

Please Login or Register to see this Hidden Content

 

Earlier, the link text was defined as

Please Login or Register to see this Hidden Content

 

Ideally, what I want to do is have $media_image and its "media-frame" div class associate with the same href as $more_link and its "plmore" div class.

 

Maybe the 'pagelines_feature_media_top' hook is the way to do this . . . that's the same hook the respondant on your reference page used - unsuccessfully for me, but he might have just mis-typed some of his php. But it seemed his use of the hook created a whole new div class (which then kinda went wild, according to my Firebug, inserting itself all over the place), which seems unnecessary.

 

Wish php were as easy as css...



#12 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 19 February 2013 - 08:12 PM

To help you find the correct hooks, you can use this plugin:

Please Login or Register to see this Hidden Content



#13 trebord_55

trebord_55

    Member

  • Members
  • 17 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 20 February 2013 - 10:18 PM

thanks for the link, Catrina . . . but with my lack of php, even 100% certainty of the correct hook wouldn't help much. (Besides, I already blew my budget with my purchase of Pagelines ;) )

 

Guess I'll head over and put this feature into the suggestion bucket. I'm just disappointed that I didn't verify this functionality before I fine-tuned my slider - just figured it would be a matter of going back and checking a box somewhere. And it's a little aggrevating because I'm sure (or at least I assume) it'd be a simple thing to implement for someone with php skills . . . and it ought to be a built-in option or default.

 

Thanks again for your help.



#14 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 20 February 2013 - 11:09 PM

I think the issue may be that you have the image in the media area, rather than in the background area of the slider setup.  In the Media area, an image isn't going to pick up the option to be linked from the built in settings. 

If you move the URL for the image to the background portion of the setup, then add a URL for the desired link as well, you should have a fully linked slide.

 

I hope this helps.



#15 trebord_55

trebord_55

    Member

  • Members
  • 17 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 21 February 2013 - 02:09 AM

I appreciate your suggestion, Rob . . . but unfortunately it's not a solution. An image placed in the background portion (Field: Full Size - Feature Background Image) becomes clickable only when you've selected Full Width Background Image - No Text - Links Entire BG above that. This is great, but it precludes the possibility of inserting text onto your slide. If you do place text (Text on Left / Text on Right / Text on Bottom), then your Feature Link URL applies only to whatever Link Text you've inserted in the last field – regardless of whether you've placed an image in the Full Size - Feature Background Image field, or in the Media Area - Image (optional) field (or both).

So, by choosing to insert text, you've gone from having the entire slide clickable to one relatively small text link.

Please Login or Register to see this Hidden Content

, but I need something more, in my whole large Feature Slider, for a user to click on. Like the Media Area image.



#16 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 21 February 2013 - 03:29 AM   Best Answer

Hi there,

 

You're correct, the only way I've managed to come close to this in the current set up with the text enabled, is to include the image in the media area as html with a link attached, then choose the link option for the text. So the large image on the side is a link, and then the text link has a link in it too.

 

 

There's a few new sliders in the store that might be able to help like

Please Login or Register to see this Hidden Content



#17 trebord_55

trebord_55

    Member

  • Members
  • 17 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 21 February 2013 - 04:45 AM

James, you made my day – I'll gladly accept my Feeling Stupid Now card in exchange for getting this difficulty solved.

 

Yours is the obvious solution, and it works perfectly. I overlooked it completely, I think because the box is labled Feature HTML (video embeds etc, In Media Area) . . . And since I wasn't dealing with video, I tunnel-visioned on the Media Area - Image field above, which accepts no html – so the thought never crossed my mind. Duh.

 

Thank you very much. You can close mark this topic as resolved, with yours as the solution. :D

And thanks for everyone else's help, too!



#18 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 21 February 2013 - 04:48 AM

Glad that worked for you Trebord :D



#19 Tang

Tang

    Advanced Member

  • Members
  • 51 posts
  • LocationFrankfurt - Germany
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 05 May 2013 - 02:00 PM

Just for those who need this explained even more detailed - like me  ;)

 

To make Feature-Images clickable for linking:

 

Put the image into Feature Media > Feature HTML - nowhere else - with a link attached as HTML like this:


Please Login or Register to see this Hidden Content

If you also want the Feature-Text to have a More-link - put the link URL into > Feature Link URL. 







Also tagged with one or more of these keywords: feature slider, media area