Modificaciones al sistema de sumarios 2 | Oloblogger 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 ...

26 de octubre de 2009

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
Copy URL

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

follow us in feedly

18 comentarios :

  1. 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!

    ResponderEliminar
  2. Hola Mr. Efe ¿probaste con esto?

    ResponderEliminar
  3. 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

    ResponderEliminar
  4. enhorabuena por el premio¡¡¡¡

    ResponderEliminar
  5. 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¡¡¡¡

    ResponderEliminar
  6. 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.

    ResponderEliminar
  7. Hola!! Tengo una pregunta.E visto que en tu blog las imagnes se adaptan solas al cuadro del sumario. Me podrias decir como???
    Desde ya muchas Gracias!!

    ResponderEliminar
  8. ¿Adaptación automática? Sólo conozco dos sistemas, el que lleva el script original, que simplemente redimensiona las imágenes a un ancho y alto determinado, o esta otra que precisamente explico aquí y que lo que hace es mostrar una sección de la imagen original. Esto se hace con la clase que he llamado "recorte"

    ResponderEliminar
  9. Si lo que requiero es implantar el sistema de sumarios pero que no salgan imágenes en miniaturas, solo el texto de la entrada, qué modificaciones debo hacer? Gracias de antemano!

    ResponderEliminar
  10. Para eso, tendrías que quitar las siguientes líneas del script.

    if(img.length>=1) {
    imgtag = '<div class="miniaturas" style="background:url('+img[0].src+') no-repeat scroll 50% 40%;"></div>';
    summ = sumario_img;
    }

    Si hace esto y quieres aligerar el código, también puedes quitar toda la parte del estilo porque sólo sirve para dar formato a las imágenes.

    ResponderEliminar
  11. Super!!!, funcionó pero quitando solamente lo que hay entre las comillas luego de imgtag = 'xxxxx'; ya que al suprimir lo que me indicas no funcionaba el sistema. Muchas gracias de nuevo:)

    ResponderEliminar
  12. Antes de escribirlo para tí, lo probé y funcionaba, pero como también funciona así, pues adelante.

    ResponderEliminar
  13. Hola!! hola Oloman!! tango una pregunta y siquisiera ver el primer post entero y los demas resumidos??

    ResponderEliminar
  14. Pues creo que se hace con una nueva variable que Blogger incluyo no hace mucho y que se llama algo así como FirstPost, pero todavía no me he metido a ver cómo funciona.

    ResponderEliminar
  15. Creo que de mometno me quedaré con éste. Ya que puedo tener las imagenes un poco mas grandes. Antes tenia un sumarios que dejaba el primer post entero que estaba en la entrada( sumarios rapidos para blogger:seis versiones) Luego vi otra entrada donde mencionabas el aumento de esas imagenes de los resumenes (Miniaturas para sumarios más grandes. Blogger) pero me daba problemas porque me salen la grande y la pequeña juntas...De momento me quedo con ésta opción. si se pudiera arreglar lo de las imagenes del otro caso lo volvería a colocar.

    Menos mal que tengo templates guardados cronologicamente y señalando que ha sido lo nuevo añadido. Y así saber cual cargar cuando no se que borrar... Porque ultimamente le he cojido gustillo a esto de modificar la plantilla :)

    Gracias por compartir todos estos útiles conocimientos :D

    ResponderEliminar
    Respuestas
    1. Ah, vale. Hace un rato te contesté en esos otros posts diciéndote precisamente que lo veía todo bien :) No sabía entonces que lo habías arreglado finalmente con esto. Enhorabuena.

      Eliminar
    2. sip, creo que te he escrito en muchos post sobre lo mismo en un cortisimo intervalo de tiempo. Me piqué mucho con el tema . Se juntaron unos cuantos comentarios :S. Siento si te he hecho dar mucha vuelta de aqui para alla, es que me ponía a trastear,comentaba, entonces encontraba otra entrada tuya de sumarios y trasteaba mas... Hasta que dí con la definitiva. :D

      gracias!! Así se queda definitivamente, ya que he comprobado que me resulta mas útil como está ahora que con la primera entrada desplegada :)

      Eliminar