Black Friday sale! Get 25% off WPSP Pro! Discount automatically applied at checkout.

[Resolved] List item order / image swap on hover

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support List item order / image swap on hover

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #7163
    Teuvo
    Participant

    Hi

    I use WPSP pro. Two questions.

    1. How to manually set order?

    I have a list of four pages, selected by using Post IDs.
    I’d like to set the order of appearance of these pages in the list.
    I’ve set page properties order values in every page. In WPSP More Settings there is the Order by selection, but Page Order is not an available option. Is there a way to manually set what list item is first, second, third etc.?

    2. Is there the “oldfashioned” image swap available?

    You can set title color and backgrounds and their hover state. Is there a way to swap images on hover? I know that with CSS filter() you can achieve nice effects manually, but my client wants to swap the pic on hover.

    Actually it would be nice if the hover effect would be triggered on hover over wp-show-posts-inner class both the title and image, now its only background.

    #7166
    Tom
    Keymaster

    Hi there,

    1. We’re missing the menu_order option in that dropdown, which is what you’re after. You can manually set is in the settings parameter of your shortcode.

    For example:

    [wp_show_posts id="123" settings="orderby=menu_order"]

    2. This should be do-able with a hook. Where would the second image be coming from? A custom field?

    #7167
    Teuvo
    Participant

    OK, thanks again. Number one solved 🙂

    I’m using the pages featured image, so that image to be swapped on hover, from media library, no custom field in this case.
    Can you link me to a resource about the hook.

    About the hover:
    In WPSP when hovering over the area it only changes the background-color, not the text nor image effect
    I wish this would work the same way as menu colors work in GPP and hover would affect also text and img. The text would be more readable, some examples behind the link.

    three sample screenshots about hover
    I’ve used CSS filtering in the img on hover, custom CSS.

    #7194
    Tom
    Keymaster

    The main image would be a featured image, but where would the second image come from? I assume you want to swap one image for another on hover?

    We have some very cool overlay options in WPSP Pro 1.0 I think might help – the alpha is being released tomorrow 🙂

    #7197
    Teuvo
    Participant

    The swap image would be another image from media library.

    I wonder why the hover is not by default affecting title color, so would not have to code like this:

    .wp-show-posts-inner:hover .wp-show-posts-entry-title a {
    color: #ffffff;
    }

    I have the WPSP alpha 1.0 already on test 🙂

    #7225
    Tom
    Keymaster

    We would still need to know which image to use from the Media Library.

    For example, if it was a URL in a custom field, we could do this:

    add_action( 'wpsp_inside_image_container', function( $settings ) {
        if ( 123 === $settings['list_id'] ) {
            $image = get_post_meta( get_the_ID(), 'your_custom_field', true );
    
            if ( $image ) {
                echo '<img src="' . $image . '" class="secondary-image" />';
            }
        }
    } );

    Then we could use this CSS:

    .wp-show-posts-image .secondary-image,
    .wp-show-posts-image:hover img:not(.secondary-image) {
        display: none;
    }
    
    .wp-show-posts-image:hover .secondary-image {
        display: block;
    }

    However, I’m not sure how well that would work, as the hook is before the image link, unfortunately.

    Ah yes, there isn’t an option for the title color on hover, so if the backgrounds are super different, you’ll need to use CSS to change them.

    #7321
    Teuvo
    Participant

    ok tks

    #7331
    Tom
    Keymaster

    You’re welcome 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.