Support » Theme: MesoColumn » Add the featured image to the top of each single post page

  • Resolved wpmember11

    (@wpmember11)



    An idea: can we add the featured image at the top of eacch single post page at full width but everything else remain the same below the image? Thanks.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Theme Author Richie KS

    (@rkcorp)

    try add this to functions.php

    function meso_add_feat_img_single() {
    if ( has_post_thumbnail() && is_single() ) {
    the_post_thumbnail('full', ['class' => 'feat_img_top_post']);
    }
    }
    add_action('bp_before_post_content','meso_add_feat_img_single');

    and add this to custom css

    img.feat_img_top_post {max-width:100%;height:auto;margin:0;}

    wpmember11

    (@wpmember11)

    Thanks for the codes. i think we may not have the same image in mind.

    The codes did add a featured image but the page is still the default template with a right sidebar and the featured image is an image at the top of the left side of the screen, which means the main body of the post.

    My concept is, if possible, to have the image appear at the top of the entire page maybe in a black (or whatever color) background that occupies the entire width of the screen at the very top. Then below the black background (that has the featured image inside) is the default template with the post content on the left and sidebar on the right.

    I apologize for not being clear on my first post. So is that possible? Thank you.

    Theme Author Richie KS

    (@rkcorp)

    ok, i don’t think background full image is possible. try this.
    remove the previous code and css and add this to functions.php

    function meso_add_feat_img_single() {
    global $post;
    if ( has_post_thumbnail() && is_single() ) {
    echo '<div id="custom-img-header">';
    echo get_the_post_thumbnail( $post->ID, 'full' );
    echo '</div>';
    }
    }
    add_action('bp_inside_header','meso_add_feat_img_single',10);

    this will add full width featured post image in header when in single post/page. however you need to disable custom image header if you’re using one.

    • This reply was modified 6 months, 4 weeks ago by  Richie KS.
    • This reply was modified 6 months, 4 weeks ago by  Richie KS.

    Thank you very much for the codes. They’re magical with a twist – now all the gravatars at the comment form and the private message plugin I use are also big, disproportionately big. Each user’s gravatar at the comment form at the bottom of each post is about 1/3 of the entire screen width.

    Another thing is because the majority of my site content will be contributed by my frontend users, so their featured image can be all different sizes and height and width. By the time they show up at the top header, they can be of different length with some of them unusually long. I’m just windering if this is considered acceptable ?

    Thank you again.

    Theme Author Richie KS

    (@rkcorp)

    try add this to custom css

    img.avatar { max-width:48px;height:auto; }

    for the header image height control, maybe this

    #custom-img-header { max-height:500px; overflow:hidden; }

    this will set max height for the header to 500px;

    Thank you for the codes. Even tough it does solve the problem, but I also have some new discoveries.

    1. After adding the 2 lines of CSS codes from your last message, whenever I’m on frontend Customizer, if I refresh the screen, when the screen came back, it will flash a bunch od codes at the top of the screen before they disappeared and the normal screen appears.

    2. I use Ultimate Member and the member’s gravatar on their profile page now looks like this
    https://s13.postimg.org/56lxnk8l3/Screenshot_87.png

    , when the photo is supposed to neatly fit in the circle.

    But if I removed the 2 lines of css codes, then it will look normal again.

    3. I have Event Manager on my site and the event listing page originally looked like this

    https://s13.postimg.org/9rhato1tj/Screenshot_88.png
    https://s13.postimg.org/iqbyko1av/Screenshot_89.png

    And now it looks like this

    https://s13.postimg.org/695ax2ivb/Screenshot_93.png
    https://s13.postimg.org/u04ofalo7/Screenshot_91.png
    https://s13.postimg.org/44kxw46zr/Screenshot_92.png

    If you look at the top of screensot 93, right over the slider theres a line of text that should not be there

    ”Notice: Undefined offset: 1 in /www/wp-content/plugins/ml-slider-pro/modules/theme_editor/theme_editor.php on line 1420”

    I forgot to check the event listing page when first adding the functions.php codes. Not knowing if it was the functions.php or the css code that is messing up the event listing page, I deleted one at a time but neither changed this event list page.

    So I deleted both, which means everything should restore to the way it was, like nothing happened. But strangely, even after deleting both codes and the featured image disappeared from the top of a single post page,

    . the event listing page is still messed up as appeared on the screenshots,
    . the gravatar at comment form and the private message plugin are still blown up,
    . when on frontend customizer and refresh page, it still has those codes popping up

    The only thing that now looks normal is the gravatar on Ultimate Member profile page now looks normal.

    I somehow feel something has been broken after adding those codes and it didnt feel right.

    I’m wondering if any of this makes any sense to you and are they fixable?

    Thank you.

    • This reply was modified 6 months, 2 weeks ago by  wpmember11.
    Theme Author Richie KS

    (@rkcorp)

    sometime this happen when the custom css you added in customizer->additional css or the theme customizer->general->custom css had unclose bracket or wrong code etc, double check the css code.

    try modified this code from
    https://wordpress.org/support/topic/add-the-featured-image-to-the-top-of-each-single-post-page/#post-10026653

    to this

    function meso_add_feat_img_single() {
    global $post;
    if ( has_post_thumbnail() && is_single() && get_post_type() == 'post') {
    echo '<div id="custom-img-header">';
    echo get_the_post_thumbnail( $post->ID, 'full' );
    echo '</div>';
    }
    }
    add_action('bp_inside_header','meso_add_feat_img_single',10);

    this is to make sure, the header image only show in post type – post, not custom post type.

    although i’m not sure if this error notice might cause the screen bug in your listing

    ”Notice: Undefined offset: 1 in /www/wp-content/plugins/ml-slider-pro/modules/theme_editor/theme_editor.php on line 1420”

    did disabling this plugin-ml-slider-pro fix the page?

    • This reply was modified 6 months, 2 weeks ago by  Richie KS.
    • This reply was modified 6 months, 2 weeks ago by  Richie KS.

    I checked the CSS code and there were no broken brackets or anything.

    Disabling plugin-ml-slider-pro did not get rid of the Notice.

    So I created a copy of my site before intending to restore it back to a previous version. Little did I know the copy version reflects only the site version immediately after i added the original functions.php code without the ”Notice: Undefined offset…” So that somehow unexpectedly fixed the Notice problem.

    I did not use the modified functions.php. Instead, I kept the original one, then I also kept
    #custom-img-header { max-height:500px; overflow:hidden; }

    but removed img.avatar { max-width:48px;height:auto; }

    Then I found the enlarged images on Event listing page can be easily corrected with a CSS plugin. Since I removed the img.avatar { max-width:48px;height:auto; }, the avatar on member profile page is corrected automatically.

    The only problem left was the avatar on the private message plugin still looked abnormal. The CSS plugin couldn’t fix it. Then a few days later I suddely found it went back to normal without my knowledge. The only possible trigger of this unintended correction I can think of was probably the several deactivate-then-reactivate all of my plugins I did when troubleshooting a couple other plugins in between these two events.

    Strange, but I’m only grateful they’re all fixed. I hope they will stay that way.

    Thank you.

    Hi,

    You previously helped me add a featured image at the top of each single post. If you look at this screenshot,

    https://s7.postimg.cc/9n8n75dgb/Screenshot_358.png

    between the featured image and the primary menu, is it possible we can add a row for me to place my logo there?

    Also, on this screenshot
    https://s7.postimg.cc/8kygok4wr/Screenshot_357.png

    The ad banner at the top of the post somehow was naturally left-aligned, which looks very strange up there. Can we make it centered?

    Thank you.

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