Code — Post thumbnail (or Featured image) - martindubenet/Wordpress GitHub Wiki
codex.wordpress.org/Post_Thumbnails
The POST IMAGE is the hero image that is used as teaser to get user's attention so they click to read more about this content. This feature is turned off by default.
- Go to wp/theme repository.
- Edit the file « functions.php ».
- Add the following line of code at the end of the file, just before the closing PHP tag «
?>» if you have one (the last closing tag is not required by PHP) :
add_theme_support( 'post-thumbnails' );If a post_thumbnail is defined, print the post_thumbnail (image a la une) as og:image.
Else, print the /screenshot.png from the theme.
<?php
if ( has_post_thumbnail() ) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
if ( ! empty( $large_image_url[0] ) ) {
printf(
'<meta property="og:image" content="%1$s">',
esc_url( $large_image_url[0] )
);
}
} else {
echo '<meta property="og:image" content="'. get_template_directory_uri() .'/screenshot.png">';
}
?>/**
* Add SEO metas and Facebook’s OG snippets in `<head>`
*/
function add_seo_meta_tags() {
global $post;
if ( !empty( is_singular())) {
// Description from Excerpt
$meta_description = '';
$excerptMeta = esc_html( get_the_excerpt() );
if ( !empty( $excerptMeta )) {
$excerptMeta = str_replace( array("\n", "\r", "\t"), ' ', $excerptMeta );
$excerptMeta = substr( $excerptMeta, 0, 135 ); // seo max-lenght=136
$meta_description = $excerptMeta;
} else {
$meta_description = get_bloginfo( 'description' );
}
/**
* Register as Facebook Developper to get app_id.
* Get $facebook_app_id at `https://developers.facebook.com/apps/`
*/
$facebook_app_id = '581399769461891';
$templateFile = get_page_template_slug();
if ( $templateFile === 'singular-product.php' ) {
$contentType = 'product.wine';
} else {
$contentType = 'website.winery';
}
$meta_og_type = $contentType;
// Facebook Open Graph (og) snippets
$meta_og_title = get_the_title();
$meta_og_site_name = get_bloginfo( 'name' );
$meta_og_locale = get_bloginfo( 'language' );
$meta_og_url = ( isset( $_SERVER['HTTPS'] ) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http' ) . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
printf ( '<meta name="description" content="%1$s">'.
'<meta property="fb:app_id" content="%2$s">'.
'<meta property="og:type" content="%3$s">'.
'<meta property="og:title" content="%4$s">'.
'<meta property="og:description" content="%5$s">'.
'<meta property="og:site_name" content="%6$s">'.
'<meta property="og:locale" content="%7$s">'.
'<meta property="og:url" content="%8$s">'.
'<meta name="geo.placename" content="Saint-Anicet"/>'.
'<meta name="geo.position" content="45,1412416,-74,3448606">',
$meta_description,
$facebook_app_id,
$meta_og_type,
$meta_og_title,
$meta_description,
$meta_og_site_name,
$meta_og_locale,
$meta_og_url
);
if ( get_the_post_thumbnail()) {
/**
* Facebook requires 1200x630 pixels
* @link https://developers.facebook.com/docs/sharing/webmasters/images/
*/
$ogimg_src = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
if ( !empty( $ogimg_src[0] )) {
$meta_og_img = $ogimg_src[0];
$meta_og_imgWidth = $ogimg_src[1].'px';
$meta_og_imgHeight = $ogimg_src[2].'px';
} else {
$meta_og_img = get_stylesheet_directory_uri() .'/assets/img/seo/og-image-fallback.png';
$meta_og_imgWidth = '1200px';
$meta_og_imgHeight = '700px';
}
printf (
__('<meta property="og:image" content="%1$s">'.
'<meta property="og:image:width" content="%2$s" />'.
'<meta property="og:image:height" content="%3$s" />'),
esc_url( $meta_og_img ),
$meta_og_imgWidth,
$meta_og_imgHeight
);
}
}
}
add_action( 'wp_head', 'add_seo_meta_tags' , 2 );Ready to integrate example of a traditional header of a news article that may OR may NOT have a post thumbnail image.
Note in the array parameter that i've added the class img-responsive, as Bootstrap requires on the <img> tags.
`the_post_thumbnail()`The the_post_thumbnail() native Wordpress function generates srcset attribute for alternative image sizes loading. This helps the loading performance of the page.
<!-- post_thumbnail -->
<?php if(has_post_thumbnail()) { ?>
<figure class="content-page-thumbnail">
<?php the_post_thumbnail('full', array('class' => 'img-responsive')); ?>
</figure>
<div class="content-page-thumbnail content-page-title">
<h1><?php the_title(); ?></h1>
</div>
<?php } else { ?>
<div class="content-page-title no-thumbnail">
<h1><?php the_title(); ?></h1>
</div>
<?php } ?>