1 Intro
Durante el curso, concretamente cuando aprendimos a crear una web personal con las slides_05, vimos cómo podíamos podíamos facilitar la descarga de documentos: es muy sencillo, solo hemos de insertar un hyperlink que apunte a un recurso de nuestra web.
Por ejemplo, Si escribo lo siguiente: [Mi publicación](/recursos/mi_articulo_01.pdf) en un documento .qmd, se generará el siguiente hyperlink Mi publicación. Si pinchamos en el anterior hyperlink, hará que se visualice en el navegador (o se descargue) el archivo mi_articulo_01 que tenemos en la carpeta ./recursos/ dentro del Qproject de nuestra web. Puedes probar a hacerlo.
La anterior forma de proceder es fácil y funciona perfectamente, pero queda mucho más chulo si insertamos un botones parecidos a estos. Para ello hay que instalar y usar la extensión downloadthis. Vamos a ver si lo conseguimos!!
Otra posibilidad, que no intentaremos, es usar este tipo de botones. Puedes ver el código que los genera aquí, además genera el listado de sus publicaciones automáticamente. Llegué a esta posibilidad a través de este hilo de Twitter.
También podríamos utilizar los botones de descarga que utiliza Ilya Kashnitsky aquí . El código que los genera está aquí.
También podríamos hacerlo así, pero nosotros vamos a probar a hacerlo con downloadthis.
2 Creando botoncitos de descarga con downloadthis
Downloadthis es una extensión para Quarto y sus instrucciones son muy claras:
-
Primero hay que instalar la extensión, así que hay que ejecutar en la Terminal lo siguiente:
Nos preguntará dos veces si estamos seguros. Yo la acabo de instalar
Luego sólo queda usarla.
3 Botoncitos con downloadthis
La verdad es que las instrucciones son muy claras: para incluir un botón de descarga en una web (o documento html) generada con Quarto solo hay que incluir el siguiente shortcode: {{< downloadthis image.png >}}. Ya está, ya funcionaría si hubiese un fichero llamado image.png en la misma carpeta donde se procesa el fichero .qmd en el que estamos escribiendo.
La extensión, el shortcode {{< downloadthis >}} es más flexible, permite hacer más cosas. De hecho tiene 6 argumentos que podemos usar para tunear nuestro “botoncito de descarga”. Puedes ver esas 6 opciones aquí.
Como ejemplo, si incluimos en nuestro qmd lo siguiente:
Nos generará el botoncito de más abajo, que si lo pinchas hará que se descargue la foto de “mi” ababol.
Si no te funciona es por la ruta. La carpeta “recursos” que contiene el archivo “ababol.jpg” debe estar en la misma carpeta en la que esté el archivo qmd que estamos escribiendo.
Una pega es que el fichero “ababol.jpg” se descargará en el archivo “file.jpg” pero si esto no nos conviene, podemos cambiar el nombre de descarga con:
Tuneando los botoncitos
Podemos cambiar el nombre que se verá dentro del botón, su color, poner un icono, … casi mejor es que veas los ejemplos aquí
Por ejemplo, el siguiente código:
{{< downloadthis recursos/ababol.jpg label="Descarga mi ababol" icon=file-earmark-pdf type=success >}}4 Otras posibilidades
Ya sabemos que podemos generar enlaces de descarga con QMD, o botoncitos con la extensión downloadthis. Otras posibilidades son:
- Con html:
<a id="download_image_1" href="https://cdn.glitch.global/ab1f9eaf-3be9-411b-9fa4-81a39033290e/1650333182176.png?v=1650469623980" download>Descarga de una afoto</a>Genera lo siguiente:
- Se pueden generar botoncitos Con html, usando la etiqueta
y podemos incrustar en el botoncito una imagen:
<button type="button" class="btn btn-primary" style="width:55px;">
<img src="recursos/ababol.jpg" style="width:55px;" alt="buttonpng" border="0" />
</button>- Ahora un botoncito con imagen incrustada y que al pinchar te la descargues:
<button type="button" class="btn btn-primary">
[](recursos/ababol.jpg)
</button>- Ahora botoncito con imagen incrustada y que al pinchar lleva a una dirección web (además con sintaxis MD):
<button type="button" class="btn btn-primary" style="width:55px;">
[](https://www.uv.es)
</button>- Pb: el botoncito con la imagen ha salido muy grande, vamos, tenemos un super-botón en lugar de un botoncito. Vamos a ver si se soluciona redimensionando la imagen:
- Como veis, no me acaba de salir!!!! 😥 Pero ya no pruebo más 😞🤕
- Otra posibilidad, para los botoncitos que aparecen en las About’s pages generadas con plantillas de Quarto es usar la estrategia de Pilar Beneito. En su web tiene en su home page, que en realidad es una About page generada con
distillunos botoncitos muy chulos para ir por ejemplo a su departamento, que también es el mio. No podemos ver el código porque su web no está alojada en Github, pero Pilar amablemente me proporciono el código para meter dentro de ellos una imagen. Simplemente hay que poner en el archivoindex.qmd, que genera la Home/About, lo siguiente[^O algo parecido: no lo he probado 😃.]: