Tema editorial

El tema Editorial es para Grav CMS. Editorial es una adaptación de GravCMS del tema Editorial de HTML5Up.net. El tema de HTML5Up.net es gratuito para uso personal y comercial bajo la licencia CCA 3.0.

Tabla de contenido

  1. Instalación
    1. Instalación de GPM (preferida)
    2. Instalación manual
    3. Qué hacer después de la instalación
  2. Opciones predeterminadas
  3. Logotipos personalizados
  4. Opciones de la Galería
  5. Características del tema
  6. Páginas destacadas
  7. Páginas de blogs
  8. Plantilla de descargas
  9. Códigos abreviados (Shortcodes)
    1. Código Abreviado de Tabla
    2. Código Abreviado de Cajas
    3. Código abrevidado para Botones
    4. Código abreviado para Filas Flexibles
    5. Código abreviado para Imágenes Flotantes
  10. Página de demostración
  11. Créditos

Instalación

Instalación de GPM (preferida)

La forma más sencilla de instalar este tema es a través del Grav Package Manager (GPM) a través de la terminal de su sistema (también llamado comando línea). Desde la raíz de su tipo de instalación Grav:

bin/gpm install editorial

Esto instalará el tema editorial en su directorio /user/themes dentro de Grav. Sus archivos se pueden encontrar en /your-site/user/themes/editorial.

Instalación manual

Para instalar este tema, simplemente descargue la versión zip de este repositorio y descomprímala en /your-site/user/themes. Luego, cambie el nombre de la carpeta a "editorial". Puede encontrar estos archivos en GitHub o mediante GetGrav.org.

Qué hacer después de la instalación

Habilite el tema Editorial, ya sea a través del complemento de administración en admin/themes o en el archivo system.yaml en pages.theme.

pages:
  theme: editorial

No edite directamente el archivo editorial.yaml que se encuentra en la carpeta del tema. Copie el archivo editorial.yaml en user/config/themes y edite el nuevo archivo allí.

Opciones predeterminadas

Editorial viene con algunas opciones predeterminadas que se pueden configurar en todo el sitio. Estas opciones son:

VALOR DEFINICIÓN
production-mode En el modo de producción, solo se utiliza CSS minimizado. Cuando está deshabilitado, el CSS anidado está habilitado
sidebar_open Opción para mostrar la página principal con la barra lateral abierta o cerrada.
google_fonts_local Opción para cargar Google Fonts desde el tema o desde los servidores de Google.
menu_langswitcher Activar/Desactivar el icono para elegir el idioma en el menú (se necesita el plugin Langswitcher)
menu_search Activar/Desactivar el icono de búsqueda en el menú (se necesita el plugin de búsqueda simple)
menu_login Activar/Desactivar el icono de inicio de sesión en el menú
favicon Elige tu propio favicon
custom_logo Un logotipo personalizado en lugar del predeterminado (ver más abajo)
custom_logo_mobile Un logotipo personalizado para usar en la navegación móvil
custom_logo_width Establecer ancho personalizado para el logo personalizado
themeSlogan Texto personalizado para el eslogan
blog-page '/blog' La ruta a la página de listado del blog, útil para un diseño de estilo de blog
featured Activar/Desactivar publicaciones destacadas en la barra lateral izquierda
featured_tag Seleccionar nombre de categoría para publicaciones destacadas (configurado en taxonomías)
featured_number El número de publicaciones destacadas se mostrará en la barra lateral izquierda
contact_section Establecer texto de copyright, texto de contacto, correo electrónico de contacto y otra información de contacto
social_enabled Activar/Desactivar iconos sociales en el pie de página
custommenus.enabled Activar/Desactivar menús personalizados en el menú superior

Para realizar modificaciones, puede copiar el archivo editorial.yaml de si carpeta user/themes/editorial a la carpeta user/config/themes/ y modificarlo, o puede usar el complemento de administración.

NOTA: No modifique el archivo editorial.yaml de su carpeta user/themes/editorial directamente o sus cambios se perderán con cualquier actualización.

Logotipos personalizados

Para agregar un logotipo personalizado, debe colocar el logo en la carpeta user/themes/editorial/images/logo. Se admiten formatos de imagen estándar (.png,.jpg, .gif, .svg, etc.). Luego haga referencia al logotipo a través de YAML de esta manera:

custom_logo:
    - name: 'my-custom-logo.png'
custom_logo_mobile:
    - name: 'my-custom-mobile-logo.png'

Alternativamente, puede utilizar el campo "Logotipo personalizado" de arrastrar y soltar en las opciones del tema Editorial.

Opciones de la Galería

