Logo

Documentación

Ejemplo Shortcodes

Contenido Shortcodes

Agregar Iframe de Fusion 360

Código Iframe de Fusion 360 Markdown
{{< iframe-fusion link="https://myhub.autodesk360.com/ue2ce4e3a/shares/public/SH56a43QTfd62c1cd968edbffd1ceafd2764?mode=embed" >}}
Código Iframe de Fusion 360 HTML Shortcode
<div>
    <iframe 
    src='{{ index .Params "link" }}'
    width="100%" 
    height="450" 
    allowfullscreen="true" 
    webkitallowfullscreen="true" 
    mozallowfullscreen="true"  
    frameborder="0">
    </iframe>    
</div>

[Volver Arriba]

Agregar Video Local MP4

Código Video Local MP4 Markdown

Carpeta de videos se encuentra en /static/img

{{< video-local src="video.mp4" >}}
Código Video Local MP4 HTML Shortcode
<div>
    <video 
    width="100%" 
    height="450" 
    autoplay muted loop controls preload>
    <source src="/{{ index .Params "src" }}"  type="video/mp4">
    </video>
</div>

[Volver Arriba]

Agregar Galería Fotos Lightbox

Contexto visualización

Contexto visualización

Estructura

Estructura

Lámina contexto

Lámina contexto

Lámina sección contexto

Lámina sección contexto

Lámina sección

Lámina sección

Vista superior

Vista superior

Código Galería Fotos Lightbox Markdown

Carpeta de galeria se encuentra en /static/img. Es importante que cada galería de imágenes esté contenida en una carpeta.

Para acceder a esa carpeta, se debe poner la ruta de acceso en el shortcode. Ejemplo con una carpeta llamada galeria dentro de /static/img.

{{< gallery dir="/img/galeria/" />}} {{< load-photoswipe >}}

[Volver Arriba]

Agregar Botón de Descarga

Descargar
Código Botón de Descarga Markdown
{{< boton-descargar src="documento.pdf" >}}
Código Botón de Descarga HTML Shortcode
<a class="face-button" href="/descargas/{{ index .Params "src" }}" download>
    <div class="face-primary">
        <span class="icon fa fa-cloud"></span>
        Descargar
    </div>
    <div class="face-secondary">
        <span class="icon fa fa-hdd-o"></span>
    </div>
</a>

[Volver Arriba]

Agregar visor de archivos PDF

Código Visor de archivos PDF Markdown

Ejemplo con PDF en carpeta /static/pdf.

{{< pdf-viewer id="pdf-hugo" link="/pdf/documento.pdf" >}}

Ejemplo con PDF en link externo:

{{< pdf-viewer id="ejemplo-adobe" link="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" >}}
Código Visor de archivos PDF HTML Shortcode
<iframe id='{{ index .Params "id" }}' src='{{ index .Params "link" }}'
frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:60vh;"></iframe>

<button onclick="myFunction('{{ index .Params "id" }}')" class="button button-primary mb-2" style="width: 100%;">Ver Pantalla Completa</button>

<script>
    function myFunction(id) {
      document.getElementById(id).classList.add("full-screen");
    }
    document.addEventListener('keydown', function(event){
	if(event.key === "Escape"){
        document.getElementById('{{ index .Params "id" }}').classList.remove("full-screen");
	}
});
</script>

YOUTUBE:

IMAGE ALT TEXT

If this markup snippet looks complicated, break it down into two parts:

an image image alt text wrapped in a link link text