Bit of a rabbit hole... blurhash anyone?

[MarkRussellDev]

I was only working on my first project in the Front End Development Libraries course. I didn’t mean to fall down a rabbit hole.

I’m making the Random Quote Generator. It’s a simple thing and using libraries for it seems like overkill. But, since the point of this exercise is the libraries I chose Bootstrap and jQuery; jQuery because there was some talk on the forum about how jQuery is still good to know because a lot of older sites still use it.

So, I got the quote generator thing done right away and I wanted to make it pleasant on the eyes so I added random images to the background.

$('body').css('background-image', 'url("https://source.unsplash.com/1600x900?' + tags + '")');

Super easy. Wow. But, it needs some kind of loading indicator so it doesn’t just blank out when the photo is loading.

And, then I looked more into unsplash and saw how it works and while using old random images is fine, it would be nice to learn how to do this right way. So, I signed up with unsplash, got an api key for my project and updated how I get the image and attributes.

let url="https://api.unsplash.com/search/photos?query=" + tags + "&client_id=" + unsplashKey + "&per_page=1"
    console.log(url);

      $.ajax({
        method: 'GET',
        cache: false,
        url: url,
        success:function(obj){
           // console.log(obj);

            // Get image link
            let imgLink = obj.results[0].urls.full;
            let uniqueImgLink = imgLink;
            // Set image on body
            $('body').css('background-image', 'url("' + imgLink + '")');
           
            // Photo Attribution
            let attrName = obj.results[0].user.name;
            let attrLink = obj.results[0].links.html;
            let attrSource = "markrussell.dev"
            $('#photo-attribution').html('Photo by <a href="' + attrLink +'?utm_source=' + attrSource + '&utm_medium=referral">' + attrName + '</a> on <a href="https://unsplash.com/?utm_source=' + attrSource + '&utm_medium=referral">Unsplash</a>')

        }
      })

Pretty cool. Now I can add the image attribute links required by unsplash for each image.

Although, the images don’t seem as targeted, or as random using this search endpoint as opposed to the one at source.unsplash.com. I can’t seem to find a way to add “/random/” to the link anywhere to get it to behave the same as source.unsplash.com.

Anyway, here’s where the rabbit hole gets a little deep.

I was looking into how to add a loading indicator and came across blurhash in the unsplash docs.

BlurHash

From: Unsplash API Documentation | Free HD Photo API | Unsplash

BlurHash Placeholders

All photo objects returned by the Unsplash API include a blur_hash string. This is a very compact represenation of an image placeholder which can be used to display a blurred preview before the real image loads.

Find out more about BlurHash and how to implement it on your application on its official page.

It looks like the blurhash is included with each photo. I can see it in the object returned. But, I can’t find any info on how to decode it and use it.

Can anyone point me in the right direction? I’d like a very simple implementation using vanilla JavaScript or jQuery if possible.

[MarkRussellDev]

I just went with a Bootstrap loading icon overlay. But, if I combined it with your idea it would only ever need to be fired that first time.

I put it on github pages:
https://markrusselldev.github.io/splashquote/

And, the source code is here:

GitHub - markrusselldev/splashquote: Get a random quote from Quotable.io...

It passes the tests and I’m probably done. But, I am still looking into using something like Prerender.io so it can display each background image in the source meta tags for sending to things like a Twitter Card when posting each quote. But, I may need to rebuild it in something like React for that, or use PHP.

And, now you’ve got me thinking about how to make it load the next image after the first page load each time! That would be awesome. But, I think I may need to rewrite everything to be more modular to do that, right?

[MarkRussellDev]

The first page load is the only one. I probably misspoke. It loads the quote with ajax and gets the photo (headers maybe?) with fetch. I couldn’t get the photo url with ajax. It just kept sending back all the image data instead of anything about the image. Somehow fetch gets the url but I have no idea how that works yet.

I was hoping you would suggest a way to do what you suggested and pre-load each image after the first one. Some kind of cue? But, would I need to store each image as that raw data and use those then? I’m having trouble imagining how to do it.

Thanks