Poner imágenes o videos en los comentarios del blog

Existe una manera muy sencilla para que nuestros lectores puedan poner una imagen o video en los comentarios de nuestro blog.

Claro que para ello nosotros debemos insertar un código dentro de nuestra plantilla para que este truco de resultado y así nuestros lectores puedan hacerlo.

Este truco lo hizo el potro y me pareció baste útil y fácil de realizar.

Lo primero que deben tener en cuenta es que este truco se tiene que utilizar con moderación o nuestro blog se resentirá por el exceso de carga y tardará en mostrarse la entrada en cuestión. Recuerden que este truco solo funciona en las entradas individuales.

Dicho esto, sigamos con el truco. Primero entren en plantilla, edición html, y antes de  </body> peguen este script:

<script>
//<![CDATA[
// Insertar imágenes y videos en los comentarios (ciudadblogger.com)
function InsertarImagenVideo(id) { 
var IDelemento = document.getElementById(id),
sustituir = IDelemento.innerHTML;
sustituir = sustituir.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='img-comentarios' src='$1'\/>");
sustituir = sustituir.replace(/\[video\]https:\/\/www\.youtube\.com\/embed\/(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$1'><\/iframe>");
sustituir = sustituir.replace(/\[video\](https:\/\/youtu\.be\/|https:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/player\.vimeo\.com\/video\/)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='http://player.vimeo.com/video/$2'><\/iframe>");
document.getElementById(id).innerHTML = sustituir;} InsertarImagenVideo('comment-holder');
//]]>
</script>
<style>
<!--
#comment-holder .img-comentarios, #comment-holder i[rel="image"] {
max-width: 450px;
width: auto;
height: auto;
display: block;
border: 5px solid #FFF;
margin: 0 auto;
padding: 0;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); 
}
#comment-holder .vid-comentarios {
width: 450px; 
height: 253px; 
display: block;
margin: 0 auto;
padding: 0;
border: 5px solid #FFF; 
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); 
}
-->
</style>

Con esto, los que comenten podrán insertar un video o una imagen con tal solo poner la url del video o la imagen en sus comentarios, poniendo tan solo este código:

[img]URL de la imagen[/img] para imagen, y

[video]URL del video[/video] para video.

Lógicamente deberán reemplazar la url del video o la imagen por la url del video o imagen que deseen.