Docs

[bedingfield]

hi there,

I wondered if it is easy to add a caption below a featured image? I’d like caption, then a bottom-border.

http://elyrunners.club/thames-path-100/

Thank you.

[Jade]

Hi there,

You will have to manually add the caption for the image and we could add a custom CSS to style it.

You can do it by something like this:

<p class="img">
    <img src="IMAGE_URL">
    <span class="img-caption">I am a caption</span>
</p>

Then add this CSS in the customizer:

p.img .img-caption {
    display: block;
    text-align: center;
    color: #ccc;
    font-style: italic;
}

p.img img {
    width: 100%;
}

Hope this helps.

[bedingfield]

Hi there,

I think it is possible, but I would need to know what page calls the featured image in a single post.

I believe something like this could be incorporated…

$get_description = get_post(get_post_thumbnail_id())->post_excerpt; if(!empty($get_description)){//If description is not empty show the div echo '<div class="img-caption">' . $get_description . '</div>'; }

What do you think? Will this work?

Thank you.

[Rue Nel]

Hello There,

Thanks for the updates! Your code might not work. To be able to display the caption of the image, you have to edit each of the images first and add a caption. And after that, please add the following code in your child theme’s functions.php file

// Get the image details
// =============================================================================
function wp_get_attachment( $attachment_id ) {
  $attachment = get_post( $attachment_id );
  return array(
    'alt' => get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true ),
    'caption' => $attachment->post_excerpt,
    'description' => $attachment->post_content,
    'href' => get_permalink( $attachment->ID ),
    'src' => $attachment->guid,
    'title' => $attachment->post_title
  );
}
// =============================================================================

// Custom featured image that will
// =============================================================================
function x_featured_image( $cropped = '' ) {

  $stack     = x_get_stack();
  $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

  if ( has_post_thumbnail() ) {

    if ( $cropped == 'cropped' ) {
      if ( $fullwidth ) {
        $thumb = get_the_post_thumbnail( NULL, 'entry-cropped-fullwidth', NULL );
      } else {
        $thumb = get_the_post_thumbnail( NULL, 'entry-cropped', NULL );
      }
    } else {
      if ( $fullwidth ) {
        $thumb = get_the_post_thumbnail( NULL, 'entry-fullwidth', NULL );
      } else {
        $thumb = get_the_post_thumbnail( NULL, 'entry', NULL );
      }
    }

    switch ( is_singular() ) {
      case true:
        $post = get_post( $post );
        $post_thumbnail_id = get_post_thumbnail_id( $post );

        $get_description = wp_get_attachment($post_thumbnail_id);
        //var_dump($get_description);
        if(!empty($get_description)){
          //If description is not empty show the div echo '<div class="img-caption">' . $get_description . '<div class="img-caption">'; 
        }

        printf( '<div class="entry-thumb">%1$s<div class="img-caption">%2$s</div></div>', $thumb, $get_description['caption']  );
        break;
      case false:
        printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
          esc_url( get_permalink() ),
          esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
          $thumb
        );
        break;
    }

  }

}
// =============================================================================

You will have something like this: http://prntscr.com/btx2il

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank you for your understanding.

[bedingfield]

thats great. Thank you Rue. I do appreciate this is going custom, so thank you for showing me the way 🙂

Just one quick question regarding CSS for this.

I have used this…

.img-caption {
	color: #ffffff !important;
	background-color: transparent !important;
	padding: 0 0 0 20px;
	margin: 0 0 0 20px;
	border-bottom: dotted;
	}
	

I want a transparent background, But the colour is being over-ridden for some reason. Any ideas?

If you look here, background is different in the caption. http://elyrunners.club/beat-the-tide-hunstanton/

Thank you.

[Rupok]

Hi there,

Thanks for updating. When you set transparent background, it will display the background of the element behind this. Here the background color of .entry-thumb is showing since it’s the immediate parent of the caption that has background set. That’s how the transparent background color works.

Hope this makes sense.

[bedingfield]

Thank Rue, The code works fine, apart from when caption is empty. It still displays border. But I can live with that as your code is just what I wanted. Thank you again.

With caption: http://elyrunners.club/beat-the-tide-hunstanton/

When no caption: http://elyrunners.club/bere-pen-10k-tamar-peninsula-devon/

[Joao]

Hi There,

I am glad you are happy with the solution.

You could chose to remove de border-bottom and like that would be unnoticeable when there is no caption 🙂

Or you could find a caption to use in the cases you have no caption.

Hope that helps,

Joao

[Author]

Posts