[Support request] How i can achieve article design like wisepick.org

Home Forums Support How i can achieve article design like wisepick.org

  • This topic has 5 replies, 2 voices, and was last updated 3 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1328020
    Lisa

    Hello GP Support!
    I want ot design my article similar to this one:
    https://wisepick.org/best-acoustic-electric-guitar-under-500/

    I think i can achieve it via page hero. But how i can add following things
    1) Last updated date
    2) This visual data that is at the bottom of featured image: 27 Models Considered 61 Hours of Research 4 Experts Interviewed 268 Reviews Analyzed

    #1328236
    David
    Staff
    Customer Support

    Hi there,

    1. The last updated requires a snippet to always output the updated date:

    https://docs.generatepress.com/article/generate_post_date_output/#only-show-updated-date

    and a filter to use the updated date in the header element:

    https://docs.generatepress.com/article/show-the-updated-post-date/#show-the-“updated”-post-date-in-header-element

    Now you can add Last Updated: {{post_date}} to your header element.

    2. The ‘custom meta’ bar would first require some custom fields.
    Then we would need to write a Custom Short Code to output that data inside the Header Element. Do you have any Custom fields ?

    #1328297
    Lisa

    I dont have now, I have plugin names as advanced custom fields. I would appreciate if you guide me in depth detail of point 2.

    #1328333
    David
    Staff
    Customer Support

    It would require Custom development but this should get you started.
    This ACF article provides the shortcode method for displaying a field name:

    https://www.advancedcustomfields.com/resources/shortcode/

    Then in your Header Element you could add some custom HTML to create the container and the labels – this would be for 4 fields:

    <div class="custom-field-container">
        <div class="custom-field-inner grid-container">
            <div class="field-container">
                <div class="field-inner">
                    <span class="field-label">Your 1st Field Label</span>[acf field="your-field-1"]
                </div>
            </div>
            <div class="field-container">
                <div class="field-inner">
                    <span class="field-label">Your 2nd Field Label</span>[acf field="your-field-2"]
                </div>
            </div>
            <div class="field-container">
                <div class="field-inner">
                    <span class="field-label">Your 3rd Field Label</span>[acf field="your-field-3"]
                </div>
            </div>
            <div class="field-container">
                <div class="field-inner">
                    <span class="field-label">Your 4th Field Label</span>[acf field="your-field-4"]
                </div>
            </div>
        </div>
    </div>

    Then some CSS to style & position them within a responsive row:

    .page-hero {
        position: relative;
    }
    
    .custom-field-container {
        padding: 20px;
        background-color: rgba(0, 0, 0, 0.8);
        color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }
    
    .custom-field-inner {
        display: flex;
        flex-wrap: wrap;
    }
    
    .field-container {
        flex: 1 0 25%;
    }
    
    .field-inner {
        padding: 10px;
    }
    
    @media (max-width: 768px) {
        .field-container {
            flex: 1 0 50%;
        }
    }

    In the header element settings you would need to add enough bottom padding ( desktop and mobile ) to create a safe space or this custom meta container to sit.

    #1329012
    Lisa

    Thats great, I will give it a try.
    Is it necessary to use ACF or it can be done without that plugin using only GP?

    #1329540
    David
    Staff
    Customer Support

    Its possible without ACF.
    But it will mean using the built in Custom Fields.

    https://wordpress.org/support/article/custom-fields

    And then you would have to create your own shortcodes.
    This article here provides the code for that.

    https://www.isitwp.com/get-custom-field-value-with-shortcode/

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