Install rmagick on Jekyll

Help
1

Hi, I am looking for a nice Jekyll gallery plugin for an image gallery with a ‘next-previous’ button and a download button, with some thumbnails on the main page, which should be auto-resized, hopefully lazyloaded, … which will allow me to understand the installation instructions.

Browsing through many plugins, most of which I don’t understand how to install properly, I sometimes read that GitHub - rmagick/rmagick: Ruby bindings for ImageMagick is to be preferred over image-magick since rmagick is supposedly smaller or takes less time to load.

Which makes me wonder: how can I understand how to install rmagick? Here GitHub - alexivkin/Jekyll-Art-Gallery-Plugin: Art/Photo Gallery plugin for Jekyll there is no real explanation?

When I read the rmagick link then, it says, e.g. Mac OS X: brew install pkg-config imagemagick Why would this be necessary? So it needs to be installed on my main system, not inside the jekyll installation folder, correct?

So that means if I take my jekyll folder to another computer, it might not work? How would they know they need to have imagemagick installed as a prerequisite on their computer?

2

You need to install the required packages on your system, and the gem itself via Bundler.

The installation instructions are in the first link you posted.

Yes, there’s the instructions but for Ubuntu, but the gem installation using RubyGems (the gem install command) is the same for any OS.

Just a warning, I wouldn’t recommend installing gems using sudo (on GNU/Linux) if you don’t know what you are doing.

Because rmagick is just a binding of a library written in C, which in simple terms means that it will use external libraries installed on your system to do its work.

If you don’t install ImageMagick on those other systems, no, it won’t work.

When installing the rmagick gem, they’ll get compilation errors because they are missing the library.

1 Like
3

You may be interested in this project of mine.

It is a gallery template. You can see the HTML and CSS for displaying the image gallery.

It uses the jekyll-resize plugin. There are links in the docs to the plugin and related plugins.

4

Thanks a lot for your answers!

This made me understand everything better.

