Unsplash Image Updates

[endigo9740]

Unsplash has retired the use of the source path for hotlinking images. I've worked with @AdrianGonz97 and we've managed to pull the list of images via their new API, which is the officially supported path for this.

For example, here's the old format: https://source.unsplash.com/YOErFW8AfkI/200x200

The new format will be: https://images.unsplash.com/photo-1617296538902-887900d9b592?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzExMDB8&ixlib=rb-4.0.3

And resizing is handled via query params appended at the end of the image path: https://images.unsplash.com/photo-1617296538902-887900d9b592?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzExMDB8&ixlib=rb-4.0.3&q=80&fit=max&auto=format&h=200&w=200

Source: https://unsplash.com/documentation#dynamically-resizable-images

Short Term Fix

In the short term, let's implement a new utility service in the Skeleton documentation site that will store these values in a static file that references the Unique ID (see unsplashImages below), as well as implement a utility function that will retrieve the images on demand at at the desired size. The idea being that we document the original ID and the generated API path id, while still making it clear what images are available to use.

We'll be able to reference the original source URL like so: https://unsplash.com/photos/{unsplashID}

Example: https://unsplash.com/photos/YOErFW8AfkI

Something like this:

// unsplash.ts

function getUnsplashImage({id: string, w: number, h: number}): string {
    // (look up image from unsplashImages, return the URL path at the desired size)
}

export const unsplashImages = [
  {
    id: "YOErFW8AfkI",
    api_path: "https://images.unsplash.com/photo-1617296538902-887900d9b592?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzExMDB8&ixlib=rb-4.0.3",
  },
  {
    id: "z_X0PxmBuIQ",
    api_path: "https://images.unsplash.com/photo-1510111652602-195fc654aa83?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY0Nzl8&ixlib=rb-4.0.3",
  },
  {
    id: "8vKVlNIbAc4",
    api_path: "https://images.unsplash.com/photo-1617296537916-291a105cd2f4?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY1MTl8&ixlib=rb-4.0.3",
  },
  {
    id: "vjUokUWbFOs",
    api_path: "https://images.unsplash.com/photo-1620562303747-ba21ca6f1530?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY2MjR8&ixlib=rb-4.0.3",
  },
  {
    id: "s0fXOuyTH1M",
    api_path: "https://images.unsplash.com/photo-1597077962467-be16edcc6a43?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY2MzZ8&ixlib=rb-4.0.3",
  },
  {
    id: "CKZQ6g_FB2Q",
    api_path: "https://images.unsplash.com/photo-1553184570-557b84a3a308?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY2NTF8&ixlib=rb-4.0.3",
  },
  {
    id: "VYuJLsF4XQQ",
    api_path: "https://images.unsplash.com/photo-1509130446053-899ae7358ce6?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY2NjF8&ixlib=rb-4.0.3",
  },
  {
    id: "01D-_OtB8wQ",
    api_path: "https://images.unsplash.com/photo-1620005839871-7ac4aed5ddbc?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY2NzN8&ixlib=rb-4.0.3",
  },
  {
    id: "eP2zYflRoNY",
    api_path: "https://images.unsplash.com/photo-1597531072931-8fceba101e4e?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY2OTB8&ixlib=rb-4.0.3",
  },
  {
    id: "1SEH8qv-Obo",
    api_path: "https://images.unsplash.com/photo-1612145342709-eadb6e22acca?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY3MDh8&ixlib=rb-4.0.3",
  },
  {
    id: "c64AB11j-po",
    api_path: "https://images.unsplash.com/photo-1597077917598-97ca3922a317?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY3MjF8&ixlib=rb-4.0.3",
  },
  {
    id: "tQ4fEcKfB1g",
    api_path: "https://images.unsplash.com/photo-1591775161903-497839a443c1?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY3MzR8&ixlib=rb-4.0.3",
  },
  {
    id: "SMvOSlgThHA",
    api_path: "https://images.unsplash.com/photo-1617296539691-67feaadf389e?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY3NjF8&ixlib=rb-4.0.3",
  },
  {
    id: "azE50UpJDP0",
    api_path: "https://images.unsplash.com/photo-1542835435-4fa357baa00b?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY3NzN8&ixlib=rb-4.0.3",
  },
  {
    id: "UhE2lwGn-DQ",
    api_path: "https://images.unsplash.com/photo-1603855873822-0931a843ee3a?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY3ODJ8&ixlib=rb-4.0.3",
  },
  {
    id: "twVS-YjQn9Y",
    api_path: "https://images.unsplash.com/photo-1508931133503-b1944a4ecdd5?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY3OTV8&ixlib=rb-4.0.3",
  },
  {
    id: "EkW1r_eDjRs",
    api_path: "https://images.unsplash.com/photo-1633053663400-655b31fb88ac?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY4MDV8&ixlib=rb-4.0.3",
  },
  {
    id: "QDc-OQU9hFk",
    api_path: "https://images.unsplash.com/photo-1578170222009-c7893aa20afd?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY4MTZ8&ixlib=rb-4.0.3",
  },
  {
    id: "QK_VtGYQV_U",
    api_path: "https://images.unsplash.com/photo-1610220941077-1ec123e7c043?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY4NjV8&ixlib=rb-4.0.3",
  },
  {
    id: "3vj6GJ_lTa8",
    api_path: "https://images.unsplash.com/photo-1605055618128-b2db3f874a0c?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY4Nzh8&ixlib=rb-4.0.3",
  },
  {
    id: "C5NOq1BKlAk",
    api_path: "https://images.unsplash.com/photo-1502768040783-423da5fd5fa0?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY4ODd8&ixlib=rb-4.0.3",
  },
  {
    id: "wzj86-5JVcM",
    api_path: "https://images.unsplash.com/photo-1423110041833-0d5dfcc552e1?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY4OTl8&ixlib=rb-4.0.3",
  },
  {
    id: "hTv8aaPziOQ",
    api_path: "https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY5MzR8&ixlib=rb-4.0.3",
  },
];

Long Term Fix

In the future we'll look to migrate to a proper CDN where we self host these images and can resize the images on the fly via query params, similar to the old Unsplash method. Services such as Cloudflare offer what look to be reasonably priced options for this:

https://www.cloudflare.com/lp/pg-images/

[endigo9740]

Handled by: https://github.com/skeletonlabs/skeleton/pull/1704