UPDATE: This post is regarding action hooks from the Platform Framework 1.0, using this advice for 2.0 is not guaranteed the same results

A common request of many people using the PageLines feature slider is to make the entire feature staging area clickable. The default action for the “Feature Link URL” option is to create the black button featured below.

If you want to forego the simple button by making the entire area clickable you must do two things.

Using the Before Feature Hook

Add the small block of code to your PlatformBase functions.php file.

add_action('pagelines_feature_before','whole_link_image');

function whole_link_image(){?>
<!--?php global $post;?-->

<!--?php if(get_post_meta($post--->ID, 'feature-link-url', true)):?>

<!--?php endif;?-->
<!--?php }<br ?--> 

The CSS

a.whole_image_link {
position:absolute;
width:100%;
height:100%;
z-index:9999;
left:0; /*Firefox fix*/
}

What we’ve done is taken the pre-existing PageLines option for linking the feature slide and used that to create an empty link that overlays the entire staging area.

For a little added bonus you could even apply a cool CSS3 inner box shadow hover effect.

a.whole_image_link:hover {
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
}

16 Responses to Create A Fullwidth Clickable Feature Slider

  1. Ricky Graham says:

    Pure Genius! Thanks so much

  2. Brendan Shanahan says:

    Thanks for this, the most simple and functional pagelines tutorial I have come across. You saved me a lot of time!

  3. mike says:

    I agree, thanks for distilling that down to the PERFECT tutorial! Just used this on my travel blog, and works perfectly. http://HoneyTrek.com

    Any idea how to do the same thing for my smaller images above each blog post?

    Thanks,
    Mike

  4. Vernon says:

    Is there a video anywhere on how to do this? I’m a nob to all this code stuff and whenever I mess around with the .php I break the site

    Thanks in advance!

  5. kara says:

    I tried to do this but then ended up messing up my entire function.php and couldn’t login. I’m scared I will mess up the code again.

    My website is http://www.theflightattendantlife.com

    So where EXACTLY do I paste the codes:

    When it looks like this:

    require_once(STYLESHEETPATH . “/advanced.php”);

    // ====================================================
    // = YOUR FUNCTIONS – Where you should add your code =
    // ====================================================

    // ABOUT HOOKS ——–//
    // Hooks are a way to easily add custom functions and content to PageLines. There are hooks placed strategically throughout the theme
    // so that you insert code and content with ease.

    // ABOUT FILTERS ———-//

    // Filters allow data modification on-the-fly. Which means you can change something after it was read and compiled from the database,
    // but before it is shown to your visitor. Or, you can modify something a visitor sent to your database, before it is actually written there.

    // FILTERS EXAMPLE ———//

    // The following filter will add the font Ubuntu into the font array $thefoundry.
    // This makes the font available to the framework and the user via the admin panel.

    And then for the second code…where does that go?

    Also, is there a way to create a custom excerpt so I can pull out sentences from the article and highlight those in the feature, like writers do for Magazine articles?

    Thank you!

    • cmunns says:

      Hey Kara,

      The code portion that includes PHP goes into the functions.php file of your child theme. You will need to activate it if you are not yet using a child theme (or base theme).

      The css portion can really go anywhere, but probably easiest for you if you put it in the custom css area of your theme options panel.

  6. AudunMB says:

    This doesn’t work with the Pagelines framework. Any way to make it work…

    • cmunns says:

      Yes this post is for v1 of the framework. If you have v2 I believe this type of thing is already included as an option

      • AudunMB says:

        No, it’s not really included in v2. There’s an option to only show a clickable image, but that’s not the same thing. If you want both text and image on a slider, there’s only the option of a having a small More…-text link.

        So if it is possible to use a code like the above in the v2-framework, I would really appreciate your help on that. (And a search in the forums reveals I’m not the only one).

        • cmunns says:

          If you get the PageLines Action Map plugin I think you’ll be able to see if the hook has changed in the later version of the framework. The custom field value and snippet should be the same.

        • AudunMB says:

          Great with the Action Map plugin, but I’m unsure which hook to use. “pagelines_before_features” seems like the most similar to “pagelines_features_before”, is that the same?

        • cmunns says:

          No they are not the same hook. The name needs to be exact for it to work, so I’m thinking if you swap out the hook name it should work as before.

  7. tyler says:

    This is not working on ie9, any way to fix?

    • cmunns says:

      I’m thinking there is a css problem in ie9 with an empty link that uses absolute positioning… some suggestions say that putting this in the head of your site fixes it:

  8. Thanks, Cmunns. I strongly believe this should be the default out-of-the-box setting for PageLines.

    A slight modification will make this work in PageLines 2.x, use this in your theme or child theme’s functions.php. Those not code savvy should probably just put this at the bottom of that file.


    // Make feature slider clickable

    add_action('pagelines_feature_media_top','whole_link_image');

    function whole_link_image(){?>

    ID, 'feature-link-url', true)):?>
    <a class="whole_image_link" href="ID, 'feature-link-url', true);?>">

    <?php }

    Add this to your PageLines Custom Code section in the CSS/LESS Rules box:


    a.whole_image_link {
    position:absolute;
    width:100%;
    height:100%;
    z-index:9999;
    left:0; /*Firefox fix*/
    cursor: pointer;
    }

    Optionally, add this to make the image look inset on hover:

    a.whole_image_link:hover {
    -moz-box-shadow:inset 0 0 10px #000000;
    -webkit-box-shadow:inset 0 0 10px #000000;
    box-shadow:inset 0 0 10px #000000;
    }

    • Trebor_D says:

      Hello Sean, Thanks for your Pagelines 2.x update, but could you double-check all the i’s are dotted & t’s crossed in your code? I’ve plugged it in, but it’s breaking my Feature box . . . and while I’ve learned my way around CSS, php is still Greek to me, so I can’t figure out where the problem is. Agree this should be default behavior for this Pagelines “feature”.
      Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Looking for something?

Use the form below to search the site:


Still not finding what you're looking for? Drop us a note so we can take care of it!

Archives

All entries, chronologically...