[Resolved] Cards, and recovering from the Set Card Styles button

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Cards, and recovering from the Set Card Styles button

Tagged: 

This topic contains 7 replies, has 2 voices, and was last updated by  Daniel 1 minute ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #11429

    Daniel
    Participant

    Hi,
    I’m missing documentation for Cards. I’m aware of the demos page, but I have a couple of questions regarding how to use. Specifically:

    1) Besides the Card demo page, is there an explanation of how and what the “Set Card Styles” button actually does (besides the one sentence description underneath the button)?

    2) If one presses that button, is the only way to restore the previous style settings (applied to the future lists) to re-install the plugin and delete all existing data? Or is there some other way?

    3) I’m looking to achieve something like “Overlay Style 1” (and the hover effect which reveals new fields), but with 3 columns of images approx. 440×370 (something similar to the dimensions of “5 Myths” and “Cause Marketing” cards.

    I suppose my sense of the way Cards work is different than the reality. Just looking for some docs and guidance.

    Thanks,
    Dan

    #11450

    Daniel
    Participant

    I discovered some other behavior which seems to have surfaced after pressing the “Set Card Styles” button. It could be coincidence, but based on how much I’ve been using WP Show Posts previously, I doubt it. First the behavior, then the steps to recreate.

    Behavior:
    Now (using the Gutenberg editor), any pages which include WP Show Posts shortcodes display correctly on the front-end. However, if I attempt to edit that page in admin, the page editor frame displays an editor for the first post in the list which would have been displayed by the shortcode. Yes, bizarre. I can no longer edit the page or its content at all. Note: this happens when I create WP Show Post lists with posts, custom post types, etc. When I use other post grid plugins (e.g., Ultimate Add-ons for Gutenberg) to achieve a similar effect, I do not get this type of behavior.

    I have attempted to deactivate WP Show Post and Pro plugins, even deleting data. However, lists are preserved and I suppose other table entries are too. I have even resorted to deleting all Lists and also any pages where WPSP shortcodes may have been used. No luck.

    How I recreate it:
    1) Create a List. (from Posts, Custom Posts, doesn’t matter).
    2) Create a new page…in the Gutenberg editor. Enter a title, some text, then the WP Show Post shortcode referencing the List created in 1.
    3) Save draft, preview the page. It looks more or less as expected on the front-end.
    4) Now, attempt to edit the page (be sure to re-access it via “All Pages” in the Page editor). Page content is now missing. In fact, inside the editor frame is the first post in the List referenced in the shortcode.

    Happy to give you access to my development site to see for yourself.

    Thanks,
    Dan

    #11495

    Tom
    Keymaster

    Hi there,

    1. That button changes various settings within the current list to work along with the card style. For example, if a card needs the title above the featured image, it will set that option for you.

    2. If you save the list after clicking the button, you will need to manually revert the options back to what you need within that specific list. The button doesn’t do anything when it comes to future lists.

    3. Have you tried setting that card along with 3 columns/image sizes in the options? It should all work nicely.

    Any chance you can open a new topic for the other issue?

    Thanks!

    #11747

    Daniel
    Participant

    Thanks, Tom. Am getting the hang of this. I now have this result.

    I have a style question now. I’d like to achieve:

    Display: Title and Location (a custom field).
    On hover, display: Title, Terms, and Content/Excerpt
    Note: The Title is unlinked, via a wpsp_disable_image_link filter snippet.

    The style (layout and effect) I want is like the “case study explorer” section of this page.

    Is this possible? How?

    Thanks again,
    Dan

    • This reply was modified 1 week, 5 days ago by  Daniel. Reason: Clarification of 2nd link
    #11795

    Tom
    Keymaster

    Looks like the only thing missing is the hidden/display on hover meta?

    If so, try adding this:

    .wpsp-overlay.wpsp-ov-style-one .wp-show-posts-entry-meta {
        opacity: 0.0;
        -webkit-transform: translateY(1em);
        transform: translateY(1em);
        -webkit-transition: all 0.3s cubic-bezier(.33, .66, .66, 1);
        transition: all 0.3s cubic-bezier(.33, .66, .66, 1);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    .wpsp-overlay.wpsp-ov-style-one .wp-show-posts-inner:hover .wp-show-posts-entry-meta {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    #11861

    Daniel
    Participant

    Thanks, Tom. Just copying your CSS code didn’t work. I ended up working with someone for the CSS I needed.

    I have everything working — except that I wanted to achieve a slide-in from the bottom overlay (like in the example or something like this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_slidebottom).

    Any ideas how to achieve that?

    #11876

    Tom
    Keymaster

    Did you get this sorted? It looks like your overlay is sliding up now.

    Let me know 🙂

    #11884

    Daniel
    Participant

    Thanks for the follow-up, Tom. It was more complex than expected, but I got it sorted.

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

You must be logged in to reply to this topic.