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

32 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
  4. Hola Oloman una pregunta...este tip puede hacer que el blog cargue más lento? me gustaría ponerlo pero tengo esa duda.

    Un saludo:)

    ResponderEliminar
    Respuestas
    1. Evidentemente sí, MakeUp-Finds. Todo lo que añadas al blog suma peso.
      Lo que ocurre es que este código concreto no es muy largo ni hace tareas pesadas, así que no creo que ralentice mucho.

      Eliminar
    2. Gracias por aclararlo, un saludo;)

      Eliminar
  5. Esto lo quería hace tiempo, sin embargo me da unos problemillas, me quita otras imágenes que aparecen, por ejemplo, las del avatar o incluso la imagen de la caneca para eliminar el comentario, como puedo excluir ese tipo de elementos?

    ResponderEliminar
    Respuestas
    1. ¿Cuál era la dirección de tu blog Yurika?

      Eliminar
    2. Lo estoy haciendo en este blog de pruebas http://dinamodeprueba2.blogspot.com.co/

      Eliminar
    3. En tu caso, del código que propuse cambia .comment-content por .comment-body, aunque como tienes ya muchos scripts en tu plantilla, resulta difícil predecir si funcionará 100% bien.

      Eliminar
    4. Gracias, mira que si funcionó, pero tengo diferenciados los comentarios de los autores, y en esos no se cambian, como lo tengo aquí

      https://dinamodeprueba2.blogspot.com.co/2014/02/entrada-comillas.html

      Hay alguna forma de agregar eso también, o puedo poner el script dos veces?

      Eliminar
    5. Comento otra vez para decirte que puse el script dos veces y me funcionó, sin embargo hay una forma de ponerlo solo una vez pero agregar los dos diferenciadores, me refiero al .comment-body y .blog-author-comment

      Eliminar
    6. Seguro que sí, pero para eso ya tendría que estudiar tus scripts. Como te dije, tienes ya muchos y espero que entiendas que no puedo bajar a un nivel tan personalizado.

      Eliminar
    7. Pues te cuento que decidí complicarme la vida, yo había implementado el sistema de comentarios que ví en Vagabundía, así que decidí revertir todo y dejar el que pone Blogger por defecto, funcionó sin problemas pero ya que tengo un sistema de emoticones, así que una solución fue cambiarles el fortamo por uno que el script no cambie, así que problema areglado y sin complicaciones.

      Ahora me toca poner los estilos de los comentarios como los tenía

      Eliminar
  6. Una cosa..
    Existe la posibilidad de auto re-dimensionar todas las imágenes y videos un tamaño máximo?

    ResponderEliminar
    Respuestas
    1. La respuesta en general es sí y ya dependiendo del caso concreto habrá que usar un código u otro.

      Ya que andas por aquí, tu correo gmail no funciona y no puedo contestarte. Otro antiguo que tengo tengo tuyo tampoco va. Te he dejado comentarios en tu blog avisándote de ello.

      Eliminar
    2. Ok, Ya te he contestado... Estaba mail el mail.

      Eliminar
  7. Hola Oloman, esta vez hago una pregunta off topic porque quiero conocer la opinión de un especialista. ¿Porque hay código o trucos que modifican gadget que en una misma plantilla pero en dos blogs diferentes, en una me lo toma, y en otra no?. Por ejemplo, en uno de mis blogs (bodegaveintidos.blogspot.com) me costó lograr la plantilla tomara el truco de modificar las etiquetas (recordaras que tuvimos un cambio de opniones). En este otro blog (ccmcontadoresyconsultores.blogspot.com) coloque un truco para modificar el aspecto de entrada destacada y no logro que funcione.
    PRegunté en disstintos foros, incluso reporte problemas tal como indica el escritorio de blogger y no tengo respuestas. ¿Puede que la estructura de la plantilla tenga algo que la vuelva estéril a los trucos?
    Solo pido disculplas porque se que te molesta que no se prgunte del tema, pero necesito una sugerencia.
    Gracias

    ResponderEliminar
    Respuestas
    1. Molestarme es la expresión más correcta. Es que si no tengo apenas tiempo para contestar los comentarios relacionados ¿cómo voy a poder hacerlo con los no relacionados?

      Con respecto a la pregunta, la respuesta a por qué un mismo truco funcione en un blog sí y otro no, es muy sencilla de contestar: es casi imposible que dos plantillas sean exactamente iguales, salvo que sean las estándar de Blogger y que no hayas alterado nada en ellas :)

      La estructura de la plantilla, evidentemente influye en muchas ocasiones.

      Eliminar
  8. tengo un problema con 2 de mis blogs, supongo que era la plantilla, en uno no coge nada y en el otro coge mal las fotos, videos no probe, a ver si ves algo jefe :
    http://abusosbancarios.eeconsultores.info/2017/07/modelo-de-solicitud-devolucion.html?showComment=1500640693206#c2815114101926908235


    http://reclamaciones.eeconsultores.info/2017/07/egarante-certificacion-de-envio-de_21.html

    saludos y gracias

    ResponderEliminar
    Respuestas
    1. Vi que ya tienes contenido en esos enlaces que me enviaste para repasar ¿Ya solucionaste el problema?

      Eliminar
  9. muy bueno! 😌☝ lo probare esta tarde, osea...solo colocar ese script en la etiketa body...antes del cierre de etiketa?

    ResponderEliminar
  10. todabia no lo probe, me interesaria sobre la puesta de video...kiza con solo retirar los formatos de imagenes ya quede solo apta para videos :)

    ResponderEliminar
    Respuestas
    1. Puedes quitar lo de las imágenes o puedes dejarlo. Total... si no lo saben, casi nadie pone imágenes en los comentarios.

      Eliminar
  11. Que buen truco pero encontré un detalle y no se como solucionarlo, cuando comento texto con imagen salen ambas cosas, pero cuando comento texto con un vídeo solo muestra el vídeo y el texto queda oculto, hay un forma de arreglarlo?, como para que no haya que comentar dos veces

    ResponderEliminar