WordPress.org

Ready to get started?Download WordPress

Forums

Oxygen
Get (featured) image captions (3 posts)

  1. Mark
    Member
    Posted 1 year ago #

    Oxygen uses the get_the_image() function from Hybrid. It is not clear to me whether that function can be used to get access to image description, caption, or alt text, and if so, how.

    Here's what I want to do: I want to set the alt text of the featured image on a single post to the image description. Any ideas on how this can be done in Oxygen?

  2. textosa
    Member
    Posted 1 year ago #

    I also would love to achieve this, and have been searching everywhere for a solution, even on the spanish support forum...no luck so far.

  3. Mark
    Member
    Posted 1 year ago #

    Here's an answer. My goal was to make the Flickr Pick a Picture plugin work with an Oxygen child theme. FPP puts the attribution, including a link to the Flickr photo page, in the image post_excerpt. Alt text can't include links so I was looking for a way to display the post_excerpt with the featured image in an unobtrusive way. I settled for a div that only appears when you hover over the image.

    First, I was able to throw together a function for getting the post_excerpt() field (what I was calling the caption). Here is the function that I added to my functions.php:

    function get_the_feature_caption() {
      global $post;
    
      $thumbnail_id    = get_post_thumbnail_id($post->ID);
      $thumbnail_image = get_posts(array('p' => $thumbnail_id, 'post_type' => 'attachment'));
    
      if ($thumbnail_image && isset($thumbnail_image[0])) {
        $caption = '<span>'.$thumbnail_image[0]->post_excerpt.'</span>';
      }
      return $caption;
    }

    Then in the post.php template of my Oxygen child theme, I include the following code:

    if ( current_theme_supports( 'get-the-image' ) )
    	$image= get_the_image( array( 'meta_key' => 'Thumbnail', 'size' => 'single-thumbnail', 'link_to_post' => false, 'image_class' => 'featured', 'attachment' => false, 'width' => 470, 'height' => 260, 'echo' => false ) );
    $caption = get_the_feature_caption();
    if ( !empty( $image ) ) {
    	echo '<div class="img-feature">' . $image ;
    	echo '<div class="feature-caption">' . $caption . '</div></div>';
    }

    Finally, in style.css of my child theme I use the following CSS to display the attribution in the lower right corner of the image — on hover only.

    .img-feature { position:relative; }
    .img-feature .feature-caption { display:none; }
    .img-feature:hover .feature-caption {
    	display:block;
    	position:absolute;
    	bottom:15px;
    	right:0px;
    	opacity:0.5;
    	background-color:#000;
    	padding:4px 8px;
    	color:#fff;
    	text-align:right;
    }
    .feature-caption a {
    	color:#fff;
    }
    .feature-caption a:hover {
    	color:#fff;
    }

    Hopefully this is helpful for others.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic