thoughtbot / proteus-jekyll

[no longer maintained]
84 stars 16 forks source link

serve @2x images in haml? #25

Closed Sananes closed 7 years ago

Sananes commented 8 years ago

Hey guys, do you happen to know how to serve @2x images in haml with the magick:2x?

joshuaogle commented 8 years ago

Hi Aaron, it took me a bit but I figured this out. The only thing you should have to do is add "mini_magick" to your Gemfile and do a bundle install. After that using a regular liquid tag like {% img "test.png" magick:2x %} should do the trick.

I've added a note in the Gemfile so it shouldn't be so confusing for the next person. Thanks for bringing this up and I hope that helps!

Sananes commented 8 years ago

Hi @joshuaogle, thanks for the quick reply! So, I initially added mini_magick and bundle install. That worked great. I'm now having trouble integrating the liquid tag into haml. If I do: == {% img 'quote_author.png' magick:2x %} I get this error:

Error: Liquid syntax error (line 30): Unknown tag 'img'
             Error: Run jekyll build --trace for more information.
      Regenerating: 1 file(s) changed at 2016-03-15 17:53:25   Liquid Exception: Liquid syntax error (line 30): Unknown tag 'image_path' in index.haml
...error:

but If I change img to asset_path it outputs the path only. So, decided to go ahead and try this:

%img(src="{% asset_path 'quote_author.png' magick:2x %}"

I get this error:

Conversion error: Jekyll::HamlConverter encountered an error while converting 'index.haml':
                    Invalid attribute list: "(src=\"/assets/quote_author.png?cb=2edd4ac172082b41a6e3d233af9ef4b2\" %span.author Jason Sifer, Slack".
             Error: Invalid attribute list: "(src=\"/assets/quote_author.png?cb=2edd4ac172082b41a6e3d233af9ef4b2\" %span.author Jason Sifer, Slack".

I know I'm definitely doing some syntax errors here, this is where I'm struggling.

Thanks in advance!

Edit:

So, this supposedly seemed to work:

%img{:src => '{% asset_path "quote_author.png" magick:2x %}'}

However, its not serving the @2x file. Does it have to be have a particular naming convention, e.g. image@2x.png or image-2x.png?

joshuaogle commented 8 years ago

I ran into something similar and used image instead. After running bundle update and making sure that jekyll-assets was on version 2.1.2 though, img worked like it should. Try one of those two options

joshuaogle commented 8 years ago

You also may not need the ==

joshuaogle commented 8 years ago

It looks like jekyll-autoprefixer was keeping jekyll-assets at 1.0.0, which would have caused this problem too. I switched to octopress-autoprefixer to get around this issue and since it looks like jekyll-autoprefixer isn't being maintained. Switching or removing that gem should help.

tysongach commented 7 years ago

This project is no longer being actively maintained.