I updated Jekyll from 3.4 to 3.9 (as was advised via .../_plugins/jekyll_minimagick.rb:7: syntax error, unexpected '<' (SyntaxError) - #2 by MichaelCurrin) and I think, as a result, I was able to follow the tutorial at Using LightGallery in Jekyll without tedious configs without any problem, now that works great.

Will wonder at a later stage how to connect Lazyload to that.

1 Like
5

I have a problem connecting this to Bootstrap 5.

The original album.html (under _includes) from Using LightGallery in Jekyll without tedious configs is the following:

<div id="{{include.albumname}}">

    {% for image in site.static_files %}
        {% if image.path contains 'images/galleryv2' and image.path contains include.albumname %}
            <a href="{{ image.path }}" data-sub-html="{% exiftag image_description, , {{ image.path }} %}" >
                <img src="/thumbnails{{ image.path }}" />
            </a>
        {% endif %}
    {% endfor %}

</div>
<script>
    $('#{{include.albumname}}').lightGallery({
    thumbnail:true,
});
</script>

This works great, no problem whatsoever.

As soon as I try to include the above inside Bootstrap however, the following happens:

When I try to include the images in Bootstrap 5 cards, then the LightGallery thumbnails still loads. When I click an image thumbnail however, the LightGallery loads, but the large-scale-version of the images are not present, and also the download icon of LightGallery is missing then …

Why could this be the case please? The modified code I am trying is:

<div id="{{include.albumname}}">

<div class="album py-4 bg-light">
  <div class="container">
    <div class="row">

    {% for image in site.static_files %}
        {% if image.path contains 'images/galleryv2' and image.path contains include.albumname %}

      <div class="col">
        <div class="card shadow-sm">
          <a href="{{ image.path }}" data-sub-html="{% exiftag image_description, , {{ image.path }} %}" >
                <img src="/thumbnails{{ image.path }}" class="bd-placeholder-img card-img-top img-fluid"/>
            </a>
          <div class="card-body">
          ABC, some text here.
          </div>
        </div>
      </div>

        {% endif %}
    {% endfor %}

    </div>
  </div>
</div>

</div>

<script>
    $('#{{include.albumname}}').lightGallery({
    thumbnail:true,
});
</script>

P.S.: The Bootstrap card code itself works fine when working without LightGallery and with a normal image static path.

Correction: In fact the link {{ image.path }}* still works. However, as soon as the lightGallery itself opens, the link defaults and breaks to /undefined

6

In fact the problem seems to have got nothing to do with Bootstrap.

The main images inside the lightGallery break equally if you just put the original code inside any random div (here added div class=“doesntmatter”):

<div id="{{include.albumname}}">

    {% for image in site.static_files %}
        {% if image.path contains 'images/galleries' and image.path contains include.albumname %}

<div class="doesntmatter">

            <a href="{{ image.path }}" data-sub-html="{% exiftag image_description, , {{ image.path }} %}" >
                <img src="/thumbnails{{ image.path }}" />
            </a>
        {% endif %}
    {% endfor %}

</div>    

</div>
<script>
    $('#{{include.albumname}}').lightGallery({
    thumbnail:true,
});
</script>

Hopefully there is a fix for this?

@MichaelCurrin I have now also created this question on StackExchange: loops - Jekyll LightGallery how to load images inside a div, useful for Bootstrap - Stack Overflow

7

Found an answer now! Add the selector: ‘a’.

<script>
    $('#{{include.albumname}}').lightGallery({
    thumbnail:true,
    selector: 'a',
});
</script>

Same as here: https://stackoverflow.com/a/33995630/4367046

1 Like
8

@MichaelCurrin Considering the code at Install rmagick on Jekyll - #5 by 888ba8

How could I have the for loop reverse the order alphabetically? Because I believe the order is determined by the for loop in Liquid, not by the LightGallery?

9

@888ba8 you need an intermediate variable which has reverse. Then use it in for loop

{% assign static_files = site.static_files | reverse %}
{% for image in static_files %}
...

If the files are in a random order, then here is how to sort alphabetically.

You can use sort with a key to sort.

{% assign static_files = site.static_files | sort: 'path' | reverse %}
{% for image in static_files %}
  {{ image.path }} ...
{% endfor %}

See:

1 Like
10

@MichaelCurrin That worked brilliantly! Thank you.

If I would like additional more advanced sorting features I will look into using Isotope. Here is a package with a mix of Isotope and LightGallery in Jekyll:

Because I feel Isotope is something that is used a lot in Jekyll? I wonder if I can achieve the same with just my Bootstrap CDN, because when I try to include Isotope, it somehow also messes up my Bootstrap css and layout on the to-be-sorted items. Will look into that later.

11

I haven’t heard of isotope before

The first search result i found includes advice on configuring the plugin to load in the right order so it doesn’t conflict with other layout

Try this or follow the linked docs.

12

@AlfredoRamos I am starting to feel what you mean. I tried to deploy on AWS Amplify and received the following error:

jekyll 3.9.0 | Error: You must have ImageMagick or GraphicsMagick installed

Maybe I should find a way to only upload the site folder to AWS? I can just build everything locally on my pc right?

13

You could install ImageMagic before running bundle install, so the installation of that gem can continue.

I haven’t used AWS Amplify, but I believe you can use yum or dnf to install ImageMagick.

14

I tried including - npm install imagemagick to end up with the following:

preBuild:
  commands:
    - npm install imagemagick
    - bundle install --path vendor/bundle

It resulted in

+ imagemagick@0.1.3
added 1 package from 1 contributor

However, during the build phase, I still received the same error:

jekyll 3.9.0 | Error:  You must have ImageMagick or GraphicsMagick installed

Perhaps because I had imagemagick 7.0.10-56 installed on my local machine (via brew install pkg-config imagemagick), and AWS Amplify seemingly installed an earlier version? I.e.imagemagick@0.1.3?

Made a report/call for help at https://stackoverflow.com/questions/65667153/aws-amplify-how-do-i-install-imagemagick-for-jekyll-via-amplify-yml

15

In Configuring build settings - AWS Amplify Hosting I read:

Installing OS packages

You can install OS packages for missing dependencies.

build:
  phases:
    preBuild:
      commands:
        - yum install -y <package>

So this hints at "yum’ just like you did.

I then looked at this tutorial Install ImageMagick (Image Manipulation) Tool on RHEL/CentOS and Fedora which said you should use the following 2 comands:

First, install following prerequisite php-pear , php-devel and gcc packages to compile the Imagick PHP extension.

# yum install php-pear php-devel gcc

Once you’ve installed php-pear , php-devel, and gcc packages, you may now install ImageMagick software for PHP and Perl support using yum command.

# yum install ImageMagick ImageMagick-devel ImageMagick-perl

However, building takes too long. It seems like it will never finish.

It is now saying:

# Starting phase: preBuild
# Executing command: yum install php-pear php-devel gcc
2021-01-11TXX:XX:XX.XXXZ [INFO]: Loaded plugins: ovl, priorities
2021-01-11TXX:XX:XX.XXXZ [INFO]: Resolving Dependencies

I will try to get in touch with someone of AWS and let you know once a solution has been found.

16

You don’t need the PHP packages, only ImageMagick.

So this should the only line you would need to add before bundle install in your YML file.

yum install -y ImageMagick ImageMagick-devel
17

That worked brilliantly.

Alternatively, we could add it in the package-lock.json and then use

    preBuild:
      commands:
        - npm ci

In that case we could use something as

rpm -Uvh ImageMagick-7.0.10-57.x86_64.rpm
rpm -Uvh ImageMagick-libs-7.0.10-57.x86_64.rpm

in package-lock.json I believe (from ImageMagick – Download)

AWS Support said:

Performance-wise I believe it would be the same, essentially the files to install should be the same, but a different client performs it.

However, in package-lock.json, you would need it to install in a specific format. So npm can recognize the package and desired version.
How to exactly format it depends on how the package-lock.json file was generated, which I think is based on the node version you are using.

Regarding how to create the package-lock.json with the correct dependency, I would suggest to create a new empty project in a separate environment, install in this environment imagemagick using npm, generate the package-lock.json

This might be helpful: node.js - Is there any way to fix package-lock.json lockfileVersion so npm uses a specific format? - Stack Overflow

However, I told them that would get a bit complicated. I am not even sure how the package-lock.json got there in the first place :slight_smile: I believe from Netlify times or so.

So they agreed with you that that single yum command was the easiest. And it worked perfectly.

18

You could install ImageMagic before running bundle install, so the installation of that gem can continue.

I haven’t used AWS Amplify, but I believe you can use yum or dnf to install ImageMagick.