OPCIÓN TIPO VALOR POR DEFECTO DESCRIPCIÓN
OPENEFFECT string zoom Nombre del efecto al abrir la caja de luz. (zoom, fade, none)
CLOSEEFFECT string zoom Nombre del efecto al cerrar la caja de luz. (zoom, fade, none)
SLIDEEFFECT string slide Nombre del efecto al cambiar de diapositiva. (slide, fade, zoom, none)
MORETEXT string See more Texto adicional para descripciones en dispositivos móviles.
MORELENGTH number 60 Número de caracteres a mostrar en la descripción antes de agregar el enlace moreText (solo para móviles), si es 0, se mostrará toda la descripción.
CLOSEBUTTON boolean true Mostrar u ocultar el botón de cierre.
TOUCHNAVIGATION boolean true Habilitar o deshabilitar la navegación táctil (deslizar).
TOUCHFOLLOWAXIS boolean true Seguir el eje de la imagen al arrastrar en dispositivos móviles.
KEYBOARDNAVIGATION boolean true Habilitar o deshabilitar la navegación por teclado.
CLOSEONOUTSIDECLICK boolean true Cerrar la caja de luz al hacer clic fuera de la diapositiva activa.
STARTAT number 0 Iniciar la caja de luz en el índice definido.
WIDTH number 900px Ancho predeterminado para elementos en línea y iframes, puedes definir un tamaño específico en cada diapositiva. Puedes usar cualquier unidad, por ejemplo, 90% o 100vw para el ancho completo.
HEIGHT number 506px Altura predeterminada para elementos en línea e iframes, puedes definir un tamaño específico en cada diapositiva. Puedes usar cualquier unidad, por ejemplo, 90% o 100vh. Para elementos en línea, puedes configurar la altura en auto.
DESCPOSITION string bottom Posición global para la descripción de las diapositivas, puedes definir una posición específica en cada diapositiva (bottom, top, left, right).
LOOP boolean false Repetir las diapositivas al final.
ZOOMABLE boolean true Habilitar o deshabilitar imágenes con capacidad de zoom, también puedes usar data-zoomable="false" en nodos individuales.
DRAGGABLE boolean true Habilitar o deshabilitar el arrastre del mouse para ir a la diapositiva anterior y siguiente (solo imágenes y contenido en línea), también puedes usar data-draggable="false" en nodos individuales.
DRAGTOLERANCEX number 40 Utilizado con draggable. Número de píxeles que el usuario tiene que arrastrar para ir a la diapositiva anterior o siguiente.
DRAGTOLERANCEY number 65 Utilizado con draggable. Número de píxeles que el usuario tiene que arrastrar hacia arriba o hacia abajo para cerrar la caja de luz (establecer en 0 para deshabilitar el arrastre vertical).
DRAGAUTOSNAP boolean false Si es verdadero, la diapositiva cambiará automáticamente a la anterior/siguiente o se cerrará si se alcanza dragToleranceX o dragToleranceY; de lo contrario, esperará hasta que se suelte el mouse.
PRELOAD boolean true Habilitar o deshabilitar la precarga.

Características del tema

  • Eslogan del tema (opcional): se utiliza para agregar texto adicional al nombre del sitio en la parte superior de la página.
  • Información de contacto: complete el formulario y la información de contacto se mostrará en la barra lateral.
  • Íconos sociales (opcional): agregue la URL completa a una plataforma social y se mostrará automáticamente un ícono/enlace en la parte superior de la página.
  • Blog (opcional): plantillas de blogs y artículos.
  • Módulo de Características
  • Módulo de Banner como el tema original.
  • Módulo de Formulario de Contacto.
  • Formulario de contacto plantilla no modular.
  • Módulo de Publicaciones recientes: muestra las últimas publicaciones en un módulo, por ejemplo. Home. (se puede cambiar desde la plantilla de Twig)
  • Plantilla de Galería (con Glightbox JS)
  • Plantillas Twig personalizadas para el plugin SimpleSearch.
  • Funcionalidad para la caja de búsqueda en la barra lateral.
  • Modo de producción para estilos CSS.
  • Logotipo personalizado y logotipo personalizado móvil en la configuración del tema
  • Soporte para los plugins Taxonomylist, Related Pages, Random, Feeds y Archives.
  • Plantilla de equipo
  • Plantilla de descargas
  • Códigos cortos para escribir tus páginas fácilmente, aprovechando los estilos que ofrece el tema.
  • Estilos personalizados para formularios de inicio de sesión.
  • Soporte para menú de navegación en sitios web de una página.

Páginas destacadas

Las páginas destacadas etiquetadas con la etiqueta seleccionada en la configuración del tema y el número elegido (hasta un máximo de 5), se mostrarán automáticamente en una mini lista en la barra lateral con imágenes teaser y resúmenes. La página actual, si aparece, no se mostrará en esa lista.

featured_post

Páginas de blogs

  • Añade una página de blog si la necesitas en tu web.
  • La plantilla de publicación está lista para funcionar con el plugin Readingtime (Tiempo de lectura).
  • Plugin Breadcumbs activado por defecto en las publicaciones.
  • Opción agregada para filtrar por taxonomía de autor. Es necesario configurar la taxonomía de autores, en la configuración del sitio, para que en ellas aparezcan los autores de las páginas del blog y puedas utilizar los filtros por autor que tiene el tema.
  • Iconos para compartir en redes sociales las publicaciones del blog.
  • Soporte para traducción de fechas si se utilizan los plugins translate-date o twig-extensions.

Plantilla de descargas

El tema editorial incluye una plantilla sencilla para gestionar las descargas de archivos cargados en una página. Grav encuentra y procesa automáticamente estos archivos usando page.media.all y los muestra en una tabla con cuatro columnas: nombre, tamaño, fecha de modificación y botón de descarga.

Códigos abreviados (Shortcodes)

Código Abreviado de Tabla

Uso

Es bastante sencillo. Simplemente envuelve una tabla de Markdown entre las etiquetas [ed-table]. El código abreviado [ed-table] tiene algunos parámetros opcionales:

  • class - alt (esta clase es proporcionada por el tema Editorial).
  • header - true - <thead> se muestra.

Un ejemplo del código abreviado de tabla es el siguiente:

[ed-table header=true class="alt"]
| Encabezado 1 | Encabezado 2 |  Encabezado 3 |  Encabezado 4 |
| Celda 1      | Celda 2      | Celda 3       | Celda 4       |
| Celda 5      | Celda 6      | Celda 7       | Celda 8       |
[/ed-table]

Ejemplo

https://editorial.pmdesign.dev/shortcodes

Código Abreviado de Cajas

Uso

Envuelve un bloque de contenido entre las etiquetas [ed-box]. El shortcode [ed-box] tiene algunos parámetros opcionales:

  • heading - El encabezado del cuadro.
  • color - light, primary, secondary, success, warning e info.
  • class - alt (esta clase elimina el borde del cuadro).

Un ejemplo del shortcode de Caja es el siguiente:

