-
AuthorPosts
-
March 5, 2015 at 3:59 pm #221250
Hi there,
I’m putting together a recipe site using a custom post type. I am currently working on the template for a new view (WP-SINGLE-RECIPES.PHP). I would like to add rich snippets to the html to allow nicer search results. As such I’d need to add itemprop=”image” to the IMG element for the featured image.
I am currently using x_featured_image(); (as per below) to display the image but not sure if/how I can add the itemprop to the image element – or would I be better off displaying the image using a different (default wordpress?) method? I am not much of a php coder so not sure of the benefit of using your function over the original.
<?php if ( has_post_thumbnail() ) : ?> <div class="entry-featured"> <?php x_featured_image(); ?> </div> <?php endif; ?>
Any help is appreciated.
Regards
SimonMarch 6, 2015 at 1:33 am #221511Hi Simon,
With your template customization, we would highly suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.
We have the code for the x_featured_image() function below, you can modify this function and insert this code inside you child theme’s functions.php
// // Output featured image in an <a> tag on index pages and a <div> for single // posts and pages. // if ( ! function_exists( 'x_featured_image' ) ) : 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: printf( '<div class="entry-thumb">%s</div>', $thumb ); 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; } } } endif;
Please let us know if this has been helpful to you.
Thank you.
March 11, 2015 at 11:48 am #225202Thanks for your help, already got a child theme on the go.
This function is a step in the right direction for me. However still a bit stuck – I need to add
itemprop=”images” to the
element as per below, however this doesn’t seem to be rendered by this function – inside the rendered DIV it just has “%s”.
<img itemprop="image" src="apple-pie.jpg" />
As I am creating a completely new template for the custom post type (and the list page will most likely be taken care of by the essential grid plugin) would it be easier for me to just use the default WordPress functionality to display the image inside my own DIV with the correct class attached (as I don’t really need the function to check if index page or single post as its a single post template).
Thanks again
March 11, 2015 at 12:39 pm #225236So – to answer my own question, I have used;
<?php if ( has_post_thumbnail() ) : ?> <div class="entry-featured"> <div class="entry-thumb"> <?php the_post_thumbnail('entry',array('itemprop'=>'image')); ?> </div> </div> <?php endif; ?>
This works for me but would it be more effective to work with the x_featured_image as I’m using the X theme… Excuse me if that sounds like a silly question to you but I’m new to wordpress and only have a very basic knowledge of php but want to try to use the best practices wherever possible.
Thanks
March 11, 2015 at 1:23 pm #225261Hi There,
No, you don’t sounds silly for your question. No worries, we will note this thread and report to our team. So we could get a better advice.
Thank you so much.
Cheers.
-
AuthorPosts