Jump to content
blatka

Make Feature Slider Media Area Clickable

Recommended Posts

blatka    1
blatka

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


--

Bill Latka

digitalgarage_sm.png

Share this post


Link to post
Share on other sites
catrina    103
catrina

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)


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
blatka    1
blatka

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!


--

Bill Latka

digitalgarage_sm.png

Share this post


Link to post
Share on other sites
James B    436
James B

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?


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
trebord_55    0
trebord_55

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!

Share this post


Link to post
Share on other sites
Rob    547
Rob

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. 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
trebord_55    0
trebord_55

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.

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
trebord_55    0
trebord_55

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.

Share this post


Link to post
Share on other sites
catrina    103
catrina

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.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
trebord_55    0
trebord_55

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

Share this post


Link to post
Share on other sites
trebord_55    0
trebord_55

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.

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
trebord_55    0
trebord_55

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.

Share this post


Link to post
Share on other sites
James B    436
James B

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/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
trebord_55    0
trebord_55

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!

Share this post


Link to post
Share on other sites
James B    436
James B

Glad that worked for you Trebord :D


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Tang    3
Tang

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. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • gabriel1937
      By gabriel1937
      Hello,
       
      After updating the site below to Framework 2.4.6, the main feature slider has changed appearance, now looking pixellated. Before it looked perfect.
       
      http://www.chandlerlink-accountants.co.uk
       
      Please can you advise what I should do to make the slider look correct (should be 250px high). See attached for an indication of what is happening.
       
      [attachment=2646:Project3.pdf]
       
      Several other the sites we have created use PageLines Framework and I am wary of updating them to 2.4.6 if it will cause all Feature Sliders to break in this way.
       
      Many thanks,
       
      Phil Chandler
    • kellid
      By kellid
      Hello,
       
      The feature slider images are stacking vertically upon the page load on all browsers.  I found a forum topic that used the following css coding but this is not working for me.  
       
      #page #feature-area {
                   overflow: hidden;
           }
        I can't take the screen capture fast enough to give a shot of it.   I'm using the newest version of WP and the url is modelalliance.org.  Any help would be appreciated!   Best,   Kelli
    • universalhall7
      By universalhall7
      Regarding the feature sliders at this url:
      www.heartbecoming.com
       
      I need to be able to credit the artist for the images directly at the images on my website.  It seems like the cleanest way to do this is to add hover text to the images with the name of the artist.  I can't seem to figure out though how to add the hover text to the image.  Images displayed in posts and on pages use the title as hover text so that is workable.  Please advise on showing hover text for feature slider images.  Thanks!
       
      Thessa
    • achif
      By achif
      I've tried disabling all plugins and erasing the custom code and this problem persists as you can see in the attached image ( the max. size per file is way too small by the way ).
      Please help.
    • roycreative
      By roycreative
      Ever since the last update my feature slider doesn't load correctly and the images run the length of the page. Not sure how to really trouble shoot since the problem is intermittent. 
       
      Screenshot here:
      https://docs.google.com/a/roycreative.com/file/d/0B4wI3jhXzisCeUpic3J6c3VmM0E/edit?usp=drivesdk
×