robwierzbowski / jekyll-image-tag Goto Github PK

I noticed that Jekyll was taking increasingly longer to compile even though I only have 7 pages.
7 seconds for a live preview is not quite live.

The culprit is the opening and MD5ing of the images even if they are already generated. Every {% image %} is taking upwards of 100ms. Disabling the script brings the total compile time to 2 seconds.

When generating the image's url/src, we have the name and preset, so what about looking up the generated images with those two? Maybe by generating them with this filename: name-preset-generatedSize-digest and look up any files that start with name-preset before doing anything else.

Also, any specific reason to include the digest? Could we skip that too?

Can you think of any other way to remember the images we already generated?

in index.html - {% image vyuka.jpg alt="Vyuka" %}
in config.yml
image:
source: img
output: generated
Any idea what is going on ?
Thanks

I've installed all the requirements for the jekyll image tag plugin but when I build my site I receive an error message and no files are created.

I don't think it's an issue with the plugin. I'm a Ruby-Newbie, and I don't know how to interpret the error. Hopefully you can point me in the right direction.

Error message is posted below:

MacBook-Pro:wesleymiller.com wesleymiller$ jekyll build
Configuration file: /Users/wesleymiller/Dropbox/Sites/wesleymiller.com/_config.yml
/Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `gem_original_require': /Users/wesleymiller/Dropbox/Sites/wesleymiller.com/_plugins/image_tag.rb:39: undefined (?...) sequence: /^(?:(?<preset>[^\s.:\/]+)\s+)?(?<image_src>[^\s]+\.[a-zA-Z0-9]{3,4})\s*(?<html_attr>[\s\S]+)?$/ (SyntaxError)
/Users/wesleymiller/Dropbox/Sites/wesleymiller.com/_plugins/image_tag.rb:58: undefined (?...) sequence: /^(?:(?<width>\d+)|auto)(?:x)(?:(?<height>\d+)|auto)$/
/Users/wesleymiller/Dropbox/Sites/wesleymiller.com/_plugins/image_tag.rb:70: undefined (?...) sequence: /(?<attr>[^\s="]+)(?:="(?<value>[^"]+)")?\s?/
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Library/Ruby/Gems/1.8/gems/jekyll-1.2.1/bin/../lib/jekyll/site.rb:77:in `setup'
    from /Library/Ruby/Gems/1.8/gems/jekyll-1.2.1/bin/../lib/jekyll/site.rb:76:in `each'
    from /Library/Ruby/Gems/1.8/gems/jekyll-1.2.1/bin/../lib/jekyll/site.rb:76:in `setup'
    from /Library/Ruby/Gems/1.8/gems/jekyll-1.2.1/bin/../lib/jekyll/site.rb:75:in `each'
    from /Library/Ruby/Gems/1.8/gems/jekyll-1.2.1/bin/../lib/jekyll/site.rb:75:in `setup'
    from /Library/Ruby/Gems/1.8/gems/jekyll-1.2.1/bin/../lib/jekyll/site.rb:26:in `initialize'
    from /Library/Ruby/Gems/1.8/gems/jekyll-1.2.1/bin/../lib/jekyll/commands/build.rb:5:in `new'
    from /Library/Ruby/Gems/1.8/gems/jekyll-1.2.1/bin/../lib/jekyll/commands/build.rb:5:in `process'
    from /Library/Ruby/Gems/1.8/gems/jekyll-1.2.1/bin/jekyll:73
    from /Library/Ruby/Gems/1.8/gems/commander-4.1.5/lib/commander/command.rb:180:in `call'
    from /Library/Ruby/Gems/1.8/gems/commander-4.1.5/lib/commander/command.rb:180:in `call'
    from /Library/Ruby/Gems/1.8/gems/commander-4.1.5/lib/commander/command.rb:155:in `run'
    from /Library/Ruby/Gems/1.8/gems/commander-4.1.5/lib/commander/runner.rb:402:in `run_active_command'
    from /Library/Ruby/Gems/1.8/gems/commander-4.1.5/lib/commander/runner.rb:66:in `run!'
    from /Library/Ruby/Gems/1.8/gems/commander-4.1.5/lib/commander/delegates.rb:7:in `run!'
    from /Library/Ruby/Gems/1.8/gems/commander-4.1.5/lib/commander/import.rb:10
    from /usr/bin/jekyll:23
MacBook-Pro:wesleymiller.com wesleymiller$ 

Thanks.

Hello Rob, hello everyone!

I have a question/feature request:

By default your plugin always wraps a generated image into an <img>-Tag. But for a gallery (or lightbox plugin) I would like to generate thumbnails and link to a bigger generated version. But for this to work with the jquery-plugin I just need the url of the new generate image. Is this possible?

Here is the code i want to generate.

Frontmatter

---
layout: posting
title: "2013-12-12 // Supertest"
image: 
    - 2013-11-11-foto-1.jpg
    - 2013-11-11-foto-2.jpg
    - 2013-11-11-foto-3.jpg

---

Template

<ul class="clearing-thumbs" data-clearing>
{% for image in page.image %}
    <li><a href="images/{{ image }}">{% image thumb {{ image }} class="th" %}</a></li>
{% endfor %}
</ul>

Instead of <a href="images/{{ image }}"> I would like to use a generated image by your plugin. The jquery-plugin is a plugin by foundation framework called clearing.

There could be two ways to implement this:

Via new tag like {{ image-url }} or an additional parameter like url.

I would suggest the parameter-style because this way you can configure it in the _config.yml as a preset.

What do you think?

Hey there!

First, congratulations on your Jekyll generator. It's helped a lot and works wonderfully. I'm trying to implement Jekyll image tags but installing them is much harder than it seems.

I installed ImageMagick from a binary by CactusLab,
http://cactuslab.com/imagemagick/assets/ImageMagick-6.8.6-3.pkg.zip

To install MiniMagick they clearly state on their site to just add the following to the Gemfile of the project:
gem 'mini_magick'

Apart from this I installed the gems for each of them,
gem install imagemagick, gem install mini_magick

Supposedly this would be enough, but this is the error that grunt is spitting:

Running "jekyll:server" (jekyll) task
bundle exec jekyll build --source app --destination .jekyll --config _config.yml was initiated.

Jekyll output:
Configuration file: _config.yml
Source: app
Destination: .jekyll
Generating... Warning: Command failed: Liquid Exception: undefined method []' for nil:NilClass in default.html error: undefined method[]' for nil:NilClass. Use --trace to view backtrace
Use --force to continue.

Aborted due to warnings.

First of all thanks for this wonderful plugin!
For my sites, I host my assets on another (sub)domain to avoid that the cookies of my site are sent in the request headers for those static assets.
But it seems impossible to use the image-tag for that setup, because it is not possible to give a url-prefix. The src of the image is currently always relative to the root of the website, but I need to prefix that part with "http://assets.mydomain.com/"

Can you please add such an option to _config.yml? If it is there, it will be used, if not, it behaves as implemented in the current version, so it will keep everything backwards compatible.

Thanks in advance.

Hi,
My post contains a YAML list which I am iterating though in a for loop:

products:
 - product: Cake Box 1
   image : cake-boxes/cake-boxes.jpg
   price : 1.99
 - product: Cake Drum 1
   image : cake-drums/cake-drums.jpg
   price : 1.99
 - product: Cake Box 2
   image : cake-boxes/cake-boxes.jpg
   price : 1.99
 - product: Cake Drum 2
   image : cake-drums/cake-drums.jpg
   price : 1.99

I also have an include that parses through this list in a for loop :

{% for p in page.products %}
        {% image {{ page.categories }}/{{ p.image }}  %}
 {% endfor %}

However, the template only ever sees the first instance in the list - and this is for each iteration.

Any idea why?

Here's what I'm seeing now .

I've installed all the requirements for the jekyll image tag plugin but when I build my site I receive an error message and no files are created.

I don't think it's an issue with the plugin. I'm a Ruby-Newbie, and I don't know how to interpret the error. Hopefully you can point me in the right direction.

Error message is posted below:

MacBook-Pro:wesleymiller.com wesleymiller$ jekyll build
Configuration file: /Users/wesleymiller/Dropbox/Sites/wesleymiller.com/_config.yml
/Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `gem_original_require': /Users/wesleymiller/Dropbox/Sites/wesleymiller.com/_plugins/image_tag.rb:39: undefined (?...) sequence: /^(?:(?<preset>[^\s.:\/]+)\s+)?(?<image_src>[^\s]+\.[a-zA-Z0-9]{3,4})\s*(?<html_attr>[\s\S]+)?$/ (SyntaxError)
/Users/wesleymiller/Dropbox/Sites/wesleymiller.com/_plugins/image_tag.rb:58: undefined (?...) sequence: /^(?:(?<width>\d+)|auto)(?:x)(?:(?<height>\d+)|auto)$/
/Users/wesleymiller/Dropbox/Sites/wesleymiller.com/_plugins/image_tag.rb:70: undefined (?...) sequence: /(?<attr>[^\s="]+)(?:="(?<value>[^"]+)")?\s?/
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Library/Ruby/Gems/1.8/gems/jekyll-1.2.1/bin/../lib/jekyll/site.rb:77:in `setup'
    from /Library/Ruby/Gems/1.8/gems/jekyll-1.2.1/bin/../lib/jekyll/site.rb:76:in `each'
    from /Library/Ruby/Gems/1.8/gems/jekyll-1.2.1/bin/../lib/jekyll/site.rb:76:in `setup'
    from /Library/Ruby/Gems/1.8/gems/jekyll-1.2.1/bin/../lib/jekyll/site.rb:75:in `each'
    from /Library/Ruby/Gems/1.8/gems/jekyll-1.2.1/bin/../lib/jekyll/site.rb:75:in `setup'
    from /Library/Ruby/Gems/1.8/gems/jekyll-1.2.1/bin/../lib/jekyll/site.rb:26:in `initialize'
    from /Library/Ruby/Gems/1.8/gems/jekyll-1.2.1/bin/../lib/jekyll/commands/build.rb:5:in `new'
    from /Library/Ruby/Gems/1.8/gems/jekyll-1.2.1/bin/../lib/jekyll/commands/build.rb:5:in `process'
    from /Library/Ruby/Gems/1.8/gems/jekyll-1.2.1/bin/jekyll:73
    from /Library/Ruby/Gems/1.8/gems/commander-4.1.5/lib/commander/command.rb:180:in `call'
    from /Library/Ruby/Gems/1.8/gems/commander-4.1.5/lib/commander/command.rb:180:in `call'
    from /Library/Ruby/Gems/1.8/gems/commander-4.1.5/lib/commander/command.rb:155:in `run'
    from /Library/Ruby/Gems/1.8/gems/commander-4.1.5/lib/commander/runner.rb:402:in `run_active_command'
    from /Library/Ruby/Gems/1.8/gems/commander-4.1.5/lib/commander/runner.rb:66:in `run!'
    from /Library/Ruby/Gems/1.8/gems/commander-4.1.5/lib/commander/delegates.rb:7:in `run!'
    from /Library/Ruby/Gems/1.8/gems/commander-4.1.5/lib/commander/import.rb:10
    from /usr/bin/jekyll:23
MacBook-Pro:wesleymiller.com wesleymiller$ 

Thanks.

Taking a look at the output and code it seems it's currently not possible to specify in your config if you want the output to be cropped or not? It would be good to have an option to keep the aspect ratio and not crop to the desired width/height.

hi there.
i tried getting the jekyll-picture-tag working for me - and it didn't.
either on my own theme - or with a clean generator-jekyllrb html5bp install...

using jekyll-picture-tag the error i get with "jekyll build --trace" looks like this:

Configuration file: /Users/johannes/Documents/CODE/nevvkid/_config.yml
Source: /Users/johannes/Documents/CODE/nevvkid
Destination: /Users/johannes/Documents/CODE/nevvkid/_site
Generating... Liquid Exception: Image Tag can't find the "[400x600]" preset. Check image: presets in _config.yml for a list of presets. in _posts/2014-06-16-post.md
/Users/johannes/Documents/CODE/nevvkid/_plugins/image_tag.rb:88:in render': Image Tag can't find the "[400x600]" preset. Check image: presets in _config.yml for a list of presets. (RuntimeError) from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/liquid-2.5.5/lib/liquid/block.rb:106:inblock in render_all'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/liquid-2.5.5/lib/liquid/block.rb:93:in each' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/liquid-2.5.5/lib/liquid/block.rb:93:inrender_all'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/liquid-2.5.5/lib/liquid/block.rb:82:in render' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/liquid-2.5.5/lib/liquid/template.rb:124:inrender'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/liquid-2.5.5/lib/liquid/template.rb:132:in render!' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/convertible.rb:88:inrender_liquid'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/convertible.rb:150:in do_layout' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/post.rb:259:inrender'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/site.rb:239:in block in render' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/site.rb:238:ineach'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/site.rb:238:in render' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/site.rb:39:inprocess'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/command.rb:18:in process_site' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/commands/build.rb:23:inbuild'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/commands/build.rb:7:in process' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/bin/jekyll:77:inblock (2 levels) in <top (required)>'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/commander-4.1.6/lib/commander/command.rb:180:in call' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/commander-4.1.6/lib/commander/command.rb:180:incall'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/commander-4.1.6/lib/commander/command.rb:155:in run' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/commander-4.1.6/lib/commander/runner.rb:422:inrun_active_command'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/commander-4.1.6/lib/commander/runner.rb:82:in run!' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/commander-4.1.6/lib/commander/delegates.rb:8:inrun!'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/commander-4.1.6/lib/commander/import.rb:10:in `block in <top (required)>'

using the jekyll-picture-tag....

Configuration file: /Users/johannes/Documents/CODE/nevvkid/_config.yml
Source: /Users/johannes/Documents/CODE/nevvkid
Destination: /Users/johannes/Documents/CODE/nevvkid/_site
Generating... Liquid Exception: no implicit conversion of nil into String in _posts/2014-06-16-post.md
/Users/johannes/Documents/CODE/nevvkid/_plugins/picture_tag.rb:233:in join': no implicit conversion of nil into String (TypeError) from /Users/johannes/Documents/CODE/nevvkid/_plugins/picture_tag.rb:233:ingenerate_image'
from /Users/johannes/Documents/CODE/nevvkid/_plugins/picture_tag.rb:145:in block in render' from /Users/johannes/Documents/CODE/nevvkid/_plugins/picture_tag.rb:144:ineach'
from /Users/johannes/Documents/CODE/nevvkid/_plugins/picture_tag.rb:144:in render' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/liquid-2.5.5/lib/liquid/block.rb:106:inblock in render_all'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/liquid-2.5.5/lib/liquid/block.rb:93:in each' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/liquid-2.5.5/lib/liquid/block.rb:93:inrender_all'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/liquid-2.5.5/lib/liquid/block.rb:82:in render' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/liquid-2.5.5/lib/liquid/template.rb:124:inrender'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/liquid-2.5.5/lib/liquid/template.rb:132:in render!' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/convertible.rb:88:inrender_liquid'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/convertible.rb:150:in do_layout' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/post.rb:259:inrender'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/site.rb:239:in block in render' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/site.rb:238:ineach'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/site.rb:238:in render' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/site.rb:39:inprocess'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/command.rb:18:in process_site' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/commands/build.rb:23:inbuild'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/lib/jekyll/commands/build.rb:7:in process' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/jekyll-1.5.1/bin/jekyll:77:inblock (2 levels) in <top (required)>'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/commander-4.1.6/lib/commander/command.rb:180:in call' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/commander-4.1.6/lib/commander/command.rb:180:incall'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/commander-4.1.6/lib/commander/command.rb:155:in run' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/commander-4.1.6/lib/commander/runner.rb:422:inrun_active_command'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/commander-4.1.6/lib/commander/runner.rb:82:in run!' from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/commander-4.1.6/lib/commander/delegates.rb:8:inrun!'
from /Users/johannes/.rvm/gems/ruby-2.0.0-p0/gems/commander-4.1.6/lib/commander/import.rb:10:in `block in <top (required)>'

any thoughts how to fix this?

I have a json array of images which resides in project.images -- trying to loop through and output all the images:

<div class="images">
    {% for image in project.images %}
        {% image 300xAUTO {{ image }} %}
    {% endfor %}
</div>

Results in the following error:

However doing the below works:

<div class="images">

    {% image 300xAUTO {{ project.images | first }} %}

</div>

It seems the loop is having a weird effect?

Here's the output I'm getting. This happens repeatedly each time I'm saving a file.

% jekyll serve -w --trace
Configuration file: site/_config.yml
            Source: site
       Destination: site/_site
      Generating... 
Generating logo-471x200-fd4b94.png
Generating logo-471x200-f9df70.png
Generating ouvrage-couv-200x280-80e806.png
Generating ouvrage-pages-2-200x169-a3e448.png
Generating ouvrage-pages-1-200x233-9c7f18.png
Generating logo-471x200-fae802.png
                    done.
 Auto-regeneration: enabled for 'site'
Configuration file: site/_config.yml
    Server address: http://0.0.0.0:4000/
  Server running... press ctrl-c to stop.
      Regenerating: 1 files at 2014-08-29 13:00:01 Generating logo-471x200-462adb.png
Generating ouvrage-couv-200x280-6c0c7a.png
Generating logo-471x200-69f55e.png
Generating ouvrage-couv-200x280-9f9f5c.png
Generating ouvrage-pages-2-200x169-5950e1.png
Generating ouvrage-pages-1-200x233-14ee2c.png
Generating logo-471x200-d19b85.png
...done.
      Regenerating: 1 files at 2014-08-29 13:00:20 Generating logo-471x200-fcbd70.png
Generating ouvrage-couv-200x280-cbb74f.png
Generating logo-471x200-0c4942.png
Generating ouvrage-couv-200x280-bab060.png
Generating ouvrage-pages-2-200x169-c74890.png
Generating ouvrage-pages-1-200x233-e06c6c.png
Generating logo-471x200-01d028.png
...done.
      Regenerating: 1 files at 2014-08-29 13:01:02 Generating logo-471x200-43376d.png
Generating ouvrage-couv-200x280-0b1bf8.png
Generating ouvrage-pages-2-200x169-8e90cd.png
Generating ouvrage-pages-1-200x233-ed012d.png
Generating logo-471x200-1478a4.png
...done.

I use a custom image path variable in my front-matter for creating a "featured" image in articles. I would like use the image tag with it.

Is it possible to pass that variable into the image tag such as this?

{% image thumb post.image alt=post.title %}

For me, it interprets post.image literally rather than grabbing the value of that variable.

Thanks!

here's my patch:

--- a/_plugins/image_tag.rb
+++ b/_plugins/image_tag.rb
@@ -121,7 +121,7 @@ module Jekyll
       gen_height = if preset[:height]
         preset[:height].to_f
       elsif preset[:width]
-        orig_ratio * preset[:width].to_f
+        preset[:width].to_f / orig_ratio
       else
         orig_height
       end

the same phenomenon on picture_tag

I'm having issues getting the image tag working when I'm using variables. The below addition to my index.html causes a jekyll crash.

The code:

{% image {{post.image}}  %} 

The error:

     Generating...   Liquid Exception: undefined method `[]' for nil:NilClass in index.html

Any clues on how to fix this? Thanks!

Like rbuchberger/jekyll_picture_tag#12. Right now a missing image whitescreens Jekyll, which is no good.