ThemeShaper Forums » Thematic

[closed]

Using Featured Image dynamically in CSS?

(20 posts)
  • Started 3 years ago by seanhawkridge
  • Latest reply from dados
  • This topic is resolved
  1. seanhawkridge
    Member

    Hello,

    I have a client who wants to replicate an effect like this:

    http://www.karinkihlberg-reubenhenry.org/works.htm

    where when you hover over the menu items a preview image displays in the main content area.

    As far as I can see this site has been built in Dreamweaver using some slightly ropey techniques.

    I'm building her site using Wordpress and Thematic. So I'd like to replicate the effect for a list of pages displayed using a menu widget that's likely to have projects added it to it - so it needs to fetch the image dynamically - which is why Wordpress' Featured Image seemed like a good thing to work with.

    I can think of two possible ways -

    1. Using JQuery - I don't know where to start with this but I've seen similar effects

    2. Using CSS and dynamically pulling the featured image from the page which the menu item points to. I'm comfortable with CSS but not so much with writing a function and targeting a menu widget with it.

    Could anyone point me in the right direction?

    Posted 3 years ago #
  2. personally, i'd do it with jquery. it isn't soooo far off from any of the standard slider effects. you'd have all the featured images in the markup, but absolutely position them on top of each other and display none. then on the hover of the text on the left you'd display its appropriate image. i wrote a post on how to get implement jquery w/ thematic/wp

    http://forums.themeshaper.com/topic/jquery-in-thematic-demystified

    might help you get started. then i spend a lot of time reading through the api docu

    http://api.jquery.com/

    Posted 3 years ago #
  3. seanhawkridge
    Member

    I had a feeling hard work might be the answer! I'll get reading - thanks very much for your help.

    Posted 3 years ago #
  4. seanhawkridge
    Member

    Aargh - still really struggling with this.

    I've got to grips with (very) basic jQuery, but there are two things I can't get my head around:

    1 - How to pull the featured images through to the page. Helga - you mentioned having all the featured images in the markup, but I'm at a loss as to how to get to this point. Would it also be possible to write an ajax call that grabs them for each event?

    2 - then, how to dynamically use the menu items (at this point I'm just using the stock custom menu widget to list the pages) to trigger the images.

    I could certainly now hand code it for the existing menu items, but I really need to set it up so that if a new project is added it automatically does the business...

    Posted 3 years ago #
  5. you're using a menu for that side content? well that makes things really difficult.. idk where to begin. i was just thinking you'd use a secondary loop... maybe with get_posts

    http://codex.wordpress.org/Template_Tags/get_posts

    Posted 3 years ago #
  6. seanhawkridge
    Member

    How about:

    A JQuery function that, when the mouse hovers over a menu item, gets the variable url, then loads the url, splits out the content according to a particular div (for the image) and then loads it into a div on the page? Something like this:

    $(function() {
    $('#menu-item a').hover(function() {
    var url = $('this').attr('href');
    $('body').load(url, '#content img.attachment-.wp-post-image');

    });
    });

    It's kind of working a bit at the moment (and I realise it's riddled with errors), but it does seem like it could get there. Do you think it's a dead end?

    Posted 3 years ago #
  7. seanhawkridge
    Member

    This is very close to working:

    $(function() {
    $('.aside a').hover(function() {
    var url = $(this).attr('href');
    console.log(url);
    $('#content').load(url + '#content .wp-post-image');

    });
    });

    Posted 3 years ago #
  8. kwight
    Member

    If you're still working on this, I think you may be better served using a custom "walker" - it's a WordPress class that builds the HTML output for wp_nav_menu menu items (or that's how I think of it, and use it). This means that your client can use the wonderful Appearance > Menus drag-and-drop for changing the menu and Featured Images for assigning the image, as much as they like, with no further programming required on your part. I find they make custom menus a breeze rather then a PITA, since you can choose exactly what HTML elements are included for each list item in a menu (which, in turn, makes styling a lot simpler).

    In essence, you'll be making a menu that spans the page (the image will be part of the menu structure). Your general steps would be:

    1) Register new menu in functions.php
    2) Create custom walker
    3) Filter wp_nav_menu to set the new walker
    4) Select menu in your widget, or just make a custom page template
    5) Set up the menu and menu items with their Featured Images
    6) Style the menu appropriately, with all "thumbnails" positioned absolutely on top of each other
    7) Figure out jQuery to set display:block for the img below $this (and hide all others I guess?)
    8) Tell your loved one/family you'll be home early tonight. Do we need anything from the store?..

    An example is the side menu here: http://emcafe.ca.

    1) Register new menu in functions.php

    function kwight_register_sidebar_menu() {
      register_nav_menu('sidebar-menu', __( 'Sidebar Menu' ));
    }
    add_action( 'init', 'kwight_register_sidebar_menu' );

    2) Create custom walker in functions.php

    class sidebar_walker extends Walker_Nav_Menu {
        // copy/paste lines 67-95 of nav-menu-template.php
    }

    Edit that mess to keep/toss/add whatever you find valuable. Most of the magic happens towards the bottom where the $item_output variable is being assembled. Ooh, you'll probably have to stick in a

    $thumb = get_the_post_thumbnail($target_id, 'thumbnail');

    to use the image in your output.

    3) Filter wp_nav_menu to set the new walker

    function kwight_sidebar_menu_args( $args = '' ) {
    	$args['walker'] = new sidebar_walker;
    	return $args;
    }
    add_filter( 'wp_nav_menu_args', 'kwight_sidebar_menu_args' );

    4) to 8) I'll leave up to you :)

    It looks confusing, and is poorly documented (read: almost non-existant) in the Codex, but googling should turn up some helpful articles. At least this means you only have to worry about displaying the right image with jQuery, rather than fetching it, etc

    Posted 2 years ago #
  9. seanhawkridge
    Member

    Hi Kwight!

    This is awesome, thanks!

    Do you have any advice on calling the post thumbnails in the custom walker? I've had a good google around, and quickly found this snippet:

    $thumbnail = '';
    if( $id = has_post_thumbnail( (int)$item->object_id ) ) {
    	$thumbnail = get_the_post_thumbnail( $id )
    }

    which has been reported to work, but after quite a bit of trial and error can't figure out how to integrate it.

    Thanks!

    Posted 2 years ago #
  10. seanhawkridge
    Member

    Here's the bottom interesting section of my custom walker:


    $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
    $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
    $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';

    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'>';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= '';
    $item_output .= $args->after;

    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

    and here is the snippet which should call the thumbs:


    $thumbnail = '';
    if( $id = has_post_thumbnail( (int)$item->object_id ) ) {
    $thumbnail = get_the_post_thumbnail( $id )
    }

    Any idea how to integrate it? Just adding ('$thumbnail = get_the_post_thumbnail( $id )') doesn't work. And if I add the code above into a new item output it creates an error...

    Sorry that this is dragging on!

    Posted 2 years ago #
  11. kwight
    Member

    You would add the $thumbnail variable to the $item_output variable, maybe like this:

    $thumbnail = '';
    if( $id = has_post_thumbnail( (int)$item->object_id ) ) {
    $thumbnail = get_the_post_thumbnail( $id )
    };
    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'>';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= $thumbnail;
    $item_output .= $args->after;

    The position in the code wouldn't really matter, since you will be positioning the thumbnail as absolute anyways.

    I just realized you will probably need to add the id to the thumbnail output so that each image can be targeted individually. Since we're here, we can also wrap the thumbnail in its permalink, so users can click on the image as well. We can use the post_thumbnail_html filter for that:

    function kwight_add_thumbnail_id( $html, $post_id, $post_image_id ) {
        $html = '<a id="' . $post_id . ' href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>';
        return $html;
    }
    add_filter( 'post_thumbnail_html', 'kwight_add_thumbnail_id' );
    Posted 2 years ago #
  12. seanhawkridge
    Member

    Thanks for this.

    It's weird. Wherever I try to add that snippet, I get a syntax error for the closing curly bracket. I can't figure out any way of preventing it.

    Posted 2 years ago #
  13. kwight
    Member

    Can't see anything obvious. What's the error?

    Posted 2 years ago #
  14. seanhawkridge
    Member

    It's flagging up the closing curly bracket in the

    $thumbnail = '';
    if( $id = has_post_thumbnail( (int)$item->object_id ) ) {
    $thumbnail = get_the_post_thumbnail( $id )
    };

    as a parse error.

    If I put another snippet in there, for example to collect the description of the link, with opening and closing curly brackets, then it's fine. SO I think it must be something to do with the call to the post_thumbnail specifically rather than a stray bracket somewhere.

    I've checked through the custom template too but can't see anything untoward in there. but maybe I'm missing something...

    Aaaargh!

    Posted 2 years ago #
  15. kwight
    Member

    Ah, there shouldn't be a semi-colon after the closing curly bracket - my bad.

    Posted 2 years ago #
  16. seanhawkridge
    Member

    Just to say that after much wrestling this is working - thanks so much for your help. I can post a link/working code when it's all tidied up if anyone would find that helpful.

    Posted 2 years ago #
  17. dados
    Member

    Hi, I need same like you.. Can you please send me code???

    Posted 2 years ago #
  18. dados
    Member

    any replay please?

    Posted 2 years ago #
  19. seanhawkridge
    Member

    Hello dados -

    I would suggest going through the steps kwight outlined above - those are what got mine working. There were a few bits that were unique to the site I was making but if you go through the stuff here step by step you should get there.

    Posted 2 years ago #
  20. dados
    Member

    I need now something like this, actually same thing :) http://heirloomcouture.com/press.html see the gallery on right, when you hover with mouse over thumbs you get image big in right frame..

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.