Unsplash support for img_url size

Ideas
#1

I’ve got a Ghost blog that uses the built-in Unsplash image selector. The problem is that it is terribly inefficient since it always loads pics at least 1080px wide (even for small thumbnails). I’d like to fix that in one of two ways:

  1. Update the img_url handlebar helper to add dedicated support for Unsplash images (replace/add query string for responsive size (w=1080, h=480, etc.)
  2. Add a custom handlebar helper to correctly size and attribute unsplash images. This is preferred but I don’t know if there is a standard way to add new handlebar helpers (that includes JS, not just template partials).

Please let me know if there have been decisions and/or discussions already made around this. I am more than happy to implement this myself, I just want to make sure it “fits in” correctly.

Thanks in advanced!

- Jim

#2

That’s a great idea, Jim! We already have image_sizes in package.json. It would be great if {{img_url feature_image size="s"}} generated an Unsplash image URL with w=480 parameter for example.

#3

Exactly! It would be easy to use if it’s built into the img_url helper, but I also understand that architecturally it might be better to split it out. I’m happy to start a pull request for it, I just want some guidance from a Ghost dev before starting down a path.

#4

I just came here to make the exact same suggestion, so I’m glad I remembered to search first. :wink:

I love the convenience of the Unsplash integration, but because img_url helper treats all external image URLs equally:

// CASE: if you pass an external image, there is nothing we want to do to it!
    const isInternalImage = detectInternalImage(requestedImageUrl);
    if (!isInternalImage) {
        return requestedImageUrl;
    }

… it results in the responsive image markup requesting 2000px-wide images from Unsplash for all of the supposedly responsive sizes in the srcset, like this example:

            <figure class="post-full-image">
                <img
                    srcset="https://images.unsplash.com/photo-1572381108734-58cb83054ce5?ixlib&#x3D;rb-1.2.1&amp;q&#x3D;80&amp;fm&#x3D;jpg&amp;crop&#x3D;entropy&amp;cs&#x3D;tinysrgb&amp;w&#x3D;2000&amp;fit&#x3D;max&amp;ixid&#x3D;eyJhcHBfaWQiOjExNzczfQ 300w,
                            https://images.unsplash.com/photo-1572381108734-58cb83054ce5?ixlib&#x3D;rb-1.2.1&amp;q&#x3D;80&amp;fm&#x3D;jpg&amp;crop&#x3D;entropy&amp;cs&#x3D;tinysrgb&amp;w&#x3D;2000&amp;fit&#x3D;max&amp;ixid&#x3D;eyJhcHBfaWQiOjExNzczfQ 600w,
                            https://images.unsplash.com/photo-1572381108734-58cb83054ce5?ixlib&#x3D;rb-1.2.1&amp;q&#x3D;80&amp;fm&#x3D;jpg&amp;crop&#x3D;entropy&amp;cs&#x3D;tinysrgb&amp;w&#x3D;2000&amp;fit&#x3D;max&amp;ixid&#x3D;eyJhcHBfaWQiOjExNzczfQ 1000w,
                            https://images.unsplash.com/photo-1572381108734-58cb83054ce5?ixlib&#x3D;rb-1.2.1&amp;q&#x3D;80&amp;fm&#x3D;jpg&amp;crop&#x3D;entropy&amp;cs&#x3D;tinysrgb&amp;w&#x3D;2000&amp;fit&#x3D;max&amp;ixid&#x3D;eyJhcHBfaWQiOjExNzczfQ 2000w"
                    sizes="(max-width: 800px) 400px,
                            (max-width: 1170px) 700px,
                            1400px"
                    src="https://images.unsplash.com/photo-1572381108734-58cb83054ce5?ixlib&#x3D;rb-1.2.1&amp;q&#x3D;80&amp;fm&#x3D;jpg&amp;crop&#x3D;entropy&amp;cs&#x3D;tinysrgb&amp;w&#x3D;2000&amp;fit&#x3D;max&amp;ixid&#x3D;eyJhcHBfaWQiOjExNzczfQ"
                    alt="TLS termination and reverse proxy with Nginx"
                />
            </figure>

I’ve now resorted to searching for images on Unsplash’s site, downloading them and uploading to my blog, as they’re then treated properly for responsive sizing… and if you use more than a couple of Unsplash feature images on the home page, it’s a massive saving in page weight.

Given that the Unsplash URLs support sizing via the w=2000 parameter, I’m hoping it should be feasible to add another case to the {img_url} helper logic, to support multiple sizes for Unsplash URLs in a similar way to how internal images are handled?

#5

Yep, that’s exactly what I’d like to do, but time is extremely limited for me at the moment. I might have time this weekend to create a branch and start implementing/testing it, but I can’t promise anything.

1 Like
#6

That would be great if you manage to find the time @jimbuck!

In the meantime, the manual upload workaround works fine. This is very much a ‘best of both worlds’ enhancement, but the convenience of the slick Unsplash integration (and the image weight saving of responsive images) makes it worth pursuing, I think. :slight_smile:

#7

This has shipped and is now available in Ghost by default :ship:

Load properly sized Unsplash images
#8