web-dev-qa-db-ja.com

Jekyllで投稿の最初の画像を取得するにはどうすればよいですか？

ブログ投稿のインデックスで、投稿から最初の画像を取得して、githubページで機能するように、液体だけを使用してインデックスに表示したいと思います。

スプリットが進むべき道だと感じていますが、私は液体が苦手です。

画像のURLを取得し、それを変数に入れてスタイルを設定できるようにしたいと思います。

理想的な解決策は次のようになります。

{% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{post.content | first_image}}</a>
    </li>
  {% endfor %}

何か案は？

jekyllliquid
23
David Silva Smith

動作するようになりました。どのようにスケーリングされるかはわかりませんが、この液体コードはすべての投稿をループし、投稿から最初の画像のソースを取得して、その投稿を表示します。複数の画像でテストしましたが、期待どおりに機能します。

<ul>
  {% for post in site.posts %}
    <li>

      {% assign foundImage = 0 %}
      {% assign images = post.content | split:"<img " %}
      {% for image in images %}
        {% if image contains 'src' %}

            {% if foundImage == 0 %}
                {% assign html = image | split:"/>" | first %}
                <img {{ html }} />
                {% assign foundImage = 1 %}
            {% endif %}
        {% endif %}
      {% endfor %}

      <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
  {% endfor %}
</ul>
15
David Silva Smith

「画像」と呼ばれるカスタム変数をフロントマターに定義できるため、Wordpressの投稿のように機能します。注目の画像：

---
image: featured-image.jpg
---

画像が保存されている場所を覚えておいてください。私の場合、「imagens」（ここではPT-BR）というディレクトリを作成しました。次に、index.htmlに移動し、必要に応じて画像をテンプレートに追加します。私のサイトでは、次のようになります。

<ul class="post-list">
    {% for post in site.posts %}
      <li>
        <h2>
          <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
        </h2>
        <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }},</span>
        <span class="post-meta">por</span>
        <span class="post-meta">{{ post.author }}</span>
      </li>

      //IMAGE
      <img src="{{ site.baseurl }}/imagens/{{ post.image }}">
      //IMAGE


      {{ post.excerpt }}
      <a class="btn btn-default" href="{{ post.url | prepend: site.baseurl }}">Continuar lendo</a>
    {% endfor %}
  </ul>

それでおしまい。

24
Júlio Maia

あなたの問題に対するいくつかの解決策：

1-抜粋後のタグを使用します ドキュメントはこちら

あなたの投稿：

---
layout: post
title: Testing images
---
## Title
Intro Text
![Image alt]({{ site.baseurl }}/assets/img/image.jpg "image title")
More intro text

Some more text blah !

あなたのテンプレート：

<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
      {{ post.excerpt }}
    </li>
  {% endfor %}
</ul>

画像タグはexcerpt_separator（\ n\n = 2つの改行）の前に表示されるため、投稿の抜粋に含まれます。

2-投稿のYamlフロントマターを使用して画像のデータを保存します

役職 ：

---
layout: post
title: Testing images

images:

  - url: /assets/img/cypripedium-calceolum.jpg
    alt: Cypripedium Calceolum
    title: Cypripedium Calceolum

  - url: /assets/img/hello-bumblebee.jpg
    alt: Hello bumblebee !
    title: Hello bumblebee !
---

Intro here yo ! <-- THIS IS THE EXCERPT

Post body begin, and first image not in excerpt
{% assign image = page.images[0] %} <-- first element of the array is zero
{% include image.html image=image %}

Some more text blah !
{% assign image = page.images[1] %}
{% include image.html image=image %}

_ includes/image.html（標準化のためにインクルードに集中化されていますが、テンプレートに含めることができます）：

<img src="{{ site.baseurl }}{{ include.image.url }}" alt="{{ include.image.alt }}" title="{{ include.image.title }}">

インデックスページ：

<ul class="posts">
  {% for post in site.posts %}
    <li>
      <span class="post-date">{{ post.date | date: "%b %-d, %Y" }}</span>
      <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
      {{ post.excerpt }}
      {% assign image = post.images[0] %}
      {% include image.html image=image %}
    </li>
  {% endfor %}
</ul>
16
David Jacquel

私はDavidの答えを受け取り、srcタグからimg属性だけを取得する方法を見つけました。

    {% assign foundImage = 0 %}
    {% assign images = post.content | split:"<img " %}
    {% for image in images %}
      {% if image contains 'src' %}

          {% if foundImage == 0 %}
              {% assign html = image | split:"/>" | first %}
              {% assign tags = html | split:" " %}
              {% for tag in tags %}
                {% if tag contains 'src' %}
                  <img {{ tag }} />
                {% endif %}
              {% endfor %}
              {% assign foundImage = 1 %}
          {% endif %}
      {% endif %}
    {% endfor %}
2
Alex Palcuie

imgタグ全体ではなく、画像のURLだけが必要な場合は、次の方法を使用できます。

液体フィルターを取り付けるmatch_regex：

gem install match_regex

次に、それをJekyll構成に追加します。

plugins:
  - match_regex

テンプレートにキャプチャスニペットを作成します。

{% capture post_first_image %}
  {% assign hero_image = page.content | match_regex: '<img .*?src="([^"]+)"' %}
  {% if hero_image == nil %}
    {% assign hero_image = "/placeholder-image.png" | prepend: site_base %}
  {% endif %}
  {{ hero_image }}
{% endcapture %}

テンプレート：

<meta property="og:image" content="{{ post_first_image | strip }}">

プレースホルダー画像が必要ない場合は、if条件を削除するだけです。

2
sparanoid