0

So in my:

application.css.scss file I have the following line:

background-image: cloudinary-url('billie-piper-reading-book', $width: '100%');

In development environment it loads with this asset pipeline:

http://localhost:3000/assets/billie-piper-reading-book

Which results in:

GET http://localhost:3000/assets/billie-piper-reading-book 404 (Not Found)

I would assume, that cloudinary-url should genereate something like http://res.cloudinary.com/demo/image/upload/billie-piper-reading-book...

Any reason?

Any support will be appreciated

Jackie Chan
  • 2,654
  • 6
  • 35
  • 70

2 Answers2

1

In order to generate a Cloudinary URL for a static image, you should first run a rake task and follow up the steps as explained in the following blog: http://cloudinary.com/blog/how_to_deliver_your_static_images_through_a_cdn_in_ruby_on_rails

After the image is synced with your Cloudinary account, the following code example should work:

background-image: cloudinary-url('billie-piper-reading-book.jpg');

This will generate a URL like the following (mind the asset type):

http://res.cloudinary.com/<your_cloud_name>/image/asset/billie-piper-reading-book.jpg

If you want to use an already uploaded image, you can also set the type parameter to upload:

background-image: cloudinary-url('billie-piper-reading-book.jpg', $type: 'upload');

to generate a URL like (mind the upload type):

http://res.cloudinary.com/<your_cloud_name>/image/upload/billie-piper-reading-book.jpg

Also note that $width: '100%' isn't accepted in background-image. You might want to consider using background-size instead.

Itay Taragano
  • 1,901
  • 1
  • 11
  • 12
  • Can I ask, if you wanted to scale the `background-image` for different size screens, is this still resized by Cloudinary? It seems like if we toggled `background-size` then the resizing happens on the client side, and the same full size image is downloaded, which would reduce one of the key benefits of Cloudinary. – james Feb 24 '15 at 23:02
1

If you need HTTPS like me, use :

background-image: cloudinary-url('billie-piper-reading-book.jpg', $secure: true);
pcmanprogrammeur
  • 307
  • 2
  • 9