fix: #featured-bg-{{id}} not resizing Unsplash images

[paulo-pertierra]

Problem:

Unsplash images are not resizing properly because the CSS property background-image being added to #featured-bg-{{id}} is HTML-encoded.

You can try this yourself by adding an Unsplash image in the Unsplash button beside the Add feature image

Then look at your request in the browser using liebling theme to see the HTML-encoded query, then use the Casper theme to see the proper query.

The HTML-encoded query string added to Unsplash URLs shows up as:

crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDEwfHxhJTIwbWFuJTIwcmlkaW5nJTIwYSUyMGJpa2UlMjBkb3duJTIwYSUyMHN0cmVldCUyMG5leHQlMjB0byUyMHRhbGwlMjBidWlsZGluZ3xlbnwwfHx8fDE3MjczOTU5MDJ8MA&ixlib=rb-4.0.3&q=80&w=600

Solution:

Add a triple bracket handlebar to properly parse the text instead:

crop=entropy&cs=tinysrgb&fit=max&fm=webp&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDEwfHxhJTIwbWFuJTIwcmlkaW5nJTIwYSUyMGJpa2UlMjBkb3duJTIwYSUyMHN0cmVldCUyMG5leHQlMjB0byUyMHRhbGwlMjBidWlsZGluZ3xlbnwwfHx8fDE3MjczOTU5MDJ8MA&ixlib=rb-4.0.3&q=80&w=320

Result:

10.4MB Request size

versus

956KB Request size

This might save homepage first load dozens of MBs of data and shaves much time when the blog uses Unsplash.

[eddiesigner]

Good catch, thank you!

[paulo-pertierra]

Thanks for the beautiful theme btw! 🙌