[ed-box color="light" heading="Light Box Shortcode"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. 
[/ed-box]
[ed-box color="primary" heading="Primary Box Shortcode"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna.  
[/ed-box]
[ed-box color="secondary" heading="Secondary Box Shortcode"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. 
[/ed-box]
[ed-box color="success" heading="Success Box Shortcode"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. 
[/ed-box]
[ed-box color="info" heading="Info Box Shortcode"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. 
[/ed-box]
[ed-box color="warning" heading="Warning Box Shortcode"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. 
[/ed-box]
[ed-box color="danger" heading="Danger Box Shortcode"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. 
[/ed-box]

Ejemplo

https://editorial.pmdesign.dev/shortcodes

Código abrevidado para Botones

Uso

Envuelve algunos botones entre las etiquetas [ed-buttons]. El shortcode [ed-buttons] tiene los siguientes parámetros: stacked, special o fit.

El shortcode [ed-button] que define cada botón tiene los siguientes parámetros:

  • class - clases personalizadas para el botón
  • type - primary, secondary, success, info, warning o danger.
  • size - small, medium o large
  • url - La URL del botón
  • target - El destino de la URL

Un ejemplo del shortcode de Botones es el siguiente:

[ed-buttons]
    [ed-button type="primary"  url="#"]Primary[/ed-button]
    [ed-button type="secondary" url="#"]Secondary[/ed-button]
    [ed-button type="success" url="#"]Success[/ed-button]
    [ed-button type="info" url="#"]Info[/ed-button]
    [ed-button type="warning" url="#"]Warning[/ed-button]
    [ed-button type="danger" url="#"]Danger[/ed-button]
[/ed-buttons]
[ed-buttons]
    [ed-button type="primary" size="small"  url="#"]Primary[/ed-button]
    [ed-button type="secondary" size="small"   url="#"]Secondary[/ed-button]
    [ed-button type="success" size="small"   url="#"]Success[/ed-button]
    [ed-button type="info" size="small" url="#"]Info[/ed-button]
    [ed-button type="warning" size="small" url="#"]Warning[/ed-button]
    [ed-button type="danger" size="small" url="#"]Danger[/ed-button]
[/ed-buttons]
[ed-buttons ulclass="special"]
    [ed-button type="primary" size="small"  url="#"]Primary[/ed-button]
    [ed-button type="secondary" size="small"   url="#"]Secondary[/ed-button]
[/ed-buttons]
[ed-buttons ulclass="stacked"]
    [ed-button type="primary" size="small"  url="#"]Primary[/ed-button]
    [ed-button type="secondary" size="small"   url="#"]Secondary[/ed-button]
[/ed-buttons]
[ed-buttons ulclass="fit"]
    [ed-button type="primary" size="small"  url="#"]Primary[/ed-button]
    [ed-button type="secondary" size="small"   url="#"]Secondary[/ed-button]
[/ed-buttons]

Ejemplo

https://editorial.pmdesign.dev/shortcodes

Código abreviado para Filas Flexibles

Uso

Utiliza el shortcode [ed-flex-row] para establecer el número de columnas que mejor representen tu contenido y diseño. El shortcode [ed-flex-row] tiene los siguientes parámetros:

class - Clases de filas del tema Editorial (separadas por espacios): gtr-uniform, gtr-0, gtr-25, gtr-50, gtr-150, gtr-200, aln-between, aln-around, aln-evenly, aln-left, aln-center, aln-right, aln-top, aln-bottom y aln-middle.

El shortcode [column] que define cada columna individual (por ejemplo, .col-4 col-12-medium) tiene los siguientes parámetros:

class - Clases de columnas del tema Editorial (separadas por espacios), indican el número de columnas que deseas utilizar de las posibles 12 por fila. Entonces, si quieres tres columnas de ancho igual, puedes usar col-4. Para hacer que la cuadrícula sea receptiva, hay cinco puntos de quiebre, uno para cada punto de quiebre receptivo: xsmall, small, medium, large y xlarge.

Un ejemplo del shortcode de Filas Flexibles es el siguiente:

[ed-flex-row class="gtr-50"]
[column class="col-4 col-12-medium"]
[ed-box color="primary" heading="Primary"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna.
[/ed-box]
[/column]

[column class="col-4 col-12-medium"]
[ed-box color="secondary" heading="Secondary"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna.
[/ed-box]
[/column]

[column class="col-4 col-12-medium"]
[ed-box color="success" heading="Success"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna.
[/ed-box]
[/column]

[column class="col-4 col-12-medium"]
[ed-buttons]
    [ed-button type="primary"  url="#"]Primary[/ed-button]
    [ed-button type="secondary" url="#"]Secondary[/ed-button]
    [ed-button type="success" url="#"]Success[/ed-button]
    [ed-button type="info" url="#"]Info[/ed-button]
    [ed-button type="warning" url="#"]Warning[/ed-button]
    [ed-button type="danger" url="#"]Danger[/ed-button]
[/ed-buttons]
[/column]

[column class="col-4 col-12-medium"]
[ed-table header=true class="alt"]
| Header 1 | Header 2 |  Header 3 |  Header 4 |
| Cell 1   | Cell 2   | Cell 3   | Cell 4  |
| Cell 5   | Cell 6   | Cell 7   | Cell 8  |
[/ed-table]
[/column]

[column class="col-4 col-12-medium"]
> Blockquote text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo.
[/column]

[/ed-flex-row]

Ejemplo

https://editorial.pmdesign.dev/shortcodes

Código abreviado para Imágenes Flotantes

Uso

Utiliza el shortcode [ed-float] para mostrar una imagen flotante, a la izquierda o derecha de un texto.

El shortcode [ed-float] tiene los siguientes parámetros:

  • direction - left o right
  • image - Nombre de la imagen desde los medios de la página
  • alt - Etiqueta Alt para la imagen
  • title - Título de la imagen

Un ejemplo del shortcode de Imagen Flotante es el siguiente:

[ed-float direction=left image="home.jpg" alt="Home" title="Home"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna. Pellentesque eu lectus dignissim justo consectetur tristique.
[/ed-float]
[ed-float direction=right image="home.jpg" alt="Home" title="Home"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna. Pellentesque eu lectus dignissim justo consectetur tristique.
[/ed-float]

Ejemplo

https://editorial.pmdesign.dev/shortcodes

Página de demostración

https://editorial.pmdesign.dev/

Créditos

  • Gracias a Jeremy Gonyea, quien portó el primer tema Editorial de Grav.
  • Este tema no estaría aquí sin HTML5Up.net. Muchas gracias a AJ por crear el tema inicialmente en ese sitio.
  • Las imágenes de demostración provienen de Unsplash