Este es un codigo que se me ocurrio cuando comence a crear paginas web usando directamente contenido desde el servidor en donde el contenido esta alojado. La forma que me habian enseñado era mas bien copiar el codigo del sitio, pegarlo en Dreamweaver, modificarlo y luego subirlo nuevamente. Debido a esto tuve mi duda sobre como previsualizar el codigo mientras es creado.
El problema estaba en que el contenido no se visualizaba de forma correcta, asi que aun cuando creaba el codigo, no podia ver el resultado final hasta tanto no se actualizaba en la web. La solucion vino cuando pense en buscar la forma de ver lo que estaba creado. Y siguiendo la misma idea de los editores con la regla «Lo que vez es lo que obtienes«, elabore este codigo que, de cierta forma funciona (en su forma basica) de la misma forma en que funcionaria un CMS como wordpress.
La idea del codigo es la siguiente:
- Guardar la url primaria en una variable, ejemplo: https://tusitio.algo
- Lamar a cada parte del documento html en el que exista contenido multimedia y agregarle la url primaria.
- Hacerlo de forma simple.
Para empezar y hacerlo de forma simple comenzaremos llamando jquery, en mi caso voy a usar la version 2.2.x minimalista.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>Luego de llamar a cdn de jquery, lo siguiente va a ser el código que me permitirá pre-visualizar lo que programo.
- Lo primero va a ser llamar la direccion de nuestra pagina
<script>
$(document).ready(function(){
$masterlink = "https://tusitio.com";
});
</script>- Ya con nuestra variable guardando nuestro sitio, lo primero, por lo menos para mi, es tener acceso a las imagenes. Para esto ponemos este codigo que me permitira ver la imagen.
$("img").each(function(){
if(this){
$urlimg = $(this).attr('src', $masterlink + $(this).attr('src'));
}
});- Asimismo, tener acceso a los videos , el codigo sera algo similar pero con algunas diferencias dependiendo de la situacion.
$("source").each(function(){
if(this){
$videourl = $(this).attr('src', $masterlink + $(this).attr('src'));
}
});
$("video").each(function(){
if(this){
if($(this).attr('src')){
$videosrc = $(this).attr('src', $masterlink + $(this).attr('src'));
}
if($(this).attr('poster')){
$videoposter = $(this).attr('poster', $masterlink + $(this).attr('poster'));
}
}
});
- Accediendo a vinculos para activar la navegacion con el sitio original
$("a").each(function(){
if(this){
$urltesting = $(this).attr({href: $masterlink + $(this).attr('href'), target: "_blank"});
}
});- Permitiendo background-images en etiquetas html por medio de estilo, ya sea estilo inline, interno o externo.
//for div tags with background images
$("div").each(function(){
if($(this).css('background-image')){
$oldlnk = $(this).css('background-image').replace(/^url\(['"]http:\/\/127.0.0.1:\d{5}(.+)['"]\)/, '$1');
$newlnk = $(this).css({'background-image': 'url(' + $masterlink + $oldlnk +')'} );
}
});
//for section tags with background images
$("section").each(function(){
if($(this).css('background-image')){
$sectoldlnk = $(this).css('background-image').replace(/^url\(['"]http:\/\/127.0.0.1:\d{5}(.+)['"]\)/, '$1');
$newlnk = $(this).css({'background-image': 'url(' + $masterlink + $sectoldlnk +')'} );
}
});Y asi sucesivamente por cada parte que necesiten visualizar solo tienen que agregarlo aqui.
Al final el resultado va a ser algo como esto:
<div style="background-image:url(/images/elbackground.jpg); with:100%; height:500px;">
<a href="/lo-que-paso">
<img alt="text alternativo" src="/images/laimagen.jpg" />
</a>
<video src="/elvideo.mp4" autoplay muted loop with="100%"></video>
</div>El resultado una vez renderizada la pagina.
<div style="background-image:url(https://tusitio.com/images/elbackground.jpg); with:100%; height:500px;">
<a href="https://tusitio.com/lo-que-paso">
<img alt="text alternativo" src="https://tusitio.com/images/laimagen.jpg" />
</a>
<video src="https://tusitio.com/elvideo.mp4" autoplay muted loop with="100%"></video>
</div>