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>
!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.
Hola Oloman ;)
ResponderEliminarEsta solución la llevaba esperando media vida... me habría ahorrado cienes de palabras, jeje...
Muchas gracias por seguir regalando sabiduría ;)
Un saludo.
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
EliminarJeje... me lo tomaré como un cumplido... y ten por seguro que a la próxima vengo con las de pedir, que tengo varias ;)
EliminarQué 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.
ResponderEliminarHola buenas,
ResponderEliminarcon 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
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
EliminarHola E&E. Evidentemente algo hay distinto en esos dos blogs
EliminarPon el código en el que no te funciona y dime cual es su dirección.
hOLA Buenas,
Eliminarya 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
Pues listo ;)
EliminarHola Oloman una pregunta...este tip puede hacer que el blog cargue más lento? me gustaría ponerlo pero tengo esa duda.
ResponderEliminarUn saludo:)
Evidentemente sí, MakeUp-Finds. Todo lo que añadas al blog suma peso.
EliminarLo que ocurre es que este código concreto no es muy largo ni hace tareas pesadas, así que no creo que ralentice mucho.
Gracias por aclararlo, un saludo;)
EliminarEsto 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¿Cuál era la dirección de tu blog Yurika?
EliminarLo estoy haciendo en este blog de pruebas http://dinamodeprueba2.blogspot.com.co/
EliminarEn 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.
EliminarGracias, mira que si funcionó, pero tengo diferenciados los comentarios de los autores, y en esos no se cambian, como lo tengo aquí
Eliminarhttps://dinamodeprueba2.blogspot.com.co/2014/02/entrada-comillas.html
Hay alguna forma de agregar eso también, o puedo poner el script dos veces?
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
EliminarSeguro 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.
EliminarPues 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.
EliminarAhora me toca poner los estilos de los comentarios como los tenía
Una cosa..
ResponderEliminarExiste la posibilidad de auto re-dimensionar todas las imágenes y videos un tamaño máximo?
La respuesta en general es sí y ya dependiendo del caso concreto habrá que usar un código u otro.
EliminarYa 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.
Ok, Ya te he contestado... Estaba mail el mail.
EliminarHola 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.
ResponderEliminarPRegunté 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
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?
EliminarCon 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.
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 :
ResponderEliminarhttp://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
Vi que ya tienes contenido en esos enlaces que me enviaste para repasar ¿Ya solucionaste el problema?
Eliminarmuy bueno! 😌☝ lo probare esta tarde, osea...solo colocar ese script en la etiketa body...antes del cierre de etiketa?
ResponderEliminarAsí es ¿qué tal te fue?
Eliminartodabia no lo probe, me interesaria sobre la puesta de video...kiza con solo retirar los formatos de imagenes ya quede solo apta para videos :)
ResponderEliminarPuedes quitar lo de las imágenes o puedes dejarlo. Total... si no lo saben, casi nadie pone imágenes en los comentarios.
EliminarQue 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
ResponderEliminarExcelente tu aportación oloman.
ResponderEliminarGracias.
Muy buenas Oloman, espero que ese tiempo que te falta para dedicarle al blog sea muy bueno para tí.
ResponderEliminarEsta 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.
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
ResponderEliminarhola, estas vivo ?
ResponderEliminarReproducir los videos en este blog
ResponderEliminarNose y no me sale comentar con imagenes y videos en el blog. estoy en proceso de mi tesis y esto no puedo solucionarlo
EliminarHola aún llevas el blog??
ResponderEliminarPrueba:
ResponderEliminarhttps://pijamasurf.com/2017/10/que_es_la_dopamina_digital_y_como_se_convirtio_en_la_droga_mas_popular_y_adictiva_del_mundo/
https://i.imgur.com/fMY7lkC.jpg
Este comentario ha sido eliminado por el autor.
ResponderEliminarAsia is a best place of real beauty. The term “Match Perfect Mail” suggests that if you specify your standards for your excellent match, you can search an online dating site, find your perfect partner and bring her home! But if you want to increase your odds for true pleasure, you’ll need to take a lot more time and energy to get to know a partner and make informed choices about this very important decision. This is what dating is all about. Love and marriage is the most important and emotional decision in life. A person can compromise in his/her career but can’t in love life. We live for it and die for it. Half of the problems are gone away when your better half pampers you. But nowadays no one wants to get stuck in the traditional married life. If you are looking loving, loyal, compatible life pretty asian girls partner then visit our online asian dating site Website. We always provide genuine people.
ResponderEliminarSomos un prestamista legítimo y de buena reputación. Prestamos dinero a personas que necesitan apoyo financiero, otorgamos préstamos a personas que tienen un mal crédito o que necesitan dinero para pagar sus facturas para invertir en negocios. Entonces, ¿busca un préstamo urgente? No tiene que preocuparse porque está en el lugar correcto, ofrecemos préstamos a una tasa de interés baja del 2%, por lo que si necesita un préstamo, solo debe comunicarse con nosotros a través de esta dirección de correo electrónico: ubabank575@gmail.com
ResponderEliminarO envíenos un mensaje de texto o WhatsApp: 2349011342173
INFORMACIÓN DE SOLICITUD DE PRÉSTAMO NECESARIA DE USTED.
1) Nombres completos: ............
2) Género: .................
3) Edad: ........................
4) País: .................
5) número de teléfono: ........
6) Ocupación: ..............
7) Ingresos mensuales: ......
8) Cantidad de préstamo requerida: .....
9) Plazo del préstamo: ...............
10) Propósito del préstamo: ...........
Gracias
Buy Organic Traffic and find out what so many already know ... This traffic is highly targeted by keywords and geography. And, did we mention it also improves your Alexa Ranking as a byproduct? for more information please visit us at: https://www.TargetedWebTraffic.com
ResponderEliminarMe complace escribir esto aquí porque hay muchas estafas si realmente necesita ayuda sin ser estafado, ya que esta es la compañía de préstamos adecuada para contactar: Correo electrónico: Mrfrankpoterloanoffer@gmail.com
ResponderEliminar¿Estás económicamente deprimido? ¿Buscando un préstamo? Ofrecemos préstamos personales, préstamos comerciales, préstamos estudiantiles, préstamos para automóviles y préstamos para pagar facturas de $ 5,000 a $ 10,000,000.00, dólar / euro, a una tasa de interés del 2%. Si está interesado en obtener un préstamo, por favor, vuelva para obtener más información. Contáctenos por correo electrónico: mobillfunding@hotmail.com o agréguenos en whatsApp: +16468789104
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarGracias
ResponderEliminaranda genial!!!! para editar el codigo del blog y buscar etiquetas es bueno guardar todo el script del blog en un artivo txt pero en formato rtf y abrirlo con wordpad
ResponderEliminarQué sucede Oloman con el widget "lista de blog" que ni guarda ni elimina.
ResponderEliminarHa bloqueado Google "guardar", lo ha inhabilitado o se trata de un error pasajero?
Muchas gracias por tu ayuda siempre
Oloman Solo quería avisarte que parece que hoy se ha restablecido al menos en mi caso.
ResponderEliminarMuchas gracias como siempre y disculpa la intromisión en un tema diferente pero no sabia como comunicarme mejor.
Este post es buenísimo.
Saludos
great job,go ahead
ResponderEliminarclipping path
Sin reservas, recomendaría trabajar con Frank Loan Services, si está buscando una hipoteca de vivienda. Hablé con muchos corredores mientras compraba mi préstamo hipotecario en línea.Desde el primer contacto, me di cuenta de que es el tipo de persona en quien puedo confiar para ayudarme a tomar la mejor decisión para mí y mi familia.Ofrecen plazos tanto a corto como a largo plazo. préstamo dentro de 1-30 años de duración del préstamo, con o sin garantía pero sin verificación de crédito y sus servicios son rápidos, confiables y confiables porque han sido probados y confiables por mí a diferencia de otras compañías. Sus servicios incluyen préstamos de refinanciamiento, préstamos para camiones, préstamos para educación, préstamos para estudiantes, préstamos personales, préstamos para automóviles, préstamos para consolidación de deuda, préstamos comerciales, préstamos garantizados y no garantizados, préstamos hipotecarios, préstamos hipotecarios y ofrecen préstamos a una tasa de interés muy asequible de 2 El% de las personas interesadas deben ponerse en contacto con él por correo electrónico: k.frankloans@gmail.com
ResponderEliminarDo you dream of turning your Data Technician skills into a thriving career working for some of the premier clients within the telecom industry
ResponderEliminarContinuaré haciendo crecer una cartera ahora y lo he estado haciendo de manera constante y exitosa mediante la inversión con Alex Smith, pude ganar $ 20,000 con $ 2000 en 1 semana negociando con él, ahora es el mejor momento para crecer y construir una mejor cartera con anticipación del aumento del precio de bitcoin y otras criptomonedas, insto a los inversores a encontrar guías de inversión adecuadas para ayudarlos a obtener ganancias diarias, semanales o mensuales Alex Smith, en mi experiencia, es la mejor guía comercial y administrador de cuentas que he encontrado y 'Todos pueden comunicarse con él en WhatsApp +13045044292 o por correo electrónico: livetrading3602@gmail.com
ResponderEliminarhttps://t.me/joinchat/S314FoZU-2kazF9s
Muchas gracias pero no me funciono creo que llege muy tarde ..
ResponderEliminarBienvenido a NORTION LOAN CONSULTANT
ResponderEliminarDeje de sufrir por obtener mucho de sus instituciones sociales y libérese de los estafadores. Obtenga su préstamo gratis de NORTION LOAN CONSULTANT a la mejor tasa en todas las transacciones de préstamo, es MUY FÁCIL, RÁPIDO y SEGURO
Información del contacto:
Correo electrónico: nortionloanconsultant@gmail.com
Número de teléfono: +1 409210 4274
Whatsapp: +1 409210 4274 (SOLO TEXTO)
Facebook: préstamo Nortion
Instagram: consultor de Nortion Loan
Gorjeo: @nortionloanconsultant
Atentamente
Bienvenido a NORTION LOAN CONSULTANT
ResponderEliminarDeje de sufrir por obtener mucho de sus instituciones sociales y libérese de los estafadores. Obtenga su préstamo gratis de NORTION LOAN CONSULTANT a la mejor tasa en todas las transacciones de préstamo, es MUY FÁCIL, RÁPIDO y SEGURO
Información del contacto:
Correo electrónico: nortionloanconsultant@gmail.com
Número de teléfono: +1 409210 4274
Whatsapp: +1 409210 4274 (SOLO TEXTO)
Facebook: préstamo Nortion
Instagram: consultor de Nortion Loan
Gorjeo: @nortionloanconsultant
Atentamente
Me faltan palabras para la increíble ganancia que me ayudó a obtener en solo una semana con la estrategia de opciones binarias de bitcoin.Lo siento mucho, dudé al principio, invertí $ 200 y gané $ 2,500 en solo una semana, y seguí invirtiendo más, hoy lo estoy financieramente exitoso, puede contactarlo por correo electrónico: carlose78910@gmail.com
ResponderEliminarVía whatsapp: (+12166263236)
Te aconsejo que no lo dudes. Él está bien.