List item order / image swap on hover

This topic has 7 replies, 2 voices, and was last updated 4 years, 8 months ago by Tom.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
January 15, 2019 at 3:05 am #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.

January 15, 2019 at 6:25 pm #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?

January 16, 2019 at 5:24 am #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.

January 16, 2019 at 8:13 pm #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 🙂

January 17, 2019 at 5:35 am #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 🙂

January 17, 2019 at 6:21 pm #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.
January 22, 2019 at 1:08 pm #7321

Teuvo
Participant

ok tks

January 22, 2019 at 4:44 pm #7331

Tom
Keymaster

You’re welcome 🙂
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

[Resolved] List item order / image swap on hover