Blog post: "Using Cloudinary for GitHub Pages website"

Last night I watched a Twitch stream with Jason Lengstorf.

Jason was doing a 90-minute "Learn With Jason". I have been following Jason on Twitter, but I have never watched his streaming.

Jason was joined by Maya Shavin a senior frontend developer from Cloudinary and the episode was entitled "Let's Learn Nuxt!". Nuxt, or Nuxtjs, is a framework built on top of Vue.

I am quite keen on Vue, but not getting much exposire, so getting an introduction to Nuxt I gathered would be quite interesting and I was not really in the mood for coding, but not in the mood for flow TV either.

The stream was absolutely awesome. Nuxt is really cool and it reminded me that I really, really need to do some more Vue.

As I wrote in the introduction, Maya Shavin works as a senior frontend developer with Cloudinary and media serving service. Jason and Maya implemented a basic Nuxt application (they only had 90-minutes) rendering images served by from Jasons account with Cloudinary using different features offered by Cloudinary.

As Jason and Maya pair programmed, Maya gave a introduction and overview of the JavaScript API offered by Cloudinary and THIS really triggered me - this was exactly what I needed.

I have written previously blogged about using JavaScript in GitHub Pages and I am a great fan of GitHub Pages.

• "Experimenting with GitHub Pages and JavaScript and Putting Everything to Use"
• "Experimenting with GitHub Pages and JavaScript and External Data"
• "Experimenting with GitHub Pages and JavaScript"

And I have been working on creating websites for my different GitHub repositories and using GitHub Pages. One of them a simple website for a Perl distribution of mine: Date::Holidays.

I was not satisfied with the handling of the chosen background image, taking into consideration the responsiveness (or lack thereof) I think is required and my lacking skills in this particular area.

When Maya went over the different features of Cloudinary, it struck me, this this could be quite useful in my case.

I decided to start with some alterations to the CSS, but I expected things would go faster if I had a locally running instance of my website.

Luckily this is quite easy with GitHub Pages, which is using static sites based on Jekyll.

I added a Gemfile to my repository installed and got it running. Please see one of my earlier blog posts for more elaborate details.

With the CSS changes in place, I got to the picture. I started by uploading. "Sorry". A free high resolution image by the photographer: Tim Mossholder from Unsplash. The background image and I manually manipulated in different graphics programs to get the expression and integration I wanted.

I opened it in a browser window and stated applying different Cloudinary features on the original image to resemble, what I had previous done by hand.

This process is so easy and you can see the result straight away,

The final URL ended looking like this:

https://res.cloudinary.com/jonasbn/image/upload/h_512,q_auto:low,c_fill,g_center,e_blur:200/tim-mossholder-C8jNJslQM3A-unsplash_zkhz2a.jpg

Now lets walk through the different parts of the Cloudinary features used.

• g_center: the original image is huge, so I started by defining gravity to center, meaning the images would gravitate towards the center of the image when rendered (ref: documentation)

• c_fill: this was used in combination with automatic cropping, as suggested in the documentation (ref: documentation)

• h_512: I set the hight to 512 as was the image I had created based on "Sorry". I am not sure this is the best strategy in regard to responsiveness, but I am still learning. (ref: documentation)

• q_auto:low: I set the quality to low, reducing the size. The original is very high quality, way beyond what I need (ref: documentation). The original image is: 4.880.246 bytes (4,9 MB on disk), with the dimensions: 7200 × 4800. The image served by Cloudinary to a regular browser with the specified parameters applied is: 20.626 bytes (25 KB on disk), with the dimensions 768 × 512.

• e_blur:200: finnally I applied a blur effect, so the image would step more in the background compared to the other elements on the page, (ref: documentation)

The URL was placed in the CSS and replaced the the reference to an image included with the respository.

I iteratively tested rendering of the locally running website in several browser windows at the same time, emulating different devices and finally, just to be sure, on my smart phone and I must say I am quite satisfied.

The final product can been be visited at jonasbn.github.io/perl-date-holidays.

I was very impressed with Cloudinary and was very entertained and inspired by Jason's stream and it will not be the last episodde I watch.

Thanks to Jason Lengstorf and Maya Shavin and the people at Cloudinary.

Comments

[Md Salehin Khan]

Awesome 👍. Thanks

[Jonas Brømsø]

Thanks! suggestions for improvements etc. most welcome.

As I just wrote to

Maya Shavin 🌷☕️🏡

Dev writer, speaker and developer

on Twitter

jonasbn

@jonasbn

@MayaShavin @LWJShow @cloudinary @nuxt_js That is the plan, just need to squeeze the most out of my newly acquired Cloudinary experience first. I have several small websites that might benefit from similar improvements, but @nuxt_js is most certainly on my TODO list

20:23 PM - 09 Nov 2020

0 1

So I need to do some more with Cloudinary and Nuxt.js has duly been noted on the TODO list.