Responsive remote/external/CDN image

[drzraf]

I implement to work on this soon.

Current use case: I copy/paste Gutenberg page from one site to another. The markup reference the original image but the generated srcset attributes are wrong (because my render_block hooks consider the ID of files which are not present in the destination instance).

My plan is to use get_timber_image_responsive_src (which is my current entrypoint inside the library) to check whether a file is local or remote.

My rough plan from here is:

1. Timmy::get_image() would detect it's an external/remote file URL and if yes, return an instance of \Timmy\RemoteImage (subclass of \Timmy\Image)
2. Timmy\RemoteImage would mostly override srcset() which would check over http for the possibly existing derivative images. If some happen to exist then cache the result of the (in)existence inside a transient.
3. Generate the adequate srcset attribute.

This assume the size attribute passed to get_timber_image_responsive_src at destination WP instance is equal to the one passed at source WordPress instance (or at least that the resulting URL paths match).

Optional (for me): If the URL match known/supported CDN hostname, use its particular API to fetch the variations. (Cloudflare cdn-cgi & co)

Your thoughts?

[drzraf]

(@gchtr ?)

[gchtr]

Hey @drzraf. Sorry for the late reply, been pretty busy lately.

In general, I can say that using a custom class that extends Timmy\Image and overwriting or adding some functionality in there is exactly a use case that I’d want to make possible with v1. I would probably use a similar strategy if I had the same use case.

There’s a timmy/image/class filter (see here) that you could use to use to make Timmy use your custom RemoteImage class. This is supposed to work similarly to Timber’s class maps. There aren’t any additional parameters yet in that filter, because I didn’t figure out what would be useful.

Can you already figure out whether the image has an external or remote URL before you use Timmy::get_image()? If you only have the ID, I guess that’s really hard. Or do you have URLs saved in the markup that you can check?

Steps 2 and 3 sound like they could work. If you overwrite the srcset() function and see that you could move some of the functionality in there into separate methods, then you’re welcome to make a pull request so we can merge it in. It would be cool if the methods are easy to overwrite when there isn’t too much logic in there.

Maybe you can also see that it could work with a new filter added somewhere in Timmy’s code. I’m open for suggestions.

Optional (for me): If the URL match known/supported CDN hostname, use its particular API to fetch the variations. (Cloudflare cdn-cgi & co)

At the moment, I can’t help you with any CDN related requests, because we didn’t use Timmy in a site that uses a CDN, yet. If you have any insights though or want to make a pull request to get something working, you’re welcome to do so.

[drzraf]

Was this implemented?

[gchtr]

Hey @drzraf, no it wasn’t. I don’t have the resources to work on this and I didn’t hear back from you. But I’m still open to suggestions for how to get there and look through pull requests to merge in.