Support » Plugin: Recipe Cards For Your Food Blog from Zip Recipes » Multiple Image Formats

  • Resolved plexusllc

    (@plexusllc)


    Google recipe cards in search crops the recipe image to 1:1 for desktop / laptop devices and 16:9 for mobile devices.

    After carefully optimizing all our recipe images in 1:1 format, discovering that the images looked pretty poor in some cases in mobile browsers was frustrating.

    I looked at the updated Google Recipe JSON-LD specifications (https://developers.google.com/search/docs/data-types/recipe) and it turns out that they have a new spec for images that would allow you to specify different image files for different image formats.

    The image node of the JSON now looks like this:

    "image": [
      "https://example.com/photos/1x1/photo.jpg",
      "https://example.com/photos/4x3/photo.jpg",
      "https://example.com/photos/16x9/photo.jpg"
      ],

    I would like to be able to specify all three of those formats for our recipe images so that the recipe cards will look attractive in search results for both desktop and mobile devices.

    Is this something that you are open to developing for Zip Recipes?

Viewing 15 replies - 1 through 15 (of 21 total)
  • Plugin Author RogierLankhorst

    (@rogierlankhorst)

    Yes, I certainly am open to that, I will look into this next week.

    A possible solution could be to let Zip Recipes automatically generate 3 images in these ratio’s, based on the uploaded recipe image. That would make it unnecessary to do any manual image uploads: just the main image would suffice to get all three variations generated. I can then easily include them into the JSON LD. What do you think?

    plexusllc

    (@plexusllc)

    Thanks, that’s great.

    I think that Zip Recipes automatically generating 3 images in those ratios is likely to give pretty much the same results that I’m trying to avoid. The problem is exactly that Google is algorithmically resizing an image in one format to another format.

    What I think would be best is the ability for the user to specify three different images. Probably for most images I’ll just crop a single image three different ways. But I can also imagine that some images might only work 1×1 or 16×9 and in those rare cases to get attractive results on Google Recipe Cards you might need to use a totally different image for one format from another.

    I know that generating the LD-JSON is going to be trivial but monkeying around with the recipe editor UI to make a provision to specify multiple images will be a PITA so THANK YOU for your willingness to consider it.

    Plugin Author RogierLankhorst

    (@rogierlankhorst)

    Ok, thanks for the input, I will run some tests and get back to you on this next week.

    Plugin Author RogierLankhorst

    (@rogierlankhorst)

    Hi @plexusllc,

    I have an update ready, which you can test here:
    https://github.com/rlankhorst/zip-recipes-free/tree/separate-snippet-images

    I’ve chosen for an approach where it will work out of the box, but where you as a user can modify the images if needed.

    For each recipe image, the plugin will now automatically generate three high resolution image sizes, in the formats specified by Google:
    https://developers.google.com/search/docs/data-types/recipe

    In the recipe editor, you will now find a new tab, “Rich Snippets”. Here you will see the three generated images.

    For existing images you will need to regenerate your image formats by using a plugin like “Regenerate Thumbnails”, otherwise they will not exist yet. The images will get generated automatically for new images.

    If you choose your own image, it will replace the auto generated image.

    Let me know if this works for you!

    Hey @rogierlankhorst,

    Thanks so much!

    I loaded up the test plugin on our test system and it seems to work great. I think making it so that Zip Recipes generates the three image formats automatically and then allows the user to override them individually is a great design.

    Here are a few questions and comments:

    Q: I’m looking in the _amd_zlrecipe_recipes table and I can’t see where / how you are storing the three alternate image URLs. ??

    Q: Also, looking in that table I note that there are two columns that seem to independently specify the default recipe image: recipe_image is a URL and recipe_image_id is an ID. Wondering why both are needed and whether this is related to comment 1 below.

    1. I have noticed that it is usually difficult / impossible to delete an image from a recipe and/or to replace an existing image. I click the image to choose a new one, or click the “clear image” link and the UI shows me either the newly chosen image or a blank placeholder, but then after clicking the save button, when the page reloads, the recipe shows the original image again. This happens on a test system with no caching enabled, and examining the recipe record in the DB, I can see that the original image ID has not changed even after a save.

    2. It would be helpful in determining whether I need to manually override any of the auto-generated images if I could see a proportionate thumbnail of the auto-generated image. Failing that, I have to copy paste the URL into a new browser window to see what the image looks like which is kind of clunky.

    3. I noticed in trying to manually replace some of the additional images that there is a validation on the image resolution that was disallowing most of the alternate images that I was trying to specify. What is the minimum required resolution, and how did you determine what that should be?

    Plugin Author RogierLankhorst

    (@rogierlankhorst)

    Hi @plexusllc,

    Database
    I realized I hadn’t updated the version of this branch yet: I have now updated it to 6.1.4. Because the database upgrade is tied to the version, your database upgrade probably hasn’t finished yet. As soon as the database upgrade finishes, you should see some new entries, like json_image_1x1. If you change the version in the plugin, or re-download it from git, the upgrade should run.

    Thumbnails:
    The rich snippets tab should show a thumbnail in the correct ratio. That you don’t see it yet is probably because for existing images, you need to run a “regenerated thumbnail” plugin once.

    As soon as you’ve done that, the thumbnails should show up on the “rich snippets” tab.

    Image ID and URL
    In older versions, the recipe image was referenced by URL. As of version 6, I’ve changed this to the thumbnail ID, as this makes it easier to get different image sizes where required. For the new snippet images, I save both thumbnail id as URL, because in this case we want a specific URL. The ID is used to check if the snippet is derived from the recipe image, or if it’s a custom one. This should not affect saving behaviour.

    Saving images:
    That is strange. I can’t really reproduce this. Is this consistent behaviour? What settings do you have enabled in the Zip Recipes settings?

    Image quality
    Good point. I will add information about this in the notice.

    Google says a minimum of 50000 pixels is required, a high resolution is recommended. For the 1×1 image, this is about 250×250. If you use images of at least 250×250, the warning should not show.

    Recommended is a high resolution (In Zip Recipes, this is 1200×1200 for the 1×1), so I have defined two sizes for each ration: a large and a small one. If the media uploader cannot find the large size, the image was probably smaller than 1200×1200, and it will try the small one of 250×250. When it can’t find that one either, you will see the warning.

    Hope this answers your questions!

    If you have more details about when the saving of images doesn’t work, let me know! That should not happen, so I’d like to resolve that.

    Hi @rogierlankhorst,

    I bumped the plugin version to 6.1.4 but still not seeing any new columns in the _amd_zlrecipe_recipes table. I tried deactivating and reactivating the plugin. Either the DB update is not happening, or something else is not happening for me.

    I uploaded a new image to an existing recipe to play with. It does seem to have generated the three new format versions. I see their URLs, but I do not see thumbnails for them. This is what I see:

    For me, on both my test system and my production system, the saving images issue is pretty consistent. I think I remember being able to update the image through the UI at times, but more than 90% of the time the behavior is as I described in my previous message. I have had to resort to manually poking the image ID into the database to change it.

    I tried specifying a 475×475 px image for the 1×1 and I got the too low resolution error and was unable to use the image I chose.

    NOTE: I inspected the UI with dev tools and I can see where the thumbnails are supposed to be showing. The src URLs for those images are 404ing and they look like this: https://test.example.com/wp-content/plugins/zip-recipes//images/s.png

    Plugin Author RogierLankhorst

    (@rogierlankhorst)

    Hi @plexusllc,

    Yes, I just found there was a bug in the preview. It was always showing the spacer placeholder. This is now fixed on github. can you try replacing the class-field.php file? That should resolve the preview.

    Yes, I just found there was a bug in the preview. It was always showing the spacer placeholder. This is now fixed on github. can you try replacing the class-field.php file? That should resolve the preview.

    Yes, that works. I see the preview thumbnails now.

    Plugin Author RogierLankhorst

    (@rogierlankhorst)

    @plexusllc I think I have found the problem for the saving of images. When you clear the image, then refresh the page, it works. But if you clear the image, then save, it doesn’t work. The problem is that the thumbnail ID wasn’t cleared from the page, so if a user clears, then saves, the thumbnail ID is still there, and gets saved again.

    I have pushed a new version to the separate images branche, can you check if this resolves your image clearing issues?

    @rogierlankhorst Yes, the image saving is now working, sort of.

    If I click the image to change it to another one and then save it works great (yay!).

    But if I click the “clear image” link to get rid of it and then click save, after the page reload i am in a new blank recipe which has the same title, but none of the rest of the data from the original recipe.


    Still unable to use a 475×475 px image as the 1×1 version.

    But making excellent progress.

    Plugin Author RogierLankhorst

    (@rogierlankhorst)

    Ah, sorry, I was too quick with the image clearing update. It’s updated again and should work now.

    I also tried uploading an image of 450×450 pixels, this worked without issues. Maybe you can run a debug log by adding to your wp-config.php:

        define('WP_DEBUG', true);
         define('WP_DEBUG_DISPLAY', false);
         define('WP_DEBUG_LOG',     true);

    Then you will find a debug.log file in your wp-content folder. This might tell us if there’s something going wrong with the saving.

    I downloaded the latest zip and I see no difference in behavior at all from the last version. I still see the same thing happening when I click the “clear image” link. First it looks good, then I click save and when the page reloads, I’m in a blank new recipe.

    Unfortunately since this is my test system there is a fair amount going on in the debug log. But here is what is logged directly after pressing the save button after clicking “clear image”. I think that none of this is actually relevant:

    [03-Oct-2019 15:26:41 UTC] PHP Deprecated:  Non-static method Exif::init() should not be called statically in /var/www/test.example.com/htdocs/wp-includes/class-wp-hook.php on line 286
    [03-Oct-2019 15:26:41 UTC] PHP Deprecated:  Function create_function() is deprecated in /var/www/test.example.com/htdocs/wp-content/plugins/simple-taxonomy/simple-taxonomy.php on line 83
    [03-Oct-2019 15:26:42 UTC] PHP Warning:  "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /var/www/test.example.com/htdocs/wp-content/themes/dt-the7/inc/extensions/options-framework/options-interface.php on line 801
    [03-Oct-2019 15:26:42 UTC] PHP Warning:  "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /var/www/test.example.com/htdocs/wp-content/themes/dt-the7/inc/extensions/options-framework/options-interface.php on line 876
    [03-Oct-2019 15:26:42 UTC] PHP Notice:  add_shortcode_param is <strong>deprecated</strong> since version 4.4 (will be removed in 6.0)! Use vc_add_shortcode_param instead. in /var/www/test.example.com/htdocs/wp-includes/functions.php on line 4435
    [03-Oct-2019 15:26:42 UTC] PHP Notice:  add_shortcode_param is <strong>deprecated</strong> since version 4.4 (will be removed in 6.0)! Use vc_add_shortcode_param instead. in /var/www/test.example.com/htdocs/wp-includes/functions.php on line 4435
    [03-Oct-2019 15:26:42 UTC] PHP Notice:  is_archive was called <strong>incorrectly</strong>. Conditional query tags do not work before the query is run. Before then, they always return false. Please see <a href="https://codex.wordpress.org/Debugging_in_WordPress">Debugging in WordPress</a> for more information. (This message was added in version 3.1.0.) in /var/www/test.example.com/htdocs/wp-includes/functions.php on line 4773
    [03-Oct-2019 15:26:42 UTC] PHP Notice:  is_search was called <strong>incorrectly</strong>. Conditional query tags do not work before the query is run. Before then, they always return false. Please see <a href="https://codex.wordpress.org/Debugging_in_WordPress">Debugging in WordPress</a> for more information. (This message was added in version 3.1.0.) in /var/www/test.example.com/htdocs/wp-includes/functions.php on line 4773
    [03-Oct-2019 15:26:42 UTC] PHP Notice:  is_archive was called <strong>incorrectly</strong>. Conditional query tags do not work before the query is run. Before then, they always return false. Please see <a href="https://codex.wordpress.org/Debugging_in_WordPress">Debugging in WordPress</a> for more information. (This message was added in version 3.1.0.) in /var/www/test.example.com/htdocs/wp-includes/functions.php on line 4773
    [03-Oct-2019 15:26:42 UTC] PHP Notice:  is_search was called <strong>incorrectly</strong>. Conditional query tags do not work before the query is run. Before then, they always return false. Please see <a href="https://codex.wordpress.org/Debugging_in_WordPress">Debugging in WordPress</a> for more information. (This message was added in version 3.1.0.) in /var/www/test.example.com/htdocs/wp-includes/functions.php on line 4773
    [03-Oct-2019 15:26:42 UTC] PHP Deprecated:  Function create_function() is deprecated in /var/www/test.example.com/htdocs/wp-content/plugins/simple-taxonomy/simple-taxonomy.php on line 83

    I was also able to upload a new 475×475 pixel image to replace the generated 1×1 image. But I am NOT able to pick an existing 475×475 pixel image from the media library. When I try to do that (choosing the full-size image, which is 475×475 px), I get the low resolution error.

    Plugin Author RogierLankhorst

    (@rogierlankhorst)

    I think it was a version issue again: I bumped the version just now, so your browser should now reload the javascript files.

    As for the image: I think it will work if you run a thumbnail regenerator: if you select an existing image, it will only work if this specific size exists. If the image was uploaded before this new version, it won’t exist. Regenerating all thumbnails once will fix this.

Viewing 15 replies - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.