Skip to main content

Modificación de slides/diapositivas de inicio

Para modificar las diapositivas del inicio, debemos seguir los siguientes pasos:

  1. Acceder a la carpeta static/json y entrar en el archivo slides.json.
  2. Dentro, encontraremos una lista de objetos que representan las diapositivas de la página de inicio:
[
  {
    title: "Title of the slide",
    src: "img/acg.png",
    alt: "Description of the image",
    link: "/blog",
    title_en: "English title of the slide",
    alt_en: "Description of the image in English",
    link_en: "/en/blog",
  },
  ...
];
  1. Para modificar una diapositiva, debemos cambiar los valores de title, src, alt y link, y si se quiere añadir una versión en inglés, se pueden añadir los campos title_en, alt_en y link_en con los valores correspondientes. Los campos son los siguientes:
    • title: Título del slide. Si no se quiere que aparezca, escriba null (sin comillas) u omita este campo.
    • src: Imagen del slide. Se encuentran en la carpeta src/pages/img/slides y se pueden añadir nuevas imágenes simplemente subiéndolas a la carpeta.
    • alt: Descripción para el slide, el texto que irá debajo del título en el slide. Si no se quiere que aparezca, escriba null (sin comillas) u omita este campo.
    • link: Enlace al que se redirige al hacer clic en el slide. Se pueden utilizar links internos de la forma /about-us. Si no se quiere que aparezca, escriba null (sin comillas) u omita este campo.
    • title_en: Título del slide en inglés. Si no se quiere que aparezca, escriba null (sin comillas) u omita este campo.
    • alt_en: Descripción para el slide en inglés, el texto que irá debajo del título en el slide. Si no se quiere que aparezca, escriba null (sin comillas) u omita este campo.
    • link_en: Enlace al que se redirige al hacer clic en el slide en inglés. Tiene su utilidad para los enlaces internos de la web, ya que todas las páginas en inglés tendrán una ruta de la forma /en/example. Si no se quiere que aparezca, escriba null (sin comillas) u omita este campo.
  2. Para añadir una diapositiva, debemos añadir un nuevo objeto a la lista images con los campos title, src, alt y link, y si se quiere añadir una versión en inglés, se pueden añadir los campos title_en, alt_en y link_en, de forma similar a los objetos ya existentes:
[
    ...
    {
      title: "Nuevo slide",
      src: "img/nueva-imagen.jpg",
      alt: "Descripción de la nueva imagen",
      link: "https://example.es",
      title_en: "New slide",
      alt_en: "Description of the new image",
      link_en: "https://example.com",
    },
]
warning

Las imágenes deben tener un tamaño de 800x420 para que se ajusten correctamente al slide.

tip

Para redimensionar, puede realizar con programas de edición de imágenes como GIMP o Photoshop, o con herramientas online como ILoveIMG. También si la imagen es muy grande, se puede recortar con Croppola.

  1. Así debería quedar la diapositiva añadido: Example Image