Dayo Greats Dayo Greats - 2 months ago 22
Sass (Sass) Question

Grab paperclip image url and pass it to scss as background image

I have an index page that displays a list of images.

On click on any of the images, i want to grab the image_url and pass it to my css/scss as background-image in my #header div.

Below is what i have done so far:


index.html.haml




%header
%div#has-zoom

%section
- @images.each do |image|
= image_tag image.image.url(:thumb), class: 'touched'



image.coffee




$('.touched').click ->
$('#head-zoom').addClass 'enlarge'



image.css.scss




.enlarge {
background-image: image-url(<%= image_tag image.image.url(:thumb) %>);
height: 100vh;
background-size: cover;
background-position: center;
}


Your assistance will be deeply and dearly appreciated.

Answer

You cannot do that in image.css.scss, as .scss gets precompiled to .css file on the server side before sending it to the browser. And the interactivity you are trying is on the client side.

You could do the following:

$('.touched').click ->
  var image_src = $(this).attr('src')
  $('#head-zoom').addClass('enlarge')
  $('#head-zoom').css('background-image', 'url('+image_src+')')

And update the .enlarge to the following:

.enlarge {
  height: 100vh;
  background-size: cover;
  background-position: center;
}