Support Forum

Hi there,

Currently, it’s possible but it’ll require customization that’s outside of our scope.

It’ll require a JS library like Filterizr – https://yiotis.net/filterizr/ – and apply its capabilities to WPSP.

Tom’s actually working on something like this but it’s not ready yet, unfortunately.

This is the part of the CSS dispatch uses for its magazine grid. You can play around with its values.

/* magazine Grid Golden Ratio 5 block standard */
/* Add wpsp-grid class to WPSP List shortcode wrapper */
@media (min-width: 600px) {
    .wpsp-grid .wp-show-posts {
        display: grid;
    }
}

@media (min-width: 900px) {
    .wpsp-grid .wp-show-posts {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: 1fr auto;
    }

    .wpsp-grid .wp-show-posts article:first-child {
        grid-column: 1 / 5;
        grid-row: 1 / 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(2) {
        grid-column: 5 / end;
        grid-row: 1 / 2;
    }

    .wpsp-grid .wp-show-posts article:nth-child(3) {
        grid-column: 5 / 7;
        grid-row: 2 / 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(4) {
        grid-column: 7 / end;
        grid-row: 2 / 4;
    }
}

@media (max-width: 899px) and (min-width: 600px) {
    .wpsp-grid .wp-show-posts article {
        grid-column: span 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(3), .wpsp-grid .wp-show-posts article:nth-child(4) {
        grid-row: 3;
        grid-column: span 2;
    }
}

.wpsp-grid article:not(:first-child) .wp-show-posts-image a img {
    height: 250px;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.wpsp-grid article:first-child .wp-show-posts-image a img {
    height: 500px;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.wpsp-grid article:not(:first-child) .wp-show-posts-entry-summary, .wpsp-grid article:not(:first-child) .wp-show-posts-entry-meta-below-post, .wpsp-grid article:not(:first-child) .wpsp-read-more {
    display: none;
}

Try adding this CSS:

.wpsp-row article:nth-child(even) .wp-show-posts-inner,
.wpsp-row article:nth-child(odd) .wp-show-posts-inner {
flex-direction: row !important;
}

This should turn all the WPSP lists with the card style “Row” have their images on the left side instead of alternating.

All you have to do on the 2nd one is to assign card style “Row” to it as well. 🙂

Widgets normally have unique IDs. I believe you can target the heading you’ve specifically applied above the WPSP list w/ that. 🙂

But perhaps I’m missing the point. If that’s the case, can you link me to the page in question and provide a mockup of how you want things to be laid out?

Hi Marco,

I’m not exactly sure what you mean by “slider” position. Here’s what the site looks on my end (chrome – pc) – https://share.getcloudapp.com/9ZuQJJLP

Can you clarify/explain further?

No problem. Glad to be of any help. 😀

I looked also into the PSI results for desktop and there it says also Unsupported CSS Property: color so this could become a never ending story. On my site, the flex shrink message seems to be an all overlay lists with zoom on hover and more than one card. Maybe the new WPSP version will solve the problem?

I don’t think the beta version will solve this because the issue is CSS-related and beta generates the same CSS as the current official release.

And the issue seems to be mostly about the interaction between WPSP’s CSS and the caching plugin you use. (since the flags don’t show up when there’s no caching plugin activated)

We can try more things though – See further suggestions here.
https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count

Specifically, will-change
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

Hi Alan,

You can reuse a single WPSP list and have it do different queries on each instance through shortcode.

Here’s a list of examples you can do w/ shortcode.
https://wpshowposts.com/support/topic/shortcode-parameters-documentation/#post-29167

And you can do multiple instance of this throughout the site or within the same post.

Say for example, you want to use list id 1234 on the same page but you want it to display different queries for each instance, you can do something like this:

Here’s an instance where the list queries category with slug “humanities”
[wp_show_posts id="1234" settings="taxonomy=category&tax_term=humanities"]

Here’s an instance where the list queries sorted by post views in ascending order.
[wp_show_posts id="1234" settings="meta_key=post_views_count&orderby=meta_value_num&order=ASC"]

Here’s an instance where the list queries specifying post IDs to display:
[wp_show_posts id="1234" settings="post_id=4403,3904,4002"]

You can use these 3 shortcodes on the same page simultaneously and they will all display different queries. You don’t have to make multiple WPSPs assuming you all want them to have the same styling.