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

149 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
  12. Excelente tu aportación oloman.
    Gracias.

    ResponderEliminar
  13. Muy buenas Oloman, espero que ese tiempo que te falta para dedicarle al blog sea muy bueno para tí.

    Esta entrada es una pasada y creo que automatizar esto está muy logrado. En mi caso me funciona de lujo con las imágenes pero los vídeos no los muestra, oculta el enlace del video pero no lo muestra. Te dejo el enlace donde tengo la prueba y cuando tengas tiempo me dices algo.

    https://iberopagano.blogspot.com.es/2016/11/la-television-japonesa-emite-el-tsunami_21.html?showComment=1525909821431#c5782677504297109913
    Gracias de antemano por todo.

    ResponderEliminar
  14. Ola amigo primera ves llegando a tu blog, quisiera saber como agregar los datos estructurados en blogger, así como se pueden usar en wordpress pero con yoast seo, gracias de antemano por tu pronta respuesta

    ResponderEliminar
  15. Respuestas
    1. Nose y no me sale comentar con imagenes y videos en el blog. estoy en proceso de mi tesis y esto no puedo solucionarlo

      Eliminar
  16. Hola aún llevas el blog??

    ResponderEliminar
  17. Qué sucede Oloman con el widget "lista de blog" que ni guarda ni elimina.
    Ha bloqueado Google "guardar", lo ha inhabilitado o se trata de un error pasajero?
    Muchas gracias por tu ayuda siempre

    ResponderEliminar
  18. Oloman Solo quería avisarte que parece que hoy se ha restablecido al menos en mi caso.
    Muchas gracias como siempre y disculpa la intromisión en un tema diferente pero no sabia como comunicarme mejor.
    Este post es buenísimo.
    Saludos

    ResponderEliminar
  19. Very good Oloman, I hope that the time you have left to dedicate to the blog is very good for you.

    This post is amazing and I think automating this is very successful. In my case, it works great for me Dissertation Help UK

    ResponderEliminar
  20. Ofrecemos préstamos en todo el mundo a una tasa de interés del 2%, ofrecemos préstamos comerciales, préstamos personales, préstamos para automóviles, préstamos para inversiones, préstamos para la vivienda y mucho más.
    Ofrecemos préstamos desde el rango de $ 50,000.00 USD hasta $ 50,000,000.00, si está interesado contáctenos a través de los siguientes correos electrónicos: expresseasyloan1@gmail.com
    También estamos financiando proyectos empresariales, estamos interesados en asociarnos con su empresa ya que buscamos diversificar nuestro portafolio financiero en proyectos empresariales viables y lucrativos que merezcan la pena,
    Estamos más interesados en alianzas empresas comerciales tales como proyectos médicos y de salud, proyectos inmobiliarios, proyectos mineros, proyectos agrícolas, proyectos de energía renovable, proyectos de puesta en marcha y expansiones comerciales / préstamos con tasa más baja.

    Su rápida respuesta es muy necesaria.
    Servicios de préstamo Global Express Easy
    Correo electrónico: expresseasyloan1@gmail.com

    ResponderEliminar
  21. Very nice and the very helpful blog commenting Sites List that you have posted. I like it very much please keep doing this amazing work. Eid ul Fitr 2022

    ResponderEliminar
  22. The article posted was very informative and useful. You people are doing a great job. Keep going. Please visit site Eid ul Fitr 2022

    ResponderEliminar
  23. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  24. Quiere editar videos, creo que deberíamos usar la aplicación kinemaster pro indonesia para editar videos. Kinemaster es la mejor aplicación para hacer esto.

    ResponderEliminar
  25. This is a great platform for sharing ideas and thoughts of different people around the globe! I like different kinds of entertainment including online webcam chat with girls. free cam girls

    ResponderEliminar
  26. Our assignments are always unique and free of plagiarism. Our experts produce contents in sync with the criteria and expectations of your faculty. Great Assignment Helper furnishes most reliable MATLAB assignment help to students at the cheapest rate.

    ResponderEliminar
  27. Thanks for sharing this blog andartical .

    ResponderEliminar
  28. Very interesting topic, thank you! open this site

    ResponderEliminar
  29. If you are looking for a more feature-rich and customizable WhatsApp experience, then WhatsApp Aero is the perfect choice for you. With WhatsApp Aero you get all the features of the original WhatsApp and more. you can download the app at: https://apkcima.com/whatsapp-aero/ completely free.

    ResponderEliminar
  30. download and enjoy the latest version of Game Among Us MOD APK

    ResponderEliminar
  31. Thank you! Your article is quite helpful!
    Roofing Surrey BC

    ResponderEliminar
  32. Such a very interesting topic, thank you so much for this!
    visit now

    ResponderEliminar
  33. This is a very excellent read, Thanks for this amazing article! Handyman

    ResponderEliminar
  34. Roblox Mod Apk is the ultimate virtual universe that lets you create, share experiences with friends, and be anything you can imagine. Join millions of people and discover an infinite variety of immersive experiences created by a global community!

    ResponderEliminar
  35. Good! Excellent work for creating this kind of content. Thanks for sharing.
    electrician woodbridge va

    ResponderEliminar
  36. If you are looking for some Sports games for Android be free to check PlaySubtly

    ResponderEliminar
  37. Looking forward to seeing more great blog posts here.
    Shingles Services Halifax, NS

    ResponderEliminar
  38. Such a wonderful information, thanks for sharing!
    boston web marketing

    ResponderEliminar
  39. Fantastic! Thank you, I've recently been looking for information about this topic
    https://www.drywallsurreybc.com

    ResponderEliminar
  40. Thank you! I have really enjoyed browsing your weblog posts. After all I’ll be subscribing on your feed and I am hoping you write again very soon.
    chimney inspection worcester ma

    ResponderEliminar
  41. I agree with your way of thinking. Thank you for sharing.
    private jet charter boston

    ResponderEliminar
  42. Thanks for sharing this information to increase our knowledge. Looking forward for more on your site.
    www.roofingburnaby.com

    ResponderEliminar
  43. Such a wonderful information, thanks for sharing!
    miami beach photographers

    ResponderEliminar
  44. What an awesome article, great insight. thank you for sharing
    personal trainer boston

    ResponderEliminar
  45. Awesome! I love seeing blog that understand the value of providing a quality resource for free.
    https://www.roofingcontractorvictoria.com/

    ResponderEliminar
  46. Such a wonderful information, thanks for sharing! Concrete Sidewalks Milton, ON

    ResponderEliminar
  47. Thanks for the post. Very interesting! I didn't think I would enjoy reading your blog so much. I also like to chat with people from different cities and countries in chat ruletka that was also very interesting!

    ResponderEliminar
  48. Thank you! I definitely need some helpful tips like this!
    masonry contractors san antonio

    ResponderEliminar
  49. Great article! We always love and await for this!
    Drywall Richmond BC

    ResponderEliminar
  50. Blogger ahora permite videos e imágenes dentro de una publicación de blog. Saludos de nosotros en Roofing Contractors Kamloops.

    ResponderEliminar
  51. You have given us very important info! Thanks a lot. https://www.contractorlethbridge.com

    ResponderEliminar
  52. Amazing blog. Keep up the good information. milwaukee-fence-companies

    ResponderEliminar
  53. Nice job for publishing such a beneficial web site. Thank you!
    my site

    ResponderEliminar
  54. Nice! I really enjoy the article post. Much thanks again. www.appliancekitchener.com

    ResponderEliminar

  55. lawn care company Sioux falls Sioux falls lawn care company.


    chandlerfencecompany.com fence installers in Chandler, AZ.
    https://www.crelectrician.com/ Cedar Rapids Licensed Electricians.

    ResponderEliminar
  56. https://www.webfilmschool.com/my-first-feature-film-one-two-or-three-week-shoot

    ResponderEliminar
  57. This is really a big and great source of information. We can all contribute and benefit from reading as well as gaining knowledge from this content just amazing
    experience Thanks for sharing such a nice information. More information about
    Concrete Contractors Harrisonburg VA

    ResponderEliminar
  58. I love your posts! Thanks for contributing the best tips in an approachable.
    https://www.windowcleanerscoquitlam.com

    ResponderEliminar
  59. Good post. Thanks for sharing with us! Insulation Surrey BC

    ResponderEliminar
  60. Nice post, will be sharing this with to my fellow friends.
    Siding Services

    ResponderEliminar
  61. Blockman Go Mod Apk is a multiplayer game that can be played on smartphones. In the game, you are able to create your own character and explore different worlds with other players.

    ResponderEliminar
  62. Really nice and interesting post. I was looking for this kind of information and enjoyed reading this one.
    https://www.drywallservicesvictoria.com/

    ResponderEliminar
  63. Informative! thank you for sharing this ideas. Will visit this site more often.

    URL: https://www.pestcontrolalb.com/mice.html

    ResponderEliminar
  64. best deck builders in omaha NE, install or design your patio

    ResponderEliminar
  65. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  66. PK XD Mod Apk Unlimited Money and Gems 2022 is here! This is the best and latest Android modded game which offers unlimited gold, energy, and gems. Just download it and start playing right now

    ResponderEliminar
  67. Thanks for sharing such a wonderful blog. Looking for more.
    tulsa fence contractors

    ResponderEliminar
  68. There is an ongoing call for application of the DSWD Educational Assistance Program. Here are the things you need to know in order to avail the said program DSWD Educational Assistance

    ResponderEliminar
  69. Welcome to Pandora Arcade, the power site for everything related with the Pandora Arcade gaming structure. Here you will see all that you truly expect as familiar with the Pandora Arcade structure, including news, updates, and data on where to get it. Check for more pandora arcade

    ResponderEliminar
  70. Simply need to say that your article is exceptionally useful. Awesome! https://www.social-bookmarkings.win/direct-response-marketing-techniques

    ResponderEliminar
  71. I got a lot of idea to my drywall repair because of what you've shared.

    Thanks!

    ResponderEliminar
  72. It seems such that I will most likely never see again an article of a sort like . It in a real sense implies the best thistle. It is by all accounts a phenomenal article. It appears to be extremely simple, however it's a troublesome sort of article, and it ideals other 

    ResponderEliminar
  73. It would appear that I will never, ever come across another article that is comparable to again in my life. incredible effort put in to accomplishing such a sense of fulfillment. Thank you very much for sharing. Furnace Repair Victoria BC

    ResponderEliminar
  74. users sometimes want to include photos in the comments in our mud and tape site and we didn't know how to do it. Your posts are always helpful to me.

    ResponderEliminar
  75. This article is very instructive ultimately I got what I wanted. Much obliged to you benevolent for this Information. https://troyoovp595.hpage.com/post1.html

    ResponderEliminar
  76. Es más fácil adjuntar imágenes o videos en Blogger en estos días, especialmente con la gran mejora en los sitios de blogs. Mis compañeros de trabajo y yo en Interior Painter Kamloops los usamos mucho.

    ResponderEliminar
  77. Book cover design is an art that helps set the tone of the book. It can have a big impact on whether or not a reader decides to pick up the book. When a reader is intrigued by the cover, they'll usually go on to read the blurb and then decide whether or not to purchase the book. This service will help get your book on the bestseller list with professional and affordable book cover design. cover design service

    ResponderEliminar
  78. Thanks for your analysis.You and I look forward to seeing your website as well.I look forward to giving something back and helping others like you have helped me. 𝐯𝐢𝐬𝐢𝐭 𝐡𝐞𝐫𝐞:-Picsart mod apk

    ResponderEliminar
  79. You have provided us with very significant information. Everyone can benefit from its high quality and wealth of information. Keep up the constant posting. I cannot express how grateful I am to you. HVAC Fort Mcmurray

    ResponderEliminar
  80. Blogger ahora permite adjuntar fotos y videos, por lo que no es necesario que ingrese dicho código. Mis compañeros de trabajo y yo en https://www.electriciankamloops.ca/residential-electrician-Kamloops usamos mucho la función de adjuntar.

    ResponderEliminar
  81. Your website has been bookmarked, and you can count on me to visit it again www.landscapingvictoriabc.ca

    ResponderEliminar
  82. apk mods game,apk download,mods download, apk mods game download, apk mods game online download , android apk mods game free download no ads , Download apk mods game. apkmodsgame.com
    https://apkmodsgame.com/

    ResponderEliminar
  83. Love the blog! Looking forward for more of your articles!
    Septic System Red Deer

    ResponderEliminar