2

I would like to add the right rich text snippets so that the Goole Structured Data validator will pass all the code I have. The only things missing are the sizes of the thumbnails.

This specific examples is for the thumbnails in the loop of the Wordpress homepage.

I have this code:

<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
                        <meta itemprop="url" content="<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ); ?>">
                    <?php if ( has_post_thumbnail() ) {
the_post_thumbnail( 'full', array('class'=>'post_thumbnail_common', 'alt' => get_the_title() , 'title' => get_the_title() ));
echo contentnoimg(41);} else { echo content(41); } ?>
                        </div>

Here I want to add the following:

<meta itemprop="width" content="800">
<meta itemprop="height" content="800">

So that the final code will look something like this:

<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
                        <meta itemprop="url" content="<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ); ?>">
<meta itemprop="width" content="<?php XXX ?>">
<meta itemprop="height" content="<?php XXX ?>">
                    <?php if ( has_post_thumbnail() ) {
the_post_thumbnail( 'full', array('class'=>'post_thumbnail_common', 'alt' => get_the_title() , 'title' => get_the_title() ));
echo contentnoimg(41);} else { echo content(41); } ?>
                        </div>

How should I put instead of so that the image height and width will be well collected?

Here are the content and contentnoimg functions - they format the excerpt shown after the thumbnail and crop it after X characters:

function content( $limit ) {
    global $post;

    if( has_excerpt() ){
        $content = the_excerpt();
    } else {
      $content = explode( ' ', get_the_content(), $limit );
      if ( count($content) >= $limit ) {
        array_pop( $content );
        $content = implode( " ", $content );
        $content = wp_strip_all_tags( $content, true );
// $content .= '...<br><a href="'. get_permalink($post->ID) . '" class="awesomebtn">'.__('Read full post','language') .'</a>';
      } else {
        $content = implode( " ", $content );
      }

      $content = preg_replace( '/\[.+\]/','', $content );
      $content = apply_filters( 'the_content', $content ); 
      $content = str_replace( ']]>', ']]&gt;', $content );
    }

    return $content;
}



function contentnoimg($limit) {
     global $post;
         if( has_excerpt() ){
        $content = the_excerpt();
    } else {     
      $content = explode(' ', get_the_content(), $limit);
      if (count($content)>=$limit) {
        array_pop($content);
        $content = implode(" ",$content);
$content = wp_strip_all_tags($content, true);
// $content .= '...<br><a href="'. get_permalink($post->ID) . '" class="awesomebtn">'.__('Read full post','language') .'</a>';
      } else {
        $content = implode(" ",$content);
      }   
      $content = preg_replace('/(<img.+?>)/','', $content);
      $content = apply_filters('the_content', $content); 
      $content = str_replace(']]>', ']]&gt;', $content);
    }
      return $content;
    }

Thanks

3

The structure would be something like this.

  • Check if you have a thumbnail
  • Get the meta
  • Add the meta data for w/h/file
  • Then render the image

    if ( has_post_thumbnail() ) : // check if the post has a Post Thumbnail assigned to it.
    
    $upload_dir = wp_upload_dir();
    
    $size = 'full';
    
    $post_thumbnail_id = get_post_thumbnail_id( $post_id );
    $post_thumbnail_meta = wp_get_attachment_metadata ( $post_thumbnail_id );
    $main_file = $post_thumbnail_meta [ 'file' ];
    $dirname = dirname ( $main_file );
    $base_url = trailingslashit ( $upload_dir['baseurl'] ) . $dirname . '/';
    
    // fallback to known file if the size doesn't exist
    if ( ! isset($post_thumbnail_meta [ 'sizes' ][ $size ] ) )
    {
        $size = 'full'; // use this size when we're missing data
    }
    
    // full is at the root, alternate sizes exist in the sizes prop
    $imgInfo = $size === 'full' ? $post_thumbnail_meta : $post_thumbnail_meta [ 'sizes' ][ $size ];
    $filename = basename ( $imgInfo[ 'file' ] );
    $width = $imgInfo[ 'width' ];
    $height = $imgInfo[ 'height' ];
    $file = $base_url . $filename;
    
    ?>
    <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
        <meta itemprop="url" content="<?php echo $file; ?>">
        <meta itemprop="width" content="<?php echo $width; ?>">
        <meta itemprop="height" content="<?php echo $height; ?>">
    
        <?php
            the_post_thumbnail( 'full', array('class'=>'post_thumbnail_common', 'alt' => get_the_title() , 'title' => get_the_title() ) );
    
            echo contentnoimg(41);
        ?>
    </div>
    <?php
    
    else:  // end has_post_thumbnail else
    
        // no thumbnail
        echo content(41); 
    
    endif; // end has_post_thumbnail block
    
  • Hi, thank you. It's almost good. For the height a echo seems to be missing. I added it and it works. Btw. $file; is not giving the full URL. How can I give the full URL to the file? You can take a look at the live site here: glamourina.net/en – Pikk Dec 17 '15 at 16:48
  • now the URL is fine, but the sizes are empty <meta itemprop="width" content=""> – Pikk Dec 17 '15 at 16:57
  • I think I have size "full". This is the code as it it now live: pastebin.com/bByt2s6G - and if I use the_post_thumbnail( $size ); it will remove the content excerpt. So I would like to keep the part of code the_post_thumbnail( 'full', array('class'=>'post ... – Pikk Dec 17 '15 at 16:59
  • The code should take the size of the thumbnail. Doesn't matter if it is full, medium, large. In different posts, the thumbnail can be different. In old posts the size was small. I just would like to get the url, width and height. The code you gave, especially the part <?php the_post_thumbnail( $size ); ?> modifies the view in front end, as well as specific image classes, alt, title of the image. Is it possible to not edit the thumbnail itself, but just collect the size of the imagefile without editing the front-end? – Pikk Dec 17 '15 at 17:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.