11ty / 11ty/image

Allow arbitrary "sourceUrl" for cache checking when processing SVG buffers

Open
#54 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

open-question
Dominant language
JavaScript
Stars
467
Forks
65
PR merge metrics
No merged PRs in 30d

Description

A little followup on #40 ...

I've been able to get SVGs turned into PNG files for OG images, which is great.

Here's my new issue: As far as I can tell, Sharp doesn't seem to have any way of loading an external image into an SVG (https://github.com/lovell/sharp/issues/2519 - "sharp does not provide any networking features, you'll have to write your own code to download the data and provide it as a Buffer."

When I try to load an image into my SVG string via an absolute URL (see code below), it just doesn't show up in the output image
`<image id="_Image3" width="202px" height="202px" xlink:href="/Users/stephenjbell/Documents/Projects/steedgood/src/forestry-img/poolportrait.jpg" />`

The easiest solution seems to be turning the image into a datauri (through https://www.npmjs.com/package/datauri), and then dropping the datauri into the SVG string.

const datauri = require("datauri");

let photoDataUri = "";

try {
  photoDataUri = await datauri(authorPhoto);
} catch (error) {
   console.log(error); // Leave photo blank if we can't load the file
}

let svgStr = `<svg><image id="_Image3" width="202px" height="202px" xlink:href="${photoDataUri}" /></svg>`;

// Then run svgStr through eleventy-img

I /think/ when you made changes based on #40 , you used the entire SVG string to check if there was a cached image or not.

This is a great idea, except that each time I want to check if there's a cached version of my PNG file, I need to generate a datauri from the external image, which is /slow/ for performance, especially if I use my socialImage shortcode several times in the same page (i.e. dropping the image url into the page for both Twitter and Facebook meta):

<meta property="og:image" content="{% socialImage title, author.data.title, author.data.feature_image %}">
<meta name="twitter:image" content="{% socialImage title, author.data.title, author.data.feature_image %}" />

So, I think it might make sense to add the ability to use a different string instead of sourceUrl for checking if the cached image is available? It's possible I'm not understanding correctly how things are currently set up.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing how sourceUrl is used for cache checking when SVG buffers are processed, particularly through the socialImage shortcode. Compare the current behavior described in #40 with the requested alternate cache-checking value. Done means repeated calls can reuse the cached PNG without regenerating the external image data URI, while SVG rendering still works.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
tooling
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.