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

Google+

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Google+

Twitter

Pinterest

Facebook

Linkedin

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

• Google
• Facebook
• Twitter