Issue #41: Prepare for thumbnails to work.

2026-08-24 02:34:17 -05:00 · 2020-12-26 13:11:01 -06:00
parent 4246e46890
commit e1900285e1
62 changed files with 135 additions and 36 deletions
@@ -0,0 +1,38 @@
+# GitHub Action for Jekyll
+#
+# Runs jekyll build on master and pushes output to gh-pages branch.
+# (Then GitHub deploys that static content.)
+
+name: Build & Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  github-pages:
+    runs-on: ubuntu-latest
+    container: ruby:2-buster
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/cache@v1
+        with:
+          path: site/vendor/bundle
+          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
+
+      - name: Install Ruby dependencies.
+        run: |
+          gem install bundler
+          bundle install
+        working-directory: site
+
+      - name: Build static site with Jekyll.
+        run: bundle exec jekyll build
+        working-directory: site
+
+      - name: Deploy static site to gh-pages branch.
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./site/_site
@@ -12,12 +12,12 @@ There are many ways to contribute:

 Add a file named after the card into the appropriate `_cards_[type]` directory. Copy the template out of [`card-template.md`](card-template.md) into this new file.

-Add a picture of the card (named the same as the `picture` frontmatter in your card's markdown file) into the images/card-pictures directory, prefixed by `[type]-`.
+Add a picture of the card into the `images/` directory, prefixed by `[type]-`, and make sure to reference the full path to the image in the `picture` frontmatter on the card post.

 For example, for a network card:

  1. Make sure there's a GitHub issue that exists for the card.
  2. Copy the template into a new file inside `_cards_network`.
  3. Fill in the details of the card.
-  4. Put a picture of the card named `network-[name-of-card].jpg` inside `images/card-pictures`.
+  4. Put a picture of the card named `network-[name-of-card].jpg` inside `images/`.
  5. File a PR with your changes.
@@ -5,3 +5,4 @@ source "https://rubygems.org"
 git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

 gem 'github-pages', group: :jekyll_plugins
+gem "smartcropper", "~> 0.7.1"
@@ -222,6 +222,7 @@ GEM
    rb-inotify (0.10.1)
      ffi (~> 1.0)
    rexml (3.2.4)
+    rmagick (4.1.2)
    rouge (3.23.0)
    ruby-enum (0.8.0)
      i18n
@@ -238,6 +239,8 @@ GEM
      faraday (> 0.8, < 2.0)
    simpleidn (0.1.1)
      unf (~> 0.1.4)
+    smartcropper (0.7.1)
+      rmagick (> 2.11.0)
    terminal-table (1.8.0)
      unicode-display_width (~> 1.1, >= 1.1.1)
    thread_safe (0.3.6)
@@ -256,6 +259,7 @@ PLATFORMS

 DEPENDENCIES
  github-pages
+  smartcropper (~> 0.7.1)

 BUNDLED WITH
   2.1.4
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "Exacq Technologies TI XIO3130 1 to 2 Port PCIe Switch"
-picture: "adapter-exacq-ti-xio3130-2-port-pcie-switch.jpg"
+picture: "/images/adapter-exacq-ti-xio3130-2-port-pcie-switch.jpg"
 functionality: "Currently Testing"
 driver_required: "No"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/14"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "HLT PCIe 1x to 16x extension cable"
-picture: "adapter-hlt-1x-16x-extension-cable.jpg"
+picture: "/images/adapter-hlt-1x-16x-extension-cable.jpg"
 functionality: "Full"
 driver_required: "No"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/14"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "I/O Crest SI-PEX60016 1 to 2 Port PCIe Switch"
-picture: "adpater-iocrest-si-pex60016-2-port-pcie-switch.jpg"
+picture: "/images/adpater-iocrest-si-pex60016-2-port-pcie-switch.jpg"
 functionality: "Currently Testing"
 driver_required: "No"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/14"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "Rosewill RCRC-17001 1x to 16x Riser PCE164P-N06 VER 006"
-picture: "adpater-pce164p-no3-ver-006-riser.jpg"
+picture: "/images/adpater-pce164p-no3-ver-006-riser.jpg"
 functionality: "Full"
 driver_required: "No"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/14"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "Generic PCE164P NO3 VER 888 1x to 16x riser"
-picture: "adpater-pce164p-no3-ver-888-riser.jpg"
+picture: "/images/adpater-pce164p-no3-ver-888-riser.jpg"
 functionality: "Currently Testing"
 driver_required: "No"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/14"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "Generic PCE164P NO3 VER 008S 1x to 16x riser"
-picture: "adpater-pce164p-no6-ver-008s-riser.jpg"
+picture: "/images/adpater-pce164p-no6-ver-008s-riser.jpg"
 functionality: "Currently Testing"
 driver_required: "No"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/14"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "EVGA GeForce GTX 750 Ti"
-picture: gpu-evga-geforce-gtx-750ti.jpg
+picture: "/images/gpu-evga-geforce-gtx-750ti.jpg"
 functionality: "Currently Testing"
 driver_required: "Yes"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/26"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "Sapphire Radeon RX 550 2GB PCIe x16"
-picture: gpu-sapphire-radeon-rx550.jpg
+picture: "/images/gpu-sapphire-radeon-rx550.jpg"
 functionality: "Currently Testing"
 driver_required: "Yes"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/6"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "VisionTek Radeon 5450 1GB PCIe x16"
-picture: gpu-visiontek-radeon-5450.jpg
+picture: "/images/gpu-visiontek-radeon-5450.jpg"
 functionality: "None"
 driver_required: "Yes"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/4"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "Zotac GeForce GT 710 1GB PCIe x1"
-picture: gpu-zotac-geforce-gt710.jpg
+picture: "/images/gpu-zotac-geforce-gt710.jpg"
 functionality: "None"
 driver_required: "Yes"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/2"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "MZHOU NVMe M.2 SSD M Key to PCIe 1x Adapter"
-picture: "m2-mzhou-m-key-ssd.jpg"
+picture: "/images/m2-mzhou-m-key-ssd.jpg"
 functionality: "Full"
 driver_required: "No"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/TODO"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "NGFF M.2 M Key SSD to PCIe 1x Adapter"
-picture: "m2-ngff-m-key-ssd.jpg"
+picture: "/images/m2-ngff-m-key-ssd.jpg"
 functionality: "Full"
 driver_required: "No"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/TODO"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "Xiwai NGFF M Key M.2 SSD to PCIe 1x Adapter"
-picture: "m2-xiwai-ngff-m-key-ssd.jpg"
+picture: "/images/m2-xiwai-ngff-m-key-ssd.jpg"
 functionality: "Full"
 driver_required: "No"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/TODO"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "ASUS PCE-AC51 802.11ac WiFi Adapter"
-picture: "network-asus-pce-ac51.jpg"
+picture: "/images/network-asus-pce-ac51.jpg"
 functionality: "Currently Testing"
 driver_required: "Maybe"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/20"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "ASUS XG-C100C 10G Network Adapter"
-picture: "network-asus-xg-c100c.jpg"
+picture: "/images/network-asus-xg-c100c.jpg"
 functionality: "Currently Testing"
 driver_required: "Maybe"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/15"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "EDUP PCIe Intel AX200 WiFi 6 Adapter"
-picture: "network-edup-intel-ax200.jpg"
+picture: "/images/network-edup-intel-ax200.jpg"
 functionality: "Full"
 driver_required: "Yes"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/22"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "Intel I340-T4 PCIe x4 4-port Gigabit Network Adapter"
-picture: "network-intel-i340-t4.jpg"
+picture: "/images/network-intel-i340-t4.jpg"
 functionality: "Full"
 driver_required: "Yes"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/3"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "Mellanox ConnectX-2 MNPA19-XTR SFP+ 10G Ethernet Adapter"
-picture: "network-mellanox-connectx-2-mnpa19-xtr.jpg"
+picture: "/images/network-mellanox-connectx-2-mnpa19-xtr.jpg"
 functionality: "Currently Testing"
 driver_required: "Maybe"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/21"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "Rosewill RC-20001 2.5GBASE-T PCIe x1 Network Adapter"
-picture: "network-rosewill-rc20001.jpg"
+picture: "/images/network-rosewill-rc20001.jpg"
 functionality: "Currently Testing"
 driver_required: "Yes"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/40"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "4-port (2-active) ASM1061 SATA adapter"
-picture: "storage-asm1061-2-port-adapter.jpg"
+picture: "/images/storage-asm1061-2-port-adapter.jpg"
 functionality: "Currently Testing"
 driver_required: "Maybe"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/30"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "IBM ServeRAID BR10i / LSI SAS3082E-R SAS RAID controller"
-picture: "storage-ibm-servraid-br10i-lsi-sas3082e-r-sas-raid.jpg"
+picture: "/images/storage-ibm-servraid-br10i-lsi-sas3082e-r-sas-raid.jpg"
 functionality: "Currently Testing"
 driver_required: "Maybe"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/18"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "IO Crest 4 Port SATA III PCIe x1 with Marvell 9215"
-picture: "storage-iocrest-sata-3-marvell-9215.jpg"
+picture: "/images/storage-iocrest-sata-3-marvell-9215.jpg"
 functionality: "Full"
 driver_required: "Yes"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/1"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "Teratrend 2-port SATA-III Marvell 88SE9130"
-picture: "storage-teratrend-2-port-sata-3-marvell-88se9130.jpg"
+picture: "/images/storage-teratrend-2-port-sata-3-marvell-88se9130.jpg"
 functionality: "Currently Testing"
 driver_required: "Maybe"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/29"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "A ADWITS PCIe 1x 'PCI Experss' USB 3.0 adapter with VL805"
-picture: "usb-a-adwits-vl805.jpg"
+picture: "/images/usb-a-adwits-vl805.jpg"
 functionality: "Limited"
 driver_required: "No"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/45"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "Inateck PCIe x1 USB 3.0 adapter"
-picture: "usb-inateck-pcie-usb3.jpg"
+picture: "/images/usb-inateck-pcie-usb3.jpg"
 functionality: "Limited"
 driver_required: "No"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/45"
@@ -1,7 +1,7 @@
 ---
 layout: card
 title: "Syba SD-PEX20199 PCIe x1 USB 3.1 & 3.0 adapter"
-picture: "usb-syba-sd-pex20199.jpg"
+picture: "/images/usb-syba-sd-pex20199.jpg"
 functionality: "Full"
 driver_required: "No"
 github_issue: "https://github.com/geerlingguy/raspberry-pi-pcie-devices/issues/45"
@@ -3,6 +3,7 @@ theme: jekyll-theme-slate
 title: Raspberry Pi PCIe Devices
 url: https://pipci.jeffgeerling.com/
 fathom_analytics: true
+
 collections:
  cards_adapter:
    output: true
@@ -33,7 +33,7 @@

        <div class="card_picture">
          {% if page.picture %}
-            <a href="/images/card-pictures/{{ page.picture }}"><img src="/images/card-pictures/{{ page.picture }}" alt="{{ page.title }}"></a>
+            <a href="{{ page.picture }}"><img src="{{ page.picture }}" alt="{{ page.title }}"></a>
          {% else %}
            <p><em>There is no picture for this card yet.</em></p>
          {% endif %}
@@ -0,0 +1,11 @@
+# image_thumbnail.rb
+
+module Jekyll
+  module ImageThumbnail
+    def image_thumbnail(input)
+      input.sub("/images/", "/images/thumbnail/")
+    end
+  end
+end
+
+Liquid::Template.register_filter(Jekyll::ImageThumbnail)
@@ -0,0 +1,43 @@
+# post_thumbnail_generator.rb
+require "smartcropper"
+
+module Jekyll
+
+  class PostThumbnailImage < StaticFile
+    def initialize(site, base, dir, name)
+      @site = site
+      @base = base
+      @dir = dir
+      @dest_dir = File.join("images", "thumbnail")
+      @name = name
+    end
+
+    def destination(dest)
+      File.join(dest, @dest_dir, @name)
+    end
+
+    def write(dest)
+      dest_path = destination(dest)
+
+      return false if File.exist?(dest_path) and !modified?
+      @@mtimes[path] = mtime
+
+      FileUtils.mkdir_p(File.dirname(dest_path))
+      SmartCropper.from_file(path).smart_crop_and_scale(200, 200).write(dest_path)
+
+      true
+    end
+  end
+
+  class PostThumbnailGenerator < Generator
+    def generate(site)
+      # TODO: cards_m2, cards_network, cards_storage, etc...
+      site.cards_gpu.each {|post|
+        if post.data.has_key?("picture")
+          site.static_files << PostThumbnailImage.new(site, site.source, "_images", File.basename(post.data["image"]))
+        end
+      }
+    end
+  end
+
+end
@@ -10,7 +10,7 @@ videos: []
 ---
 Copy this template into the appropriate `_cards_[type]` directory, and replace all the values above with the proper information:

-  - `picture`: can have a path to a picture inside images/card-pictures, or `false`
+  - `picture`: can have a path to a picture like `/images/[type]-card.jpg`, or `false`
  - `functionality`: can be one of "Currently Testing", "Full", "Partial", or "None"
  - `driver_required`: can be one of "Yes", "Maybe", or "No"
  - `github_issue`: should link to the GitHub issue corresponding to this card.
@@ -32,7 +32,8 @@ Below is a listing of _all_ the PCIe devices I'm testing on the Pi CM4. I post v
    <tr>
      <td>
        {% if card.picture %}
-          <a href="{{ card.url }}"><img class="card_table_picture" src="/images/card-pictures/{{ card.picture }}" alt="{{ card.title }}"></a>
+          <p>TESTING: <code>{{ card.picture | image_thumbnail }}</code></p>
+          <a href="{{ card.url }}"><img class="card_table_picture" src="{{ card.picture | image_thumbnail }}" alt="{{ card.title }}"></a>
        {% endif %}
      </td>
      <td><a href="{{ card.url }}">{{ card.title }}</a></td>
@@ -61,7 +62,7 @@ Below is a listing of _all_ the PCIe devices I'm testing on the Pi CM4. I post v
    <tr>
      <td>
        {% if card.picture %}
-          <a href="{{ card.url }}"><img class="card_table_picture" src="/images/card-pictures/{{ card.picture }}" alt="{{ card.title }}"></a>
+          <a href="{{ card.url }}"><img class="card_table_picture" src="{{ card.picture }}" alt="{{ card.title }}"></a>
        {% endif %}
      </td>
      <td><a href="{{ card.url }}">{{ card.title }}</a></td>
@@ -90,7 +91,7 @@ Below is a listing of _all_ the PCIe devices I'm testing on the Pi CM4. I post v
    <tr>
      <td>
        {% if card.picture %}
-          <a href="{{ card.url }}"><img class="card_table_picture" src="/images/card-pictures/{{ card.picture }}" alt="{{ card.title }}"></a>
+          <a href="{{ card.url }}"><img class="card_table_picture" src="{{ card.picture }}" alt="{{ card.title }}"></a>
        {% endif %}
      </td>
      <td><a href="{{ card.url }}">{{ card.title }}</a></td>
@@ -119,7 +120,7 @@ Below is a listing of _all_ the PCIe devices I'm testing on the Pi CM4. I post v
    <tr>
      <td>
        {% if card.picture %}
-          <a href="{{ card.url }}"><img class="card_table_picture" src="/images/card-pictures/{{ card.picture }}" alt="{{ card.title }}"></a>
+          <a href="{{ card.url }}"><img class="card_table_picture" src="{{ card.picture }}" alt="{{ card.title }}"></a>
        {% endif %}
      </td>
      <td><a href="{{ card.url }}">{{ card.title }}</a></td>
@@ -148,7 +149,7 @@ Below is a listing of _all_ the PCIe devices I'm testing on the Pi CM4. I post v
    <tr>
      <td>
        {% if card.picture %}
-          <a href="{{ card.url }}"><img class="card_table_picture" src="/images/card-pictures/{{ card.picture }}" alt="{{ card.title }}"></a>
+          <a href="{{ card.url }}"><img class="card_table_picture" src="{{ card.picture }}" alt="{{ card.title }}"></a>
        {% endif %}
      </td>
      <td><a href="{{ card.url }}">{{ card.title }}</a></td>
@@ -177,7 +178,7 @@ Below is a listing of _all_ the PCIe devices I'm testing on the Pi CM4. I post v
    <tr>
      <td>
        {% if card.picture %}
-          <a href="{{ card.url }}"><img class="card_table_picture" src="/images/card-pictures/{{ card.picture }}" alt="{{ card.title }}"></a>
+          <a href="{{ card.url }}"><img class="card_table_picture" src="{{ card.picture }}" alt="{{ card.title }}"></a>
        {% endif %}
      </td>
      <td><a href="{{ card.url }}">{{ card.title }}</a></td>