/jekyll-now/ Image gallery

Home / Without plugin / Image gallery

转自Jekyll Codex

Introduction

This script creates an image gallery. The script reads all images from a specific (user-defined) folder in Jekyll, automagically crops them to 300px squares, using an image resize proxy service and shows them in rows of five.

How it works

The script searches for any file with a path that contains the string given in ‘folder’ and checks whether it is a ‘jpg’ file. If so, it creates an image tag for the image. The source is a 300 pixel wide square cropped version of the image. Then the script wraps the image in a link, containing the full path to the image. This will trigger the lightbox if present.

<style>
  .image-gallery {overflow: auto; margin-left: -1%!important;}
  .image-gallery a {float: left; display: block; margin: 0 0 1% 1%; width: 19%; text-align: center; text-decoration: none!important;}
  .image-gallery a span {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 3px 0;}
  .image-gallery a img {width: 100%; display: block;}
</style>

<div class="image-gallery">
{% for file in site.static_files %}
  {% if file.path contains include.folder %}
    {% if file.extname == '.jpg' or 
      file.extname == '.jpeg' or 
      file.extname == '.JPG' or 
      file.extname == '.JPEG' %}

      {% assign filenameparts = file.path | split: "/" %}
      {% assign filename = filenameparts | last | replace: file.extname,"" %}

      <a href="{{ file.path }}" title="{{ filename }}">
        <img src="//images.weserv.nl/?url=jekyllcodex.org/{{ file.path }}&w=300&h=300&output=jpg&q=50&t=square" alt="{{ filename }}" />
        <span>{{ filename }}</span>
      </a>
    {% endif %}
  {% endif %}
{% endfor %}
</div>

Note that the images are being resized and served by images.weserv.nl.

Installation

Step 1. Download the file image-gallery.html

Step 2. Save the file in the ‘_includes’ directory of your project

Step 3. Add the following line to your layout on the place where you want the image gallery to appear:

{% include image-gallery.html folder="/uploads/album" %}

改动

考虑到显示效果，我将image-gallery.html中

    .image-gallery li {float: left; display: block; margin: 0 0 1% 1%; width: 19%;}

    .image-gallery li a span {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 3px 0;}

改动为：

    .image-gallery li {float: left; display: block; margin: 0 0 1% 1%; width: 30%;}

    .image-gallery li a span {display: none; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 3px 0;}

即隐藏文件名 原来一行五张图现在一行显示三张。

Written on March 22, 2021