Image added to every post before content

[headmetal]

is there a way to add an image before and after the content on blog posts??
I’ve looked for plugins and tried a few edits to my child functions.php
If I’m able to only add these image on a specific category that would be even better if possible.

Here is the positioning I’m trying to do.

[jade]

Hi @headmetal,

Please install and activate the child theme and login through FTP then edit the functions.php then add this code:

function add_image_on_posts() {

  if( is_single() ) :

    echo '<div class="single-post-image">';
      echo '<img src="URL_OF_THE_IMAGE_FILE" alt="">';
    echo '</div>';

  endif;
  
}

add_action( 'x_after_masthead_end', 'add_image_on_posts' );
add_action( 'x_before_colophon_begin', 'add_image_on_posts' );

Please change URL_OF_THE_IMAGE_FILE that is in the code above to the url of the image file, then add this code in X > Theme Options > CSS:

.single-post-image {
    width: 100%:
    margin-top: 28px;
    text-align: center;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[headmetal]

thank you @Jade. I’ve added the code as per your instructions however the page does not show the image.
Maybe I’m missing something??

[ruenel]

Hello @headmetal,

Please update the last two lines using this code instead:

add_action( 'x_after_masthead_end', 'add_image_on_posts' );
add_action( 'x_after_view_global__slider-below', 'add_image_on_posts' );

Kindly let us know how it goes.

[headmetal]

very close. the image is showing now but the css that I added is not moving the image down from the top margin
here is what it looks like

** is there a way to limit this image to only show on one specific category too?? I have several categories in my posts section. I can move them to pages but would prefer as posts if possible **

[rad]

Hi @headmetal,

Please change the CSS to this

.single-post-image {
    width: 100%;
    margin-top: 28px;
    text-align: center;
}

It’s not working due to semicolon. About your other question, it’s possible, example changing this line

  if( is_single() ) : 

with this

  if( is_single() && has_category('music') ) :

Thanks.

[headmetal]

brilliant

thank you to the everyone for this tricky ask. everything is working perfectly

[ruenel]

You are most welcome!