humanmade / S3-Uploads

The WordPress Plugin to Store Uploads on Amazon S3
1.94k stars 391 forks source link

Problem with url rewriting #324

Open rsmith4321 opened 5 years ago

rsmith4321 commented 5 years ago

With images inserted with the gutenberg editor, the srcset of the image is rewritten but not the original src. I don't know if this is intended since the browser loads from the srcset anyway but it seems like it could cause a problem if your images on only stored on s3. For example.

<img src="https://www.ryansmithphotography.com/wp-content/uploads/2019/05/myrtle-beach-wedding-photography-example-2019-1500x744.jpg" alt="Myrtle Beach Wedding Photography Example " class="wp-image-52392" srcset="https://content.ryansmithphotography.com/wp-content//uploads/2019/05/myrtle-beach-wedding-photography-example-2019-1500x744.jpg 1500w, https://content.ryansmithphotography.com/wp-content//uploads/2019/05/myrtle-beach-wedding-photography-example-2019-300x149.jpg 300w, https://content.ryansmithphotography.com/wp-content//uploads/2019/05/myrtle-beach-wedding-photography-example-2019-600x298.jpg 600w, https://content.ryansmithphotography.com/wp-content//uploads/2019/05/myrtle-beach-wedding-photography-example-2019-1100x546.jpg 1100w, https://content.ryansmithphotography.com/wp-content//uploads/2019/05/myrtle-beach-wedding-photography-example-2019-450x223.jpg 450w" sizes="(max-width: 1500px) 100vw, 1500px">

p0fi commented 4 years ago

I also noticed that behavior and indeed it leads to problems with displaying images. Images with a srcset are displayed correctly but images without are not. That being said, I could not figure out why some images have a source set and why some don't.

Does anybody know why this might be the case?

foxydot commented 4 years ago

Having same problem with PDFs, but there is no srcset to save me. I could scrub the db and redirect everything pointing to /uploads/ to point to S3, or use mod_rewrite. Mod_rewite is causing me fits right now though.

hubertnguyen commented 4 years ago

@foxydot , for publicly accessed files (outside the editor), it's easiest to add an action to the_content ad rewrite the URLs in PHP on the fly. in functions.php, it would be something like:

add_filter('the_content', 'my_cdn_rewrite',1000); // 1000 is to make sure it is the last filter processed, there are ways to look at the action queue

function my_cdn_rewrite($content) { $content = str_replace( 'https://www.mysite.com/wp-content/uploads/', 'https://s3.mysite.com/wp-content/uploads/', $content ); return $content; }

@rsmith4321 , @p0fi the issue with Gurenberg is that the in-editor code, fetches some URLs from the REST API, and perhaps this plugin doesn't rewrite the S3/CDN URLs through that path. Perhaps @joehoyle can look at that later. The srcset is probably generated elsewhere (?)

However, I had the inverse issue with Jetpack+Gutenberg as CDN urls are added to post_content and saved to the DB! It is still an active bug. One of the difficult issue is that API REST calls aren't aware if the user is in the Editor or not. https://github.com/WordPress/gutenberg/issues/21806#event-3263080620