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.

<!-- SUMARIOS AUTOMATICOS 2 -->
<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:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary-&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary-<data:post.id/>&quot;);</script>
<a class='leermas' expr:href='data:post.url'>Leer más &#187;</a>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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.

¿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

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter