Improve Build Times

[carloteran19]

First of all, thank you for the Plugin Nicolas!

I just finished implementing 'jekyll-cloudinary' on my site - Everything worked properly, the only issue is that my build-times went from 2 min to 11 min (on production).

I actually replaced img tags for quite a few templates, but I thought it would only fetch/upload those images to Cloudinary when visiting the site. For what I can tell, the plugin fetches every single image on build time? Am I doing something wrong? Is there a way to upload only the images that have not been uplaoded before?

I am using Netlify to deploy my site and storing the images on my repo (GitHub).

[nhoizey]

@carloteran19 the answer is "it depends"… 😅

jekyll-cloudinary needs to know the image's dimensions, so it loads it.

If this is a local image (with a relative path in Markdown), it loads the local file, so it should be pretty fast.

Here is the part of the code where it decides how to get the dimensions and build the target URL:
https://github.com/nhoizey/jekyll-cloudinary/blob/master/lib/jekyll/cloudinary.rb#L209-L268

It uses the FastImage Ruby gems, which "finds the size […] of an image given its uri by fetching as little as needed", so it should not impact your build time too much.

Is your code available somewhere, or could you share parts of it?

[carloteran19]

Hello @nhoizey, thank you for your prompt response. That was really helpful!
I think I was able to figure out what I was doing wrong.

1. First, after following the docs I ended up replacing my img tags with the following liquid syntax:
   {% cloudinary {{ page.parallax-img }} alt="{{ page.title }} header-img" %}

For some reason, the plugin was not picking the site.url so it ended up creating HTML tags with http://localhost as the base url. So the images were not loading (or getting uploaded to Cloudinary) when running the site locally.

2. I ended up replacing the Cloudinary syntax with:
   {% cloudinary {{ page.parallax-img | prepend: "https://our-website-url.com" }} alt="{{ page.title }} header-img" %}

wich ended up working, but we started having the long build times. After your comment I realized that by adding prepend: "https://our-website-url.com" was telling FastImage to treat our images as remote images (therefore taking longer to build the site).

3. I ended up adding origin_url: https://our-website to my config file and removing the URL prepend from the liquid tag. Now it builds decently fast (treating those images as local images) and it started uploading those images to Cloudinary after I visited the pages (running the server locally) - quite facinating what Cloudinary does with fetch.

4. Most of my assets come from a collections folder (_uploads) that gets referenced as /uploads/img.jpg
   I am getting a ton of [Cloudinary] Couldn't find this image to check its width: /Users/carloteran/Code/website/uploads/image.jpg. even that it seems to be working after building the site. Is this just normal behavior when testing locally?

Also I got a couple of templates that are throwing the following error:

And this is the code I wrote for that particular layout/pages:

Is there a proper way to use the plugin the way I am intending?

[nhoizey]

Hello @nhoizey, thank you for your prompt response. That was really helpful!
I think I was able to figure out what I was doing wrong.

Great!

1. First, after following the docs I ended up replacing my img tags with the following liquid syntax:
   `{% cloudinary {{ page.parallax-img  }} alt="{{ page.title }} header-img" %}`

It's interesting that you've been able to use {{ page.parallax-img }} as someone else wasn't: #88 🤔

For some reason, the plugin was not picking the site.url

That's strange. Did you get any error message?

so it ended up creating HTML tags with http://localhost as the base url. So the images were not loading (or getting uploaded to Cloudinary) when running the site locally.

1. I ended up replacing the Cloudinary syntax with:
   `{% cloudinary {{ page.parallax-img | prepend: "https://our-website-url.com" }} alt="{{ page.title }} header-img" %}`

wich ended up working, but we started having the long build times. After your comment I realized that by adding prepend: "https://our-website-url.com" was telling FastImage to treat our images as remote images (therefore taking longer to build the site).

It makes sense indeed.

1. I ended up adding `origin_url: https://our-website` to my config file and removing the URL prepend from the liquid tag. Now it builds decently fast (treating those images as local images)

Awesome!

and it started uploading those images to Cloudinary after I visited the pages (running the server locally) - quite facinating what Cloudinary does with fetch.

That's great indeed. Actually, we should talk about "uploading", as Cloudinary downloads them from the server.

2. Most of my assets come from a collections folder (_uploads) that gets referenced as /uploads/img.jpg
   I am getting a ton of `[Cloudinary] Couldn't find this image to check its width: /Users/carloteran/Code/website/uploads/image.jpg.` even that it seems to be working after building the site. Is this just normal behavior when testing locally?

You should try to use the same folder name (uploads instead of _uploads) maybe?

Also I got a couple of templates that are throwing the following error:

And this is the code I wrote for that particular layout/pages:

Could you show also how you defined the tiny preset?

BTW, when using a static image path, you don't need curly brackets around it:

{% cloudinary tiny "/images/FacutyBlank_500x500.png" alt="Contact Person" %}

Also, isn't it "FacultyBlank", with an "l" before "ty", instead of "FacutyBlank"?

Is there a proper way to use the plugin the way I am intending?

The way you use it should be fine, we'll try to fix the issues.