etalmadgemc

Thanks @amboutwe

Based on your suggestions, a possible solution could be to add a meta box to the post admin screen where an OG image URL can be saved (per post). Then, on functions.php, use the wpseo_opengraph filter to change the OG image URL to match the value stored via the meta box.

I’ll give it a try and let you know what I find.

Great news, thanks again David.

Thanks again David, to answer your questions:

#1: I would like to show the caption on the screen for static images within a paragraph tag. The caption text is not appropriate for alt text, which I would like to keep shorter.

#2: I tried again with a new image, but this is still not working for me. The image is not centered. After inspecting the Sirv CSS, I’m unable to find any rules that are centering the image.

I’ll get in touch with sirv.com/contact/ as you suggested

Great news, thanks David.
I’ve started testing the plugin found these two issues:
1. The caption text does not appear on the post.
2. The center alignment option does not center the image. Note: Adding display:flex; justify-content:center to .wp-block-sirv-addmedia-block, then the image is centered as desired.

David, I noticed that the Sirv WordPress plugin was updated 4 days ago. Are any of the updates related to our conversation here?

Sounds great, thanks for the update.

Thanks for the pointers.

Here’s a few comments/questions:

1. For most of our blog articles, there is a mix between images that are the full width of the containing div and those that are not. For the images that are not the full width of the containing div, stretching them to 100% width would cause distortion. I don’t think my situation is unique. Additional settings to set the width and max-width would be helpful.
2. Assuming we are using Guttenberg blocks and we have web developers on hand to assist, how could we perform your suggestion to add a style tag or div wrapper around each image to control its max width? I don’t see a way to do that in Guttenberg. The end goal being that a non-technical blog author could write future posts without having to write any html.
3. I’m unable to get the Align: Center setting working. I used the Chrome dev tools to shrink the image width in order to verify that it is left aligned (and not just too wide). Also, I removed all CSS from the page, except the Sirv CSS and the image remains left aligned.

   I found the two Sirv stylesheets below loaded on the page. But, they do not have any style rules, only comments. Could this be a bug that the style rules are missing?

   /blog/wp-content/plugins/sirv/sirv/gutenberg/addmedia-block/style.css?ver=1556209587
   /* add frontend css code here */

   /blog/wp-content/plugins/sirv/sirv/css/sirv-responsive-frontend.css?ver=5.0.4
   /*Here you can add styles that will be using on the frontend*/

4. I entered a caption for the images, but no visible caption appears on the page (only in the alt and title). I was hoping that the caption would appear in a paragraph tag beneath the image.

I tried option #1 and that worked. Just in case it helps, here is what I did on my local dev environment.

1. Used the Microsoft Azure Storage Explorer to download all blog images.

2. Delete the smaller, alternate versions of the images. These are the images that WordPress created automatically. I don’t need these anymore because Sirv will do the resizing. Using this search term in the Windows Explorer search field (for the wp-content\uploads directory) sort of works to find the resized images that need to be deleted:
filename:*-???x???.*

3. Drag and drop the remaining files into a new directory the Sirv admin “My Files” screen.

4. Used the WP DB Migrate Pro WordPress plugin to pull the production database into my dev environment. Use the find and replace feature to do this find and replace:
Find – https://[azure path start].blob.core.windows.net/[more azure path]/
Replace with – /wp-content/uploads/

Thanks, I changed the path to /wp-content/uploads/… as you suggested.

But, still no luck.
And, now all the images are showing as broken. They were showing correctly after my last find & replace.

The blog I’m working on is on my dev environment, which is not publicly accessible. Could that be the issue?

Ok, I think I’m getting closer.

I did a find and replace and my image paths now look like:
/blog/wp-content/uploads/2019/04/some-image.png

But, I’m still getting the same “100” error from the Sirv plugin “Sync Images” button for all images.

Should my image paths be converted to absolute instead of relative? Such as:
https://www.mywebsite.com/blog/wp-content/uploads/2019/04/some-image.png

Thanks David, I think I’ll try your suggestion number 2.
But, I’m hoping to be able to click the “Sync Images” button to sync all images at once instead of having the Sirv plugin fetch the images as they are requested.

Thanks David, I’ll try your suggestion. To embed the images in the posts, I’m hoping to be able to do that by disabling the Azure WordPress plugin, or performing a database find & replace on the image paths. I’ll let you know how that goes.