Make Feature Slider Media Area Clickable

[blatka 1]

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

[catrina 103]

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: http://adammunns.com/create-a-fullwidth-clickable-feature-slider/ (at least when it comes to making a specific area clickable)

[blatka 1]

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!

[James B 436]

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 http://api.pagelines.com/hooks

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

[trebord_55 0]

Hello James,

 

A clickable image sure would be nice . . . The code advice at Catrina's link, 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 working and looking so well otherwise 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!

[Rob 547]

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. 

[trebord_55 0]

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.

[Rob 547]

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 the documentation step by step, you'll see what the slider is capable of doing.  I'm confident you'll be surprisingly pleased.

[trebord_55 0]

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, I have 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 page 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.

[catrina 103]

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.

[trebord_55 0]

Hi catrina,

 

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

<div class="fmedia-pad">
         <?php
                                            
         pagelines_register_hook( 'pagelines_feature_media_top', $this->id ); // Hook
                                            
         if( $media_image )                                            
             printf( '<div class="media-frame"><img src="%s" /></div>', $media_image );
                                            
         elseif( $feature_media )
                echo do_shortcode( $feature_media );    
                ?>
</div>

Where

$media_image = ploption( 'feature-media-image', $oset );

 

Earlier, the link text was defined as

$more_link = ( $feature_style != 'text-none' && $action ) ? sprintf( ' <a %s class="plmore" href="%s" >%s</a>', $target, $action, $flink_text ) : '';

 

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...

[catrina 103]

To help you find the correct hooks, you can use this plugin: http://www.pagelines.com/store/plugins/hooker/

[trebord_55 0]

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.

[Rob 547]

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.

[trebord_55 0]

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. I have to use text on my slides, but I need something more, in my whole large Feature Slider, for a user to click on. Like the Media Area image.

[James B 436]

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.com/store/sections/beefy/

[trebord_55 0]

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.

And thanks for everyone else's help, too!

[James B 436]

Glad that worked for you Trebord

[Tang 3]

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:

<a href="http://www.yourlinkurl/" >
<img src="http://www.yourimageurl.jpg" />
</a>

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