Support Forum

Please login to receive premium support.

Support for the free plugin can be found here.

elvin

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 828 total)
  • Author
    Posts
  • in reply to: Filterable portfolio #34082
    elvin
    Moderator

    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.

    in reply to: Customize Cards (Row style) #34065
    elvin
    Moderator

    No problem. πŸ˜€

    in reply to: Top Articles #34035
    elvin
    Moderator

    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;
    }
    in reply to: Customize Cards (Row style) #34031
    elvin
    Moderator

    Try adding this CSS to keep the relative aspect ratio.

    .wp-show-posts-image img {
        object-fit: contain !important;
        width: 100%;
        height: auto;
    }
    in reply to: Customize Cards (Row style) #34001
    elvin
    Moderator

    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. πŸ™‚

    in reply to: Customize Cards (Row style) #33989
    elvin
    Moderator

    Hi Victoria,

    Can you link us to the page with the WPSP on the sidebar visible? So we can inspect and provide the CSS writeup for your site. πŸ™‚

    in reply to: Enable link in widget title #33987
    elvin
    Moderator

    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?

    in reply to: Enable link in widget title #33956
    elvin
    Moderator

    Good one! Glad you got it sorted. No problem. πŸ˜€

    in reply to: Display cards cut off by Chrome #33954
    elvin
    Moderator

    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?

    in reply to: Top Articles #33952
    elvin
    Moderator

    Hi there,

    At first glance, this one resembles GP’s Dispatch – https://gpsites.co/dispatch/

    Except the magazine grid is 2-1-2 with 25% – 50% – 25% width ratio.

    I believe we can achieve something like this with 2 or 3 lists.

    with 2 WPSP list setup, we’ll need to place the 2 WPSPs in 25%/75% column block.

    And then first list would be:

    – placed on the 25% column.
    – A list with card style set to “Overlay” with post per page count set to 2.
    – Column set to 1 so the posts are stacking.

    As for the second list:

    – placed on the 75% column.
    – card style set to “Overlay” with post per page count set to 3.
    – Set the offset to “2” so it doesn’t repeat the post from the first post list.
    – column set to one. (this is fine, we’ll set the layout through CSS)

    The 2nd list is the tricky part because of the CSS. But we can basically just copy the CSS of Dispatch’s magazine grid for this with a few modifications so posts #4 and #5 are displayed in a stacking manner.

    in reply to: Dynamically Show 3 or 4 Posts by Page ID # #33938
    elvin
    Moderator

    No problem. Glad to be of any help. πŸ˜€

    in reply to: Dynamically Show 3 or 4 Posts by Page ID # #33933
    elvin
    Moderator

    This attribute should work.

    [wp_show_posts id="1234" settings="post_id=3904,4403,4002&orderby=post__in"]

    in reply to: Pagespeed insight complains about non supported CSS properties #33902
    elvin
    Moderator

    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

    in reply to: Pagespeed insight complains about non supported CSS properties #33895
    elvin
    Moderator

    We can try being more list ID specific.

    Example:

    #wpsp-45396 .wpsp-overlay .wpsp-content-wrap {
        transition: none !important;
        flex: 0;
    }
    
    #wpsp-45396 .wp-show-posts-image.zoom img { transition: none !important;  }
    

    But I’m a bit hesitant with the 2nd half of this css because it may break the easing of the hover animation.

    You can try changing the transition to transition: transform !important; or do a double entry of the same property just to cancel out the transition: all.

    Like this:

    #wpsp-45396 .wpsp-overlay .wpsp-content-wrap {
        transition: none !important;
        flex: 0;
    }
    
    #wpsp-45396 .wp-show-posts-image.zoom img { transition: none;  }
    #wpsp-45396 .wp-show-posts-image.zoom img { transition: transform !important;  }
    
    in reply to: Dynamically Show 3 or 4 Posts by Page ID # #33893
    elvin
    Moderator

    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.

Viewing 15 posts - 1 through 15 (of 828 total)