Modificaciones al sistema de sumarios 2
Al hilo de esto de poner un enlace en las miniaturas de los sumarios, se me ocurrió que quizás habría otra manera de mostrar esa imagen sin que fuera necesario redimensionar con la consecuente deformación de las imágenes no cuadradas. Estuve haciendo pruebas con la propiedad CLIP de CSS, pero no conseguí un resultado satisfactorio, así que ideé una nueva chapucilla.
Se trataría de mostrar sólo una sección de la imagen original del post, del alto x ancho que hayamos designado, utilizando un OVERFLOW:HIDDEN. Cómo de esta forma siempre sale la parte superior-izquierda, le añadimos un desplazamiento aprovechando POSITION y por último, marcamos un mínimo para las imágenes más pequeñas. Por cierto, para el caso de las imágenes con medidas menores de los mínimos establecidos, la distorsión seguirá produciéndose, pero al menos dejamos la mayoría con un aspecto mejor.
Como la opción del script que muestra la imagen centrada encima del texto, creo que no la usa nadie, también he reducido el código eliminando esa opción. El tamaño de la miniatura tampoco se controla ya desde el script, sino que lo hará la parte del estilo. De esta manera, para implantar un sistema de sumarios con imagen flotante, enlace en la imagen y miniatura (realmente una parte de la imagen) no distorsionada, tendremos que utilizar este código en lugar del anterior.
Primera parte a colocar antes del </head>. Si ya teníais este hack, ahora se trata de sustituir.
<style type='text/css'>
.miniaturas {
position:relative;
float:right;
width:100px; /* Ancho del contenedor de la imagen */
height:100px; /* Alto del contenedor de la imagen */
margin:0px 0px 0px 10px;
border:1px solid #aaaaaa;
overflow:hidden;
}
.recorte {
position:absolute;
top:-20%; /* Desplazamiento vertical para comenzar recorte */
left:-20%; /* Desplazamiento horizontal para comenzar recorte */
}
.recorte img {
min-width:120px; /* Ancho mínimo a mostrar. WIDTH + LEFT */
min-height:120px; /* Alto mínimo a mostrar. HEIGHT + TOP */
}
</style>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1) {
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = sumario_noimg;
if(img.length>=1) {
imgtag = '<div class="miniaturas"><div class="recorte"><img style="background:none;" src="'+img[0].src+'" alt=""/></div></div>';
summ = sumario_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
sumario_noimg = 340;
sumario_img = 250;
//]]>
</script>
Las dos últimas variables sirven para indicar el número de caracteres a mostrar en el sumario:
sumario_noimg: Número de caracteres a mostrar para post sin imágenes.
sumario_img: Idem para post con imágenes.
La segunda parte, la llamada al script es idéntica a la que hacíamos anteriormente, por lo que no habrá que modificarla. Si todavía no la teniais, se trata de cambiar <data:post.body> por todo esto:
<div expr:id='"summary-" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary-<data:post.id/>");</script>
<a class='leermas' expr:href='data:post.url'>Leer más »</a>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
Los cambios se pueden apreciar desde Vista previa para ver si está todo correcto antes de Guardar.
Si quereis compaginar esta modificación con la que vimos ayer de incluir un enlace en la imagen, sólo teneis que incorporar lo que allí se explica.
NINGUN DERECHO RESERVADO
6 comentarios:
Puede ser que me vaya de tema, pero no encuentro un post, o en su defecto, en otras paginas encontre pero nada me funcionó.
Lo que estoy buscando es insertar flash a mi web, lo primero que hice fue buscar un hosting, el cual me da la URL del archivo .SWF que subí, luego busqué el codigo para embeberlo en mi página, lo encontré tambien e hice las modificaciones correspondientes.
Ahora tengo el codigo, que se que es correcto,
y lo que hago es insertarlo en un gadget html, probe en diferentes lugares, en la cabecera, a los costados, e incluso en una entrada, pero nada. Cuando guardo y abro la pagina, me aparece el espacio en blanco, y si hago click derecho es como si estuviera el video flash pero no se ve. espero me puedas ayudar!
saludos!
Hola Mr. Efe ¿probaste con esto?
Hice paso paso lo que dice en el post, pero nada funciona, ya se me quemo la cabeza, gracias por responder.
http://1mas1es3.blogspot.com/
fijate que en el cuadro blanco tendria que estar la animacion, en el cual intente poner 521552 aniamciones diferentes, y lo probé en IE, Google Chrome y Mozilla Firefoz
enhorabuena por el premio¡¡¡¡
A ver si nos pasamos más por aquí y nos ponemos al día en tecnología que somos unos negados, no sabemos ni poner el simbolo para votar la entrada en bitacoras ;P
Pues ale ya tienes un voto más en Bitacoras y enhorabuena por el concurso 20 blogs¡¡¡¡
dirty saludos¡¡¡¡
Hola Ordago, hola Dirty.
Hay un post sobre cómo poner un aviso al final de cada post que te sirve para lo de Bitácoras, aunque me parece que llegamos algo tarde. Gracias.
PUBLICAR UN COMENTARIO