The default behavior for Tasty Recipes is to assign a recipe thumbnail to each recipe through the recipe editor. The recipe card will use the thumbnail (150px x 150px) image file.
To change this default behavior, use one of the customizations below:
***Before adding code to your site, make sure that you have access to your site's files via FTP (the editor in WordPress is not sufficient in case problems arise) and that you are comfortable with editing your functions.php file. Any minor error in the functions.php file can result in the “white screen of death,” which is easily fixed via FTP but is difficult to fix otherwise (and a nuisance as your site will be unavailable until fixed).***
Change the image size
If you would prefer to use an image size other than the thumbnail, you can use this code snippet. This example changes the default to use the medium sized image. Accepted values are:
- Thumbnail – (150 x 150 pixels)
- Medium (maximum 300 x 300 pixels)
- Large – (maximum 1024 x 1024 pixels)
- Full – (the original size of the uploaded image)
add_filter( 'tasty_recipes_card_image_size', function( $size ) {
return 'medium';
} );
If you are using the Simple, Modern Compact, Elegant, or Default theme, you also need to add a line of CSS to keep the image dimensions the same. If your recipe card image is too large after adding the above code, go to your admin then to Appearance > Customize > Custom CSS and add the following:
.tasty-recipes-image img {width:150px; height:150px; }
Use the featured image as the recipe thumbnail
Use this code to have the featured image set as the recipe thumbnail (if the recipe doesn't have an assigned image).
/**
* Uses the post's featured image in the recipe card,
* if the recipe doesn't have an assigned image.
*
* @param array $vars Existing template variables.
* @return array
*/
add_filter( 'tasty_recipes_recipe_template_vars', function( $vars ) {
// If there's no image HTML already for the recipe card...
if ( empty( $vars['recipe_image'] ) ) {
$post_id = get_the_ID();
if ( $post_id ) {
$vars['recipe_image'] = get_the_post_thumbnail( $post_id, 'thumbnail' );
}
}
return $vars;
});