Esto lo hacía un pequeño JavaScript que simplemente sustituía la miniatura por su equivalente cuadrado de mayor tamaño (sxxx-c), aprovechando las peculiaridades del sistema de almacenamiento de imágenes de esta nuestra estimada plataforma.
Pero cómo cada uno tiene un gusto, muchos son los que no se conformaban con una imagen cuadrada y requerían de una miniatura rectangular. Esto es lo que vamos a ver hoy, cómo cambiar esas miniaturas por unas más grandes con formato apaisado.
Para ilustrar esto y que comprobéis el resultado antes de tener que seguir leyendo, a la izquierda de este texto podéis ver una Lista de Blogs (Blogroll, gadget Blogger) tal y cómo sale si no cambiamos nada y a la derecha cómo se vería tras aplicar uno de los estilos que más adelante veremos. En los siguientes enlaces también podéis ver una demo en directo funcionando con esa misma Lista de Blogs y con unas Entradas Populares.
Repitiendo lo que vimos en la entrada que mencionaba al principio, lo primero es insertar este código antes de </body>.
Las dos últimas líneas antes del cierre son las que hay que personalizar y hay que incluir una por cada gadget que queramos modificar. Entre los paréntesis (en verde), los datos con los que indicamos qué artilugio queremos modificar y qué ancho debe tener la miniatura. No olvidéis que para que quede más o menos bien, el ancho tiene que ser igual al de la columna dónde lo vayamos a poner, que en este caso es el de la sidebar de la plantilla que usé para las pruebas.
<script type='text/javascript'>
function redimin(id,size){
var artilugio = document.getElementById(id);
var sustitucion = artilugio.innerHTML;
artilugio.innerHTML = sustitucion.replace(/s72-c/g,"s"+size+"-c");
var imagenes = artilugio.getElementsByTagName("img");
for(var i=0;i<imagenes.length;i++){ imagenes[i].width = size; imagenes[i].height=size; }
}
redimin("PopularPosts1",220);
redimin("BlogList1",180);
</script>
function redimin(id,size){
var artilugio = document.getElementById(id);
var sustitucion = artilugio.innerHTML;
artilugio.innerHTML = sustitucion.replace(/s72-c/g,"s"+size+"-c");
var imagenes = artilugio.getElementsByTagName("img");
for(var i=0;i<imagenes.length;i++){ imagenes[i].width = size; imagenes[i].height=size; }
}
redimin("PopularPosts1",220);
redimin("BlogList1",180);
</script>
El primer dato es el ID (identificador) con el que Blogger ha denominado el gadget al instalarlo. El segundo el ancho (medido en px) que queremos para la miniatura y que en un principio, si no hiciéramos nada más, será cuadrada.
Para encontrar el ID hay varias formas, pero quizás la más fácil es buscando en el código en nuestra plantilla (sin expandir artilugios) una parte en la que aparece un trozo cómo este:
Las palabras mágicas son esos widget que veis y que son precisamente los gadgets que hemos ido añadiendo a nuestro blog desde el principio de los tiempos usando el apartado Diseño. Podéis ver como aparece id='HTML1', id='PopularPosts1', id='BlogArchive1', id='BlogList1'... Esos son los ID que necesitamos.
<b:section-contents id='sidebar-right-1'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts'/>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts'/>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'/>
Las palabras mágicas son esos widget que veis y que son precisamente los gadgets que hemos ido añadiendo a nuestro blog desde el principio de los tiempos usando el apartado Diseño. Podéis ver como aparece id='HTML1', id='PopularPosts1', id='BlogArchive1', id='BlogList1'... Esos son los ID que necesitamos.
¿Y cómo transformamos esas miniaturas cuadradas en otras rectangulares, redondas u ovaladas? Pues con CSS, como no.
Si no hemos toqueteado el estilo de los gadgets bastará con añadir unas pocas propiedades a las ID que anteriormente hemos localizado. Estas propiedades son básicamente asignar un display:block;, limitar el alto de la clase que controla la miniatura (.item-thumbnail) y luego "subir" un poco la imagen en sí para que muestre la parte central. Esto último atacando directamente a la imagen:
<style type='text/css'>
.PopularPosts .item-thumbnail {
display:block;
margin: 0 5px 5px 0;
height: 100px;
overflow: hidden;
}
.PopularPosts .item-thumbnail img {
position:relative;
top:-80px;
}
</style>
.PopularPosts .item-thumbnail {
display:block;
margin: 0 5px 5px 0;
height: 100px;
overflow: hidden;
}
.PopularPosts .item-thumbnail img {
position:relative;
top:-80px;
}
</style>
Tal como he puesto el código (entre etiquetas style), está preparado para insertar justo antes del anterior script. Si queréis ponerlo en la parte CSS del blog sólo tendréis que quitarle la primera y última línea.
La razón de ponerlo seguido es para facilitar el borrado de estas modificaciones de una tacada si alguna vez nos aburrimos de este formato, pero lo correcto sería ponerlo en la parte de hoja de estilo.
Para conseguir las miniaturas redondeadas las propiedades son muy parecidas y lo principal es añadir un border-radius con un valor más grande que el ancho de la imagen. En este caso por la limitación de altura de .item-thumbnail, generaremos un semicírculo:
<style type='text/css'>
.BlogList .item-thumbnail {
display:block;
margin: 5px 5px 5px 0;
height: 100px;
overflow: hidden;
}
.BlogList .item-thumbnail img {
padding: 0;
position:relative;
-webkit-border-radius: 300px;
-moz-border-radius: 300px;
border-radius: 300px;
}
</style>
.BlogList .item-thumbnail {
display:block;
margin: 5px 5px 5px 0;
height: 100px;
overflow: hidden;
}
.BlogList .item-thumbnail img {
padding: 0;
position:relative;
-webkit-border-radius: 300px;
-moz-border-radius: 300px;
border-radius: 300px;
}
</style>
Por supuesto las clases son intercambiables y podéis aplicar el efecto redondo a las Entradas Populares o el rectangular a la Lista de Blogs. Por extensión se puede aplicar a cualquier gadget que tenga miniaturas con sólo localizar su ID y la capa contenedora para poder modificar el estilo.
¿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.
Y muchos más artículos interesantes si nos sigues en...
Se agradece el aporte. Pero te informo que con IE8 las miniaturas siguen viendose cuadradas. Aunque con Firefox sí las veo rectangulares.
ResponderEliminar(D)Efectos colaterales del puñetero Explorer. Voy a ver si tiene arreglo. Gracias
EliminarEsto funciona en todo espero les sirva de ayuda:
EliminarAtt. Axel Cardenas.
<script type='text/javascript'>
//<![CDATA[
for(var a=document.getElementById("PopularPosts1").getElementsByTagName("img"),b=0;b<a.length;b++)a[b].src=a[b].src.replace(/\/s72\-c/,"/s300");
//]]>
</script>
Gracias Hitler. Es una forma abreviada de hacer lo mismo. Yo intentaba hacer un código genérico para que sirviera para distintos gadgets y tamaños de miniaturas.
EliminarDe todas formas el problema de bmistemplates04 era lo de las imágenes redondas y eso seguirá sin arreglarse pues depende de la versión de IE con la que se vean las páginas.
http://stackoverflow.com/questions/635851/support-for-border-radius-in-ie
Eliminartambién puede servir de ayuda
¿Eso quiere decir que border-radius funciona en IE9 tal cual, pero sólo si se pone la META de compatibilidad?
Eliminar¡Hola qué tal Oloman!,
ResponderEliminarSería interesante aplicarlo a las miniaturas de los resúmenes en los posts, sobre todo la rectangular ya que la circular tendría sus limitaciones, ya sabes.
Saludos ;)
Karla, el truco es simplemente hacer un contenedor de imagen más pequeño, con dimensiones rectangulares y con un overflow:hidden. De esa manera encuadramos una parte de la imagen. Luego movemos esta con position, top, etc. y ya tenemos una porción más o menos centrada. El problema me acaban de decir que está en IE... como siempre.
EliminarSólo tienes que probarlo y salvo que la miniatura lleve un ancho mínimo en el CSS (min-width), verás que te funcionará.
ResponderEliminarRecientemente estoy usando el gadget de entradas populares de Blogger, pero la primer letra del título y del resumen están sobre puestas a la imagen, puede ver en mi blog lo mal que queda jedicerocool.blogspot.com
ResponderEliminarYo lo único que quiero por el momento es arreglar ese pequeño problema, ¿podría hacerse?
Busca esto en tu plantilla:
Eliminar.sidebar li {
text-indent: -15px;
line-height: 1.5em;
}
Ese -15px es el culpable. Multiplícalo por cero y verás ;)
Gracias amigo Oloman, ya quedó de 10. Aunque me gusta el truco de esta entrada, recién lo voy a aplicar cuando termine de re-diseñar mi blog. Mientras me quedo con el gadget de entradas populares de Blogger "normal", pero por lo menos quería que se vea decente.
EliminarHola, he aplicado este truco sin a los gadgets que emncionas, pero quería saber si se puede aplicar en este gadget que está en ciudad blogger
ResponderEliminarhttp://ciudadblogger.com/2011/05/ultimas-entradas-por-categorias-con.html
espero puedas ayudarme, porque lo he intentado y no he podido, ni el mismo potro :(
Si se usan imágenes alojadas en Blogger (Picasa) y ID que las pueda identificar, se pude aplicar exactamente igual. Sólo tendrías que localizar esa ID, pero no vi el artilugio en tu blog para comprobar si se genera alguna.
Eliminarjajajaja si puedo compadre
Eliminargracias creo que haré mi propio blog de tontos también jejeje gracias muchas gracias
Amigo oloman crees que esto tambien se podra hacer sin javascript solo usando condicionales como data:post.firstImageUrl ?
ResponderEliminarPienso que no, porque esto es algo para gadgets y creo que data:post.firstImageUrl sólo funciona si está dentro de la plantilla dentro del artilugio que monta las entradas.
EliminarHola Oloman, me da un error en el script al querer guardar la plantilla: Element type "imagenes.length" must be followed by either attribute specifications, ">" or "/>".
ResponderEliminares en esta parte
for(var i=0;i<imagenes.length;i++){ imagenes[i].width = size; imagenes[i].height=size; }
ya había comentado en otra entrada del blog por mi problema, es que quiero hacer más grandes las imágenes del slideshow y esta entrada me cayó perfecta
¿que puedo hacer? gracias :)
jejeje creo que ya lo arreglé añadiéndole el //[CDATA[ :D
Eliminarbueno, intenté realizarlo con éxito en las entradas populares pero en el slideshow de blogger no funciona :(
qué puedo hacer? éste es el blog: milfrases.org
Acabo de remitirte aquí desde otro comentario que dejaste casi igual en otro post :)
EliminarPrueba con redimin("Slideshow1_slideshow",180);
Gracias por tu respuesta Oloman, se me había olvidado poner que ya había intentado con eso y tampoco funcionó jeje xP
EliminarEse slideshow es bastante patatero. Pienso que si con eso no se modifica, no merece la pena meterse más a fondo con él y mejor usas cualquiera de los cientos que hay disponibles por ahí.
Eliminarjaja bueno pues toca! :)
Eliminar¿me recomiendas uno igual de sencilo y que no pese mucho? ;)
Yo sólo he publicado uno, pero tiene la ventaja de que es el más sencillo de todos (probablemente) ;)
Eliminar¡ME ENCANTA! :D creo que es justo lo que buscaba! ;)
Eliminary una última pregunta si se puede jeje :)
¿se lo podrá hacer de forma automática que lea el feed del blog para que se actualice de forma automática tal como lo hace el del problemon? jejeje
Por que la verdad me encanta ese slider tuyo :D pero quisiera que sea automatizado tal como que lea un feed y se actualice solito
Estoy en ello, pero apenas tengo tiempo libre para publicar la explicación de cómo implantarlo. Suscríbete a las entradas (abajo de esta página) y te enterarás tan pronto lo haga.
Eliminar¡Genial! :D
EliminarYa estoy suscrito desde hace fuu! jejeje me voy a suscribir tambien en la otra página del slider :)
Esperaré con ansias ;)
En mis post, comunmente tengo imagenes alargadas (rectangulares) de manera que en la vista miniatura de las entradas populares siempre se ven cortadas de los lados debido a que dicha vista es escuadrada, si aplico lo que expones acá lo que logro es estirar dicho cuadrado en hancho (o tal vez es que estoy aplicando mal tu codigo) Si lo ultimo no es el caso, ¿existe alguna forma de hacer una replica de proporciones exactas de la imagen rectangular original pero a una escala mas pequeña?
ResponderEliminarSaludos y excelente Blog!
El problema de las imágenes no cuadradas es que todas las que uses deberían tener la misma proporción ancho/alto. De lo contrario, para igual ancho, los altos serían distintos y no quedaría bien estéticamente hablando.
EliminarComo solución fácil prueba con el último código CSS pero sin el border-radius.
no pude... :( nunca he usado eso... no me salio. No sabes alguna pagina donde sea para super principiantes, estoy perdida...
ResponderEliminarayyy y una preguntita, sabes como elegir las entradas, de la lista de las entradas populares? gracias :)
ResponderEliminarSólo tienes que leer las instrucciones que se dan y seguirlas al pie de la letra. Si tienes alguna duda o problema concreto, pregúntalo aquí mismo. Y sobre la elección de las entradas que muestra el gadget, no puedes. Automáticamente salen las más visitadas y esa es la gracia. Para hacer otro tipo de relación, mejor usa una lista de enlaces o blogroll y tú misma añades las direcciones que te interesen a mano.
Eliminar¿Y se puede aplicar este estilo a entradas recientes?
ResponderEliminarSaluditos!!
Hay una parte del blog que lo explica. Sólo tienes que localizar la ID que Blogger le pone a ese gadget y cambiarla en el código.
EliminarHola Oloman!!! Precisamente buscaba algo así para el blog, de hecho ya he puesto los códigos en el blog y funciona, no tengo idea de CSS ni de HTML, pero esto de toquetear me encanta, cualquier día se me va el blog al garete, jajajaj.... En fin, pero tengo un problema, soy demasiado perfeccionista, yo uso Chrome y veo las imágenes rectangulares pero...me he dado cuenta que en Explorer se siguen viendo cuadradas y encima descuajaringa el gadget de entradas populares, ni siquiera se ve el título de la entrada. He comparado con otros blogs de referencia que también tiene las imágenes rectangulares y al verlos en Explorer respeta el formato rectangular y se ve perfecto. Podrías ayudarme con esto??? Hay algún código mágico que lo arregle?
ResponderEliminarGracias por explicarlo todo tan clarito!
Saludos
Mami
Cose y Calla
Lo primero de todo, para evitar que un día se te vaya todo al garete, no olvides hacer copias de seguridad de tu plantilla de cuando en cuando.
ResponderEliminarLo segundo, tal y como lo tienes prueba con esto en .PopularPosts .item-thumbnail
overflow: hidden;
height: 49px;
width: 72px;
Luego agranda las miniaturas y ajusta esas medidas, pero ya me dijo alguien que en ocasiones esto no funciona bien en Explorer.
Se pueden poner en horizontal sólo con configurarlo así mediante CSS. El problema es que ese gadget no se puede poner en cualquier sitio. Debe ir siempre como gadget y precisamente por eso no podrás ponerlo en una página estática. Para simular lo que se ve en el enlace que me remites quizás se pueda añadir y luego mover el gadget al bloque encima de las entradas.
ResponderEliminar