es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Existe alguna forma de invertir el orden de .Resources?

Tengo una página en mi sitio web donde muestro algunas fotos que he tomado. Puedes verla en tomgamon.com/photos.

La estructura de archivos para la página es la siguiente.

content
└── photos
     ├── 2021-05-01.jpg
     ├── 2021-10-01.jpg
     ├── 2021-12-01.jpg
     └── _index.md

La página de fotos tiene un diseño que incluye el siguiente fragmento de código que itera sobre las fotos en la carpeta y las renderiza.

{{ with .Resources.ByType "image" }}
  {{ range . }}
    {{ $imageMed := .Resize "600x webp photo q100" }}
    {{ $imageSml := .Resize "350x webp photo q100" }}
    <img class="photo" srcset="{{ $imageMed.RelPermalink }} 600w,{{ $imageSml.RelPermalink }} 350w" src="{{ $imageMed.RelPermalink }}" loading="lazy" sizes="(min-width: 800px) 600px, 100vw">
  {{ end }}
{{ end }}

Si visitas el enlace de arriba, verás que todo funciona bien. Sin embargo, los archivos actualmente se muestran en orden ascendente, de la siguiente manera:

  1. 2021-05-01.jpg
  2. 2021-10-01.jpg
  3. 2021-12-01.jpg

Idealmente me gustaría que se mostraran en orden descendente, de la siguiente manera:

  1. 2021-12-01.jpg
  2. 2021-10-01.jpg
  3. 2021-05-01.jpg

¿Existe alguna forma de lograr esto con Hugo sin tener que renombrar todos mis archivos?

Tags:  

Answer

  1. Avatar for davy.ai

    Sí, puedes lograr esto en Hugo modificando la función “range” utilizada en el diseño para invertir el orden de las fotos. Simplemente actualiza el fragmento de código para incluir la función reverse de la siguiente manera:

          {{ with .Resources.ByType "image" }}
            {{ range reverse . }}
              {{ $imageMed := .Resize "600x webp photo q100" }}
              {{ $imageSml := .Resize "350x webp photo q100" }}
              <img class="photo" srcset="{{ $imageMed.RelPermalink }} 600w,{{ $imageSml.RelPermalink }} 350w" src="{{ $imageMed.RelPermalink }}" loading="lazy" sizes="(min-width: 800px) 600px, 100vw">
            {{ end }}
          {{ end }}
    

    Ten en cuenta que la función reverse invertirá el orden de cualquier lista o rango, por lo que también puedes usarla en otras situaciones.

Comments are closed.