site - En Jekyll ¿Cómo tomo la primera imagen de una publicación?

liquid tutorial

Question

En mi índice de publicaciones de blog me gustaría tomar la primera imagen de la publicación para mostrarla en el índice usando solo líquido para que funcione en las páginas de Github

Tengo un sentimiento dividido es el camino a seguir, pero no soy bueno con el líquido.

Me gustaría poder obtener la url de la imagen y ponerla en una variable para darle estilo.

La solución ideal sería algo como:

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

¿Algunas ideas?

Answer 1

Algunas soluciones a su problema:

1 - La documentación de la etiqueta Post Extractpt está aquí

Tu post

---
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 !

Su plantilla:

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

A medida que su etiqueta de imagen aparece antes de que el extracto_separador (/ n / n = dos líneas nuevas) estará en el extracto posterior.

2 - Use la materia del frente de Yaml de su publicación para almacenar los datos de su imagen

Publicar:

---
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 (centralizado en un incluir para estandarización, pero puede estar en la plantilla):

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

La página de índice:

<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>

Answer 2

Lo tengo para trabajar. No estoy seguro de cómo se escalará, pero este código líquido recorre todas las publicaciones y toma la fuente de la primera imagen de una publicación y muestra esa publicación. Lo probé con varias imágenes y funciona como se esperaba.

<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>

Answer 3

Puede definir una variable personalizada para su materia frontal llamada "imagen", por lo que funcionará como las publicaciones de Wordpress Imagen destacada:

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

Nota para recordar dónde está guardada tu imagen. En mi caso, creé un directorio llamado "imágenes" (PT-BR aquí). Luego, vaya a su index.html y agregue la imagen a su plantilla, donde lo desee. En mi sitio se ve así:

<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>

Eso es.

Answer 4

Si solo necesita la URL de la imagen en lugar de la etiqueta completa en img , puede usar el siguiente método.

Instalar el filtro líquido match_regex :

gem install match_regex

Luego agrégalo a tu configuración de Jekyll:

plugins:
  - match_regex

Crea un fragmento de captura en tu plantilla:

{% 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 %}

Modelo:

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

Simplemente puede eliminar la condición if si no necesita una imagen de marcador de posición.

Answer 5

Tomé la respuesta de David y encontré una manera de obtener solo el atributo src de la etiqueta 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 %}