[Support request] How I can do this on post page?

Home Forums Support How I can do this on post page?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1429871
    Sara

    Hello,

    I would like to make some changes in my post page that would be the following: (first url on textbox bellow)

    1. I would like to show excerpt text after title
    2. Show Category and Tag
    3. After excerpt text would like to show “Author name” like on this page place on textbox bellow the second url
    4. Then show postdate and show avatar image on the left side of both like on page on point 2 and on the right side would like to show category on same row of author name and tag on the same date row
    5. Would like to show images full width on post

    Thanks,

    Sara

    #1429879
    Leo
    Staff
    Customer Support

    Hi there,

    Are you referring to single posts or the posts/blog page here?

    #1430322
    Sara

    I am referring to single post page, where post are publish as you can see on first url on textbox.

    #1430646
    David
    Staff
    Customer Support

    Hi there,

    lets deal with a couple at a time.

    1. Create a new Hook Element:

    Add this to the content:

    <p class="entry-subtitle"><?php echo get_the_excerpt(); ?></p>

    Select the after_entry_title hook
    Check: Execute PHP
    Set the Priority to 5.

    Set the Display Rules to Single Posts

    3 & 4 This example explains:

    https://docs.generatepress.com/article/entry-meta-style/#example-2

    5. Are you using the Block Editor? – if so, you can select the image and in the toolbar select the Wide width option.

    #1431194
    Sara

    Hello David,

    I manage to do steps you mention

    1) Its showing excerpt just want to give a <br> of space between title and excerpt

    2) Pending

    3) It is showing just would like to add static text => “Published $postdate” and under it “By $authorname” and if possible remove authorname link

    4) Mention on point 3 and they seem to show backwards should be first date and second author name

    5) Yes I am using block editor but, I don’t seem to find the option you mention

    #1431722
    David
    Staff
    Customer Support

    1. Add this CSS:

    .entry-subtitle {
        margin-top: 1em;
    }

    2. Pending

    3. Use this CSS – instead of the CSS provided in the Meta example document:

    .entry-meta, .entry-meta .meta-data {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .entry-meta .meta-data {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column-reverse;
        margin-left: 0.75em;
    }
    .entry-meta .meta-gravatar img {
        width: 40px;
        border-radius: 50%;
    }
    .entry-meta .meta-data .posted-on:before {
        content: 'Published';
        margin-right: 0.5em;
    }
    .entry-meta .meta-data .byline:before {
        content: 'By';
        margin-right: 0.5em;   
    }

    Remove link for Author:

    https://docs.generatepress.com/article/generate_post_author_output/#remove-link

    5. This images shows what the alignment toolbar icon looks like – click that and select Wide:

    http://devsite337160.apps-1and1.net/wp-content/uploads/2020/07/Screenshot-2020-07-19-at-11.29.02.png

    #1432765
    Sara

    Hello David, yes its seems to be working just a few more points to finish:

    1) Done

    2) a) On single post to create category on top before title with same style as on site: https://todateen.uol.com.br/novo-filme-da-netflix-estrelado-por-lily-collins-e-amanda-seyfried-tem-primeiras-imagens-divulgadas/ but, with this pink color as background color #FF5481.
    b) Show tag like on sane site as 1 at the bottom where it says “Related topics” with black font and # at beginning of nametag
    c) Would like to remove folder icon for category and tag icon for tag

    3) There is an extra space between tagname “By” and “author name” and same with “Publish” and “postdate” how I can remove that extra space?

    4) Under “By $authorname” would like also to add “Latest updated” and as variable use “latest post revision date”? using same date format as on publish.

    5) Yes your solution works but, not as feature image this option shows when adding image from media library, would like to do this for feature image on post if possible.

    Thanks again David!

    #1433175
    Tom
    Lead Developer
    Lead Developer

    Hi Sara,

    2. To move the categories, let’s do this:

    add_filter( 'generate_footer_entry_meta_items', function( $items ) {
        return array_diff( $items, array( 'categories' ) );
    } );
    
    add_action( 'generate_before_content', function() {
        if ( is_single() ) {
            generate_do_post_meta_item( 'categories' );
        }
    } );

    For the tags, let’s try this CSS:

    .tags-links:before {
        font-family: inherit;
        content: "Related Topics:";
        width: auto;
        font-weight: bold;
        text-transform: uppercase;
    }
    
    .tags-links a:before {
        content: "#";
    }

    To remove the folder from categories, do this:

    .cat-links:before {
        display: none;
    }
    
    .cat-links a {
        padding: 5px 10px;
    }

    3. These spaces are controlled by your CSS. For example:

    .entry-meta .meta-data .byline:before {
        content: 'Por';
        margin-right: .5em;
    }

    Adjust the margin-right until it’s good.

    4. You want the updated date below the author, or below the published date?

    5. Un-checking the “Display padding around featured images” option in Customize > Layout > Blog may do the trick.

    #1443956
    Sara

    Hello Tom,

    Thanks a lot for the reply almost everything is working, just need the following:

    1) Done

    2) a) Missing style for category like on site I mention
    b) Done
    c) Done

    3) Done

    4) I would like to place update date on top of publish date, also I would like in both also the time was updated and publish but, I need to add this text “a las” between date and time in both like happens on this site: https://es.ign.com/ea-access/167026/news/ea-eliminara-origin-en-pc-a-cambio-de-una-nueva-aplicacion

    5) Done

    Thanks again!

    Sara

    #1444571
    Tom
    Lead Developer
    Lead Developer

    2 a) Try this:

    .cat-links a {
        background: #ff005b;
        color: white;
        transform: skewX(-15deg);
        display: inline-block;
        font-size: 15px;
        margin-bottom: 5px;
    }

    4. You can learn how to add the time to the date here: https://wordpress.org/support/article/formatting-date-and-time/

    Then remove this CSS:

    .entry-meta .meta-data .posted-on:before {
        content: 'Publicado';
        margin-right: 0.3em;
    }

    And add this:

    .posted-on .updated {
        display: inline-block;
    }
    
    .posted-on .updated:before {
        content: "Updated on ";
    }
    
    .posted-on .published {
        display: block;
    }
    
    .posted-on .published:before {
        content: "Published on ";
    }
    #1459018
    Sara

    Hello Tom, almost done just 2 last things please:

    1) Done

    2) a) This is showing correctly the only thing I would like to change font style on it like on top menu which is the following style:

    color: #ffffff;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;

    b) Done
    c) Done

    3) Done

    4) This is showing great just would like to remove link from post date and update date.

    5) Done

    Thanks!

    Sara

    #1460200
    Tom
    Lead Developer
    Lead Developer

    2a) Have you tried adding those values to the existing CSS I provided? Should work.

    4. This should help: https://docs.generatepress.com/article/generate_post_date_output/#remove-link-from-date

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