he estado usando Fantasma como mi principal sistema de blogs desde hace algunos años. Aunque no tiene un ecosistema rico como WordPress u otro CMS de código abierto, hace el trabajo.
En Ghost, te acostumbrarás a hacer todo manualmente, creando una función de búsqueda usando jQuery y Vue, probando algunos widgets web integrados para mensajería que creé con Vue y CouchDB.
Una cosa que me estaba molestando desde hace algún tiempo es que no hay una caja de luz de imágenes incorporada, ni para imágenes individuales ni para galerías. Entonces decidí agregar uno.
La caja de luz mejora la experiencia del usuario al permitir un detalle más cercano o segundo en la imagen. A menudo se utiliza para mostrar una versión más grande y clara de una imagen o un vídeo.
Por el contrario, es una ventana modal para mostrar imágenes o medios.
En este tutorial, demostraré cómo agregar un visor de imágenes de caja de luz simple para usuarios de Ghost sin conocimientos técnicos.
¿Qué usaremos?
Usaremos
- jQuery: una biblioteca de manipulación del árbol DOM HTML de JavaScript.
- Lity: una biblioteca ligera de caja de luz que viene con una animación fluida y un diseño responsivo.
Como esta publicación está destinada a usuarios no técnicos, usaremos las versiones CDN de ambas bibliotecas.
Agregar Lity es bastante simple, pero primero debemos asegurarnos de que su tema tenga jQuery. Si está utilizando el tema predeterminado (Casper), entonces ya tiene jQuery instalado.
Ahora, inyectemos nuestro código a través
Panel de administración de Ghost -> Configuración -> Inyección de código
Primero: Lity CSS, que va al encabezado.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/lity.min.css">
Segundo: agregue la biblioteca JavaScript de Lity a la sección Pie de página del sitio
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lity.min.js"></script>
<script>
$(document).ready(function () {
$('.kg-gallery-image, .kg-image-card').each(function () {
var img = $(this).html();
var imgsrc = $(this).find('img').attr('src');
$(this).replaceWith('<div class="kg-gallery-image"><a href="' + imgsrc +
'" data-lity>' + img + '</a></div>')
})
});
</script>
Ahora es el momento de probar si funciona, crear una publicación o una página, agregar una sola imagen o una galería y disfrutar de su nuevo y elegante visor de caja de luz.
Recursos
Etiquetas
Tutorial desarrollo web desarrollo Ghost Programación basada en web html