Visualizar imágenes y vídeos en los comentarios de Blogger | Oloblogger Este es un breve código JavaScript que convierte cualquier URL correspondiente a una imagen, en el HTML necesario para que dicha imagen se v...

15 de mayo de 2017

Visualizar imágenes y vídeos en los comentarios de Blogger

Este es un breve código JavaScript que convierte cualquier URL correspondiente a una imagen, en el HTML necesario para que dicha imagen se visualice en web y concretamente dentro de un comentario.

Lo mismo hace si esa dirección está dentro de un enlace (<a href...) o si se trata de un vídeo de YouTube o de Vimeo pero, claro está, en este último caso mostrando un vídeo.

En resumen: si alguien pone dentro de un comentario de tu blog, un enlace a una imagen o vídeo, o simplemente su dirección, este código hará que esa imagen o vídeo se vean dentro de dicho comentario.

Es lo que puedes ver funcionando actualmente en este blog y también en este Codepen.




No hace falta jQuery ni ninguna otra cosa adicional. Sólo tenéis que localizar el </body> de vuestra plantilla y justo antes pegar lo siguiente:

<script>//<![CDATA[
!function(){for(var a=/(\[img\])?((http:|https:)?\/\/\S*?\.(jpg|gif|png|bmp|jpeg]))(\[\/img\])?/gi,b=/(\[vid\])?http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?(\[\/vid\])?/gi,c=/(\[vid\])?(http:|https:)?\/\/(vimeo.com)\/([0-9]*)(\[\/vid\])?/gi,d=document.querySelectorAll(".comment-content"),e=0;e<d.length;e++){for(var f=d[e].getElementsByTagName("a"),g=0;g<f.length;g++)if(f[g].href.match(a)||f[g].href.match(b)||f[g].href.match(c)){var h=document.createElement("span");h.innerHTML=f[g].href;var i=f[g];i.parentNode.insertBefore(h,i),f[g].href="",f[g].innerHTML=""}var j=d[e].innerHTML;j=j.replace(a,'<img style="max-width: 100%; height: auto;display: blocK;margin: 10px auto;" src="$2"" alt=""/>'),j=j.replace(b,'<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;margin:20px auto;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="https://www.youtube.com/embed/$2" frameborder="0" allowfullscreen></iframe></div>'),j=j.replace(c,'<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;margin:20px auto;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="https://player.vimeo.com/video/$4" frameborder="0" allowfullscreen></iframe></div>'),d[e].innerHTML=j}}();
//]]></script>



Para los que hablen JavaScript y siguiendo el código y los comentarios del Codepen antes citado que tiene un código menos compacto (más legible), el algoritmo que usé fue:

  • Definir unas expresiones regulares regimg, regyt y regvim para localizar las URL de imágenes, vídeos YouTube y vídeos Vimeo, respectivamente
  • Pasar a un objeto todos los elementos dentro de comment-content, que es el selector que engloba a todos los comentarios.
  • Obtener todos los enlaces de ese objeto para comprobar si corresponden a alguno de los tres elementos que buscamos (imágenes, YouTube o Vimeo), en cuyo caso eliminamos el enlace y dejamos sólo la URL. Esto lo hacemos para que en el siguiente paso la sustitución sea limpia y sin interferencias por doble URL (la del href y la del img).
  • En los tres últimos pasos sustituimos, según el caso, cada URL por el código HTML necesario para que se vea una imagen o un vídeo


Explico esto porque de forma similar podréis incluir otros servicios distintos de YouTube y Vimeo, simplemente añadiendo por cada uno una expresión regular, una condición y una rutina de sustitución (replace).

Cambiando algo las expresiones regulares incluso podríais crear vuestro propio código BBCode, aunque los más avezados ya habrán visto ese [img] por ahí ¿verdad?

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

8 comentarios :

  1. Hola Oloman ;)
    Esta solución la llevaba esperando media vida... me habría ahorrado cienes de palabras, jeje...
    Muchas gracias por seguir regalando sabiduría ;)
    Un saludo.

    ResponderEliminar
    Respuestas
    1. Escucha... Tanta gente pide cosas, que haberlo pedido tú. Lo más seguro es que no te hubiera hecho caso, pero quién sabe XD

      Eliminar
    2. Jeje... me lo tomaré como un cumplido... y ten por seguro que a la próxima vengo con las de pedir, que tengo varias ;)

      Eliminar
  2. Qué bien, muchas gracias. En mi blog de huerta y jardín quieren los usuarios a veces incluir fotos en los comentraios y no sabíamos cómo hacerlo. Tus publicaciones siempre me son provechosas. Un saludo cordial.

    ResponderEliminar
  3. Hola buenas,
    con imágenes si me va pero con los videos de YouTube no....este

    https://www.youtube.com/watch?v=je-jBVQGQbc&feature=youtu.be
    es el enlace

    ResponderEliminar
    Respuestas
    1. bueno con imágenes y videos me va en otro blog en este hice todo igual y no va ni videos ni imágenes en el otro si los dos

      Eliminar
    2. Hola E&E. Evidentemente algo hay distinto en esos dos blogs
      Pon el código en el que no te funciona y dime cual es su dirección.

      Eliminar
    3. hOLA Buenas,
      ya lo solucione tenia que ver con la forma de mostrar la pagina a la hora de introducir comentarios creo. El que no funcionaba se abria en una pagina nueva y en el que iba estaban los comentarios al final del post como aquí.
      saludos y gracias ya va en los dos

      Eliminar