Images with fingerprinting

rubyonrails-talk
1

Looking through the asset pipeline documentation, I was able to make everything work as expected. Really nice!! However, not for images that we are loading using

a variable (i.e., wine.picture) which basically resolves to (bold_nine.jpg). First

question, is it possible to use (asset_path) and pass variables?

From the little bit of searching I found that (asset_path) does not support variables,

and we should use (asset_url) instead. My concern is production env and the fingerprinting

of images. Some observation:

$(‘#pic’).attr(‘src’, “<%= asset_url(‘block_nine.jpg’)%>”) ------correctly yields-----> $(‘#pic’).attr(‘src’, “/assets/block_nine-b3cebc2ed66a8605caae943eacdd358d.jpg”)

$(‘#pic’).attr(‘src’, “<%= asset_url('” + wine.pictures + “')%>”) ---------incorrectly yields-------> $(‘#pic’).attr(‘src’, “/” + wine.pictures + “”)

Error in console:

ActionController::RoutingError (No route matches [GET] “/block_nine.jpg”)

That being said,

$(‘#pic’).attr(‘src’, “<%= asset_url('assets/” + wine.picture + “')%>”); $(‘#pic’).attr(‘src’, “<%= asset_path('assets/” + wine.picture + “')%>”);

both work in development and production however, I think at that point I am serving up the images from

assets and not the web server using the fingerprints as intended.

Your help is greatly appreciate,

Nick.

2

Looking through the asset pipeline documentation, I was able to make everything work as expected. Really nice!! However, not for images that we are loading using a variable (i.e., wine.picture) which basically resolves to (bold_nine.jpg). First question, is it possible to use (asset_path) and pass variables?

From the little bit of searching I found that (asset_path) does not support variables, and we should use (asset_url) instead. My concern is production env and the fingerprinting of images. Some observation:

$('#pic').attr('src', "<%= asset_url('block_nine.jpg')%>") ------correctly yields-----> $('#pic').attr('src', "/assets/block_nine-b3cebc2ed66a8605caae943eacdd358d.jpg") $('#pic').attr('src', "<%= asset_url('" + wine.pictures + "')%>") ---------incorrectly yields-------> $('#pic').attr('src', "/" + wine.pictures + "")

can't tell for sure here - but it seems you might have the " and ' reversed in the above?

you have the exterior quotes around the <%=..%> so you just need the string value produced by the asset_url, so try:

$('#pic').attr('src', "<%= asset_url(wine.pictures)%>")

3

Hello Tamouse,

Thank you so much for your reply,

Where trying $(‘#pic’).attr(‘src’, “<%= asset_path(wine.picture)%>”);, I get the following error:

undefined local variable or method `wine’ for #<#Class:0x4231bdb0:0x4311bb04>

I hope I did not forget to mention that. wine.picture is a dynamic variable.

Thanks in Advance,

Nick.

4

It appears that wine is not defined in the scope of that ERB call. How are you passing it to your view?

5

Tamouse,

I really appreciate this, and apologize for the partial code…

wine is the parameter of a render function:

function renderDetails(wine) {

$(‘#wineId’).val(wine.id); $(‘#name’).val(wine.name); $(‘#grapes’).val(wine.grapes); $(‘#country’).val(wine.country); $(‘#region’).val(wine.region); $(‘#year’).val(wine.year); $(‘#pic’).attr(‘src’, wine.picture); $(‘#description’).val(wine.description); }

During runtime, the variable is filled with this JSON:

  1. wine: Object
  2. country: “France”
  3. description: “The aromas of fruit and…”
  4. grapes: “Grenache / Syrah”
  5. id: 1
  6. name: “CHATEAU DE SAINT COSME”
  7. picture: “saint_cosme.jpg”
  8. region: “Southern Rhone / Gigondas”
  9. year: “2009”
  10. PS I am new to Rails, so please forgive the noob :slight_smile: Thanks in Advance,

Nick.

6

So wine is actually a Javascript object? From what I'm seeing above, it is in your Javascript, and you don't have access to it inside an ERB call.

So way back at the beginning, you were having trouble with this:

$('#pic').attr('src', "<%= asset_url('" + wine.pictures + "')%>")

when in fact, there shouldn't have been any ERB stuff there at all:

$('#pic').attr('src', wine.pictures)

like you have in the above renderDetails function. It sounds now like you are setting that via an AJAX call. Where you need to look is in the controller that is responding to that AJAX call in your Rails application, and look how it is determining the value it will send for the picture source url. That is likely where you need to use asset_url (without any ERB stuff) to set that part of the JSON payload that gets returned to the client.

7

Hello Tamouse,

It sounds now like you are setting that via an AJAX call.

This is correct. We are using JQuery to manage the payload.

Where you need to look is in the controller that is responding to that AJAX call in your Rails application,

and look how it is determining the value it will send for the picture source url. That is likely where you

need to use asset_url (without any ERB stuff) to set that part of the JSON payload that gets returned

to the client.

I know this makes total sense, the problem is I am too new to Rails (not the case for C, C++ or Lisp) to

understand :). The value for wine.picture url is coming straight from the database:

8

Hello Tamouse,

>> It sounds now like you are setting that via an AJAX call.

This is correct. We are using JQuery to manage the payload.

>> Where you need to look is in the controller that is responding to that AJAX call in your Rails application, >> and look how it is determining the value it will send for the picture source url. That is likely where you >> need to use asset_url (without any ERB stuff) to set that part of the JSON payload that gets returned >> to the client.

I know this makes total sense, the problem is I am too new to Rails (not the case for C, C++ or Lisp) to understand :). The value for wine.picture url is coming straight from the database:

+----+----------------------------------------------+------+----------------+---------------------------------------+ > id | name | year | country | picture | +----+----------------------------------------------+------+----------------+---------------------------------------+ > 1 | CHATEAU DE SAINT COSME | 2009 | France | saint_cosme.jpg |

If I understand you correctly, I would need to modify the picture field in the database to read asset_url('saint_cosme.jpg') without any of the ERB stuff "<%= %>"?

Do not modify the value in your database.

Or if by controller you mean rails controller in the traditional sense, I have a very simple `pages_controller.rb` that contains the following:

I mean the controller that is being called by your AJAX request. It is entirely possible this in not your Rails app, but I would think it would be. You have to look at your javascript and find the AJAX call, then look at the url in that call to find the route it's seeking, and match that route to the controller. You can find out which routes map to controllers by running `rake routes`.

9

Also you can look in log/development.log to see what, if any, action is being called in the rails app when you perform the action.

Colin

10

Hello Guys,

Sorry for the delayed response, I had to focus my effort elsewhere however, really need to figure (no pun intended) this out now.

When looking into development.log, I see the following error:

I, [2013-09-30T22:16:11.213141 #12076] INFO – : Started GET “/pages/index” for 127.0.0.1 at 2013-09-30 22:16:11 -0400

I, [2013-09-30T22:16:11.221511 #12076] INFO – : Processing by PagesController#index as HTML

I, [2013-09-30T22:16:11.226746 #12076] INFO – : Rendered pages/index.html.erb (0.6ms)

I, [2013-09-30T22:16:11.229833 #12076] INFO – : Completed 200 OK in 5ms (Views: 4.2ms | ActiveRecord: 0.0ms)

I, [2013-09-30T22:16:12.990109 #12076] INFO – : Started GET “/block_nine.jpg” for 127.0.0.1 at 2013-09-30 22:16:12 -0400

F, [2013-09-30T22:16:12.995561 #12076] FATAL – :

ActionController::RoutingError (No route matches [GET] “/block_nine.jpg”):

Which is understandable since the file in the webserver is:

block_nine-dbda8c968180776a036973cf045baba1.jpg

The controller is not taking into consideration the fingerprint added by the precompile process. Please help!

Thanks in Advance,

Nick.