[Support request] More meta content in WP Show Posts

Home Forums Support [Support request] More meta content in WP Show Posts

Home Forums Support More meta content in WP Show Posts

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1532821
    Adam

    Hello!

    I am trying to achieve the same effect as the cards on this page using a combination of GeneratePress and WP Show Posts Pro – http://squamishbarbell.com/coaches/

    I can’t pull any information besides the post title and excerpt for each one of my “coach” posts. Is there a way to pull more custom fields into the WP show posts field or another plugin you’d recommend to achieve the desired effect?

    Thanks!
    Adam

    #1532840
    Elvin
    Staff
    Customer Support

    Hi,

    You can follow the examples on ACF’s documentation found here:
    https://www.advancedcustomfields.com/resources/code-examples/

    Here are some important ones too:
    https://www.advancedcustomfields.com/resources/get_field/ – for specific field
    https://www.advancedcustomfields.com/resources/get_fields/ – multiple fields in array from a post.

    As for displaying them on WPSP, you can use wpsp_ filters to place them in.

    Example application:
    https://wpshowposts.com/support/topic/different-featured-image-for-list-and-page/

    A wise man once said:
    "Have you cleared your cache?"

    #1533659
    Adam

    This is really helpful! The ACF documentation is a little hard to sort through and find exactly what I need. Can you share the function I would need to run in order to pull in a custom field that I set up called “coach_name” and display on WPSP?

    #1533792
    Elvin
    Staff
    Customer Support

    You may find this reply useful:
    https://generatepress.com/forums/topic/how-do-i-get-the-header-on-the-category-pages/#post-1440100

    As shown in a snippet within the reply, we use get_field('your_custom_field_slug_here');.

    Displaying things in WPSP requires filter.

    Say for example, you want your custom field to appear before the WPSP’s title, in that case you’ll have to use wpsp_before_title filter for your PHP code snippet.

    Example PHP Snippet:

    add_action('wpsp_before_title', function(){
    echo get_field('coach_name');
    });

    This PHP snippet will display whatever is in the field “coach_name” before the title on WPSP.

    A wise man once said:
    "Have you cleared your cache?"

    #1533983
    Adam

    Thanks again! I am making progress.

    How do I display the meta-data only when hovering over the image using one of the card overlay styles? I.e. default state is just the image and hover state is the coach_name and other meta information I want to pull in through custom fields.

    #1533994
    Elvin
    Staff
    Customer Support

    How do I display the meta-data only when hovering over the image using one of the card overlay styles? I.e. default state is just the image and hover state is the coach_name and other meta information I want to pull in through custom fields.

    You can try adding this CSS:

    Example: (using overlay style 1)

    /* Hides the contents */
    .wpsp-content-wrap {
        opacity: 0;
    }
    /* Displays the contents on hover*/
    .wpsp-content-wrap:hover {
        opacity: 1;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1535293
    Adam

    Having trouble getting that solution to work. I have my custom fields in their own div sections which is what I think is causing it to not work.

    Here is the CSS I’m using for my divs coach_name, coach_experience and coach_tagline

    .coach_name {
      padding-left: 10px;
    	text-align: left;
    	color: #ff6600;
    	background: rgba(0, 0, 0, 0.9);
    	font-size: 30px;
    	font-weight: 600;
    }
    
    .coach_experience {
    	text-align: left;
    	color: #fff;
    	font-size: 20px;
    	font-weight: 600;
    }
    
    .coach_tagline {
    	text-align: left;
    	color: #fff;
    	font-size: 20px;
    	font-weight: 600;
    }

    And here is a link to how the posts appear now: https://ibb.co/87HCSnW Any other suggestions for getting the content to show only on hover?

    Thank you!
    Adam

    #1535300
    Elvin
    Staff
    Customer Support

    Any chance you can link us to the site in question to see how your WPSP list is structured?

    So we could see which selectors to best use in applying this. thank you. 🙂

    A wise man once said:
    "Have you cleared your cache?"

    #1535320
    Adam

    It’s in dev with WP Local – does this link work? http://eb82925b7872.ngrok.io/coaches/

    #1535398
    Elvin
    Staff
    Customer Support

    I’m seeing it. Thanks.:)

    We can address this by creating a Hook Element with Display Rule Location set to the page where you put this WPSP list.

    More about GP Premium’s Hook Element here – https://docs.generatepress.com/article/hooks-element-overview/

    We then add this code:

    <style>
    /* Hides the contents */
    .wpsp-content-wrap {
        opacity: 0;
    }
    </style>
    
    <script>
    var wpsp_list = document.getElementById('wpsp-7');
    var wpsp_article = wpsp_list.getElementsByClassName('wp-show-posts-single');
    
    for(i=0; i<wpsp_article.length; i++){
        wpsp_article.addEventListener("mouseover", function(){
            var wpsp_contents = this.querySelector('.wpsp-content-wrap');
            wpsp_contents.style.opacity = 1;
        });
    		wpsp_article.addEventListener("mouseout", function(){
            var wpsp_contents = this.querySelector('.wpsp-content-wrap');
            wpsp_contents.style.opacity = 0;
        });
    }
    </script>

    And set the Hook dropdown value to “wp_footer” as shown here: https://share.getcloudapp.com/E0urD0zL

    Note: if in case you replaced your WPSP list, you must change the document.getElementById('wpsp-7'); value within the script. Replace wpsp-7 with your WPSP list id which can be found on the right hand side of the screen when you’re editing the WPSP list settings.

    A wise man once said:
    "Have you cleared your cache?"

    #1535839
    Adam

    Thanks Elvin, that worked great! It looks good on Desktop but when I view on mobile the meta content doesn’t seem to appear on hover. Any ideas?

    Also – is there a way to disable the post links? I’m using WPSP to only display all of the meta data from the individual coach posts and not allow users to click through to an actual page.

    #1536649
    Elvin
    Staff
    Customer Support

    Thanks Elvin, that worked great! It looks good on Desktop but when I view on mobile the meta content doesn’t seem to appear on hover. Any ideas?

    Ah of course. Touchscreen devices are pretty tricky as you don’t have a mouse that “hovers” over content.

    For those, we’ll have to use “touchstart” and touchend”.

    <script>
    var wpsp_list = document.getElementById('wpsp-7');
    var wpsp_article = wpsp_list.getElementsByClassName('wp-show-posts-single');
    var x = window.matchMedia("(max-width: 768px)");
    
    for(i=0; i<wpsp_article.length; i++){
    
        wpsp_article.addEventListener("touchstart", function(){
            var wpsp_contents = this.querySelector('.wpsp-content-wrap');
            wpsp_contents.style.opacity = 1;
        });
    
        wpsp_article.addEventListener("touchend", function(){
            var wpsp_contents = this.querySelector('.wpsp-content-wrap');
            wpsp_contents.style.opacity = 0;
        });
    
        wpsp_article.addEventListener("mouseover", function(){
            var wpsp_contents = this.querySelector('.wpsp-content-wrap');
            wpsp_contents.style.opacity = 1;
        });
    
        wpsp_article.addEventListener("mouseout", function(){
            var wpsp_contents = this.querySelector('.wpsp-content-wrap');
            wpsp_contents.style.opacity = 0;
        });
    
    }
    </script>

    Also – is there a way to disable the post links? I’m using WPSP to only display all of the meta data from the individual coach posts and not allow users to click through to an actual page.

    As this is a completely different topic, can you open a new one about it? you can open it on the WPShowPosts support forum. Thank you.

    A wise man once said:
    "Have you cleared your cache?"

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