WIP: When transferring all in-content images, ensure any image URLs in the content are updated to the new image #1283
Conversation
… using the block editor and image blocks
…ge size from the original content
…ter we've processed all image urls
…back if we can't find a resized image
|
Things I still see as todo's here:
|
| if ( $processor->next_tag( 'img' ) ) { | ||
| $src = wp_get_attachment_image_url( $image_id, $image_size ); | ||
|
|
||
| // If the image size can't be found, try to get the full size. | ||
| if ( ! $src ) { | ||
| $src = wp_get_attachment_image_url( $image_id, 'full' ); | ||
|
|
||
| // If we still don't have an image, skip this block. | ||
| if ( ! $src ) { | ||
| continue; | ||
| } | ||
| } | ||
|
|
||
| $processor->set_attribute( 'src', $src ); | ||
| $processor->add_class( 'wp-image-' . $image_id ); | ||
| $processor->remove_class( 'wp-image-' . $media_item['id'] ); | ||
|
|
||
| $blocks[ $key ]['innerHTML'] = $processor->get_updated_html(); | ||
| $blocks[ $key ]['innerContent'][0] = $processor->get_updated_html(); |
There was a problem hiding this comment.
Would love feedback on if there's a better approach here. I was hoping I could just update the block attributes and then re-render the block to have it rebuild the saved block markup but nothing I tried actually worked, so I ended up with this approach of basically doing a search/replace from the old URL to the new URL
There was a problem hiding this comment.
I tried using render_block and serialize_block to avoid directly assigning to innerHTML, but that broke the image block due to inconsistency between the content returned by save() and edit().
|
@dkotter I was testing out this PR and found an image duplicating issue. When a post is pulled, images are duplicated in the media library when:
|
Hmm.. interesting. This PR doesn't change how images are imported, just updates the actual in-content image URLs. Could you test those same scenarios on the latest release to see if you see the same thing? |
|
@dkotter yep, its the same with 2.0.6 and the develop branch. Should I raise a separate issue? |
Yeah, if there's not already another issue about this, we should open one |
Description of the Change
We currently have two options for processing media when content is distributed:
With the second option turned on, all attached images (if using the Classic Editor) or any block image (if using the Block Editor) will be transferred to the destination site. But we don't actually update any of the in-content URLs, so those will still point to the origin site.
This PR fixes that when the second option is turned on. We keep track of any images we distribute and we then parse through the content of the newly created item to find any old image URLs and update with the new image URLs. This is set up to work both for the Block Editor and Classic Editor.
Note
We try and determine the original image size and use that when getting the new image URL. If an image size from the origin site doesn't exist on the destination site, the full size image will be used instead.
For the Classic Editor
We parse through the entire post content, using the HTML API, to find all images. We pull out the image classes and use those to match the existing image using the image ID class and the image size using the image size class. If no classes exist or the image ID class doesn't exist, we skip that image since we can't be sure it's a match. Note we could change this logic to try matching based on the image URL but the problem here is we have the original full image URL which is likely not the same URL used in the content (as that's typically a resized image URL).
For any images found that match the image ID, we use the HTML API to update the image src with the image that matches the image size class and update the image ID class.
For the Block Editor
We parse the content into blocks and find any image blocks that have the old image ID as a block attribute (similar to above, we could match based on URL but for image blocks, I think we can depend on the image ID always existing and being easier to match on). We update the ID block attribute and then use the HTML API to update the image src with the proper sized image (based on the image size block attribute) and update the image class.
Note that right now we only update image blocks. We could look to add support for other blocks that use images, like the cover block, media and text block, etc.
Closes #1278, #1262,
How to test the Change
Media Handlingsetting atwp-admin/admin.php?page=distributor-settingsis set toProcess the featured image and any attached imagesChangelog Entry
Credits
Props @dkotter, @willemb2, @dcarrionc, @lucymtc
Checklist: