Os recursos Media/Widget utilízanse para inserir contido HTML nas guías, como vídeos de YouTube, widgets de busca, etc. A diferenza dos elementos de contido de Rich Text/HTML, os recursos Medi/Widget almacénanse na biblioteca de Assets. Como resultado, unha vez que alguén crea un deles, pódese reutilizar noutras guías.
Estes widgets están destinados a incorporar código HTML, incluíndo elementos <script> e <style> que conteñen código JavaScript e CSS, respectivamente. Non se poden usar para incorporar PHP.
Podemos asigarlle materias mediante o menú Subject Associations
Reutilizar Widgets existentes
Un exemplo:
Coidado ao inserir código!
Incorporar código HTML non está exento de riscos. Algúns widgets de terceiros poden incluír código JavaScript ou CSS que entra en conflito coa aparencia ou a funcionalidade da túa páxina de LibGuides.
Cando intentes gardar un recurso multimedia/widget, LibGuides revisará o teu código para detectar cousas como as inclusións de jQuery, as etiquetas non coincidentes e os atributos non pechados. Se se atopa algún problema, aparecerá unha alerta que mostrará un resumo dos problemas, dándoche a posibilidade de cancelalos e solucionalos.
Se atopas problemas despois de engadir un recurso multimedia/widget á guía (por exemplo, os menús da páxina deixan de funcionar), vai a Content > Assets e edita ou elimina o widget.
Coidado!
Os vídeos utilízanse para acompañar ou completar as guías, non deben ser guías en si mesmos
Para inserir un media/widget cun vídeo de YouTube debemos seguir estes pasos:
1. Ir a YouTube, ir á páxina do vídeo que queremos inserir e picar no menú Compartir
2. Elixir "Insertar" no menú que se abre:
3. Copiar o código que se mostra:
A continuación, na guía, engadimos Media/Widget e pegamos o código no campo "Embed Code"
O resultado é o seguinte:
A inserción de elementos responsivos permite aos navegadores determinar as dimensións do vídeo ou da presentación de diapositivas en función da anchura do bloque que o contén, escalándoo correctamente en calquera dispositivo.
As regras aplícanse directamente aos elementos <iframe>, <embed>, <video> e <object>.
Podemos ver a diferenza entre o código orixinal e o responsivo do vídeo do exemplo:
<iframe width="560" height="315" src="https://www.youtube.com/embed/kAinu96Tv3M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Responsivo
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/kAinu96Tv3M" title="Biblioteca Virtual Tirant" allowfullscreen>
</iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/kAinu96Tv3M" title="Biblioteca Virtual Tirant" allowfullscreen>
</iframe>
</div>
O resultado, utilizando a ratio 16:9 é o seguinte:
Na Biblioteca de Assets podedes atopar dúas plantillas (16:9 e 4:3) de widget responsivo para os vídeos de YouTube.
Pasos:
1. Engadir Media/Widget
2. Reuse Existing Widget
3. Buscar "responsivo". Dos resultados elixir a ratio que desexemos.
4. Una vez seleccionado o widget, marcar a opción COPY, do contrario non poderemos editalo, e logo Save
5. Editamos o widget para cambiar o video e o título do mesmo. Para cambiar o vídeo necesitaremos o Id que é a parte final dos URLs de cada video de YouTube. Por exemplo:
https://youtu.be/40Sq9y0_eF0
https://www.youtube.com/embed/40Sq9y0_eF0
Neste caso pegariamos 40Sq9y0_eF0 no lugar que di: AQUÍ VAI O ID DO VIDEO
<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="https://www.youtube.com/embed/AQUÍ VAI O ID DO VIDEO" title="AQUÍ VAI O TÍTULO DO VIDEO" allowfullscreen></iframe></div>
No título "title" poñeremos o que corresponda
