JMiur [E]

Agregar una imagen en una entrada de Blogger es sencillo, la seleccionamos, hacemos un par de clicks y voilá, ya queda colocada pero, las cosas se complican un poquito cuando no nos conformamos con lo que el servicio nos ofrece y ahí surgen las preguntas de por qué no se ve cómo uno quiere o por qué el tamaño no cambia pese a que le ponemos propiedades CSS en la plantilla.

La explicación es fácil, como todo sistema, Blogger nos permite agregar imágenes y nos da una serie de alternativas pero no puede darnos todas, sólo aquellas que ellos suponen que son las normales; si queremos salirnos de esos patrones no queda otra cosa que editar el código HTML y modificarlo para lo cual, necesitamos entenderlo aunque sea mínimamente.

Esto puede ser un problema doble ya que, el código insertado, varía con nuestras opciones pero también varia según el tipo de editor que estemos usando, dirá una cosa si usamos el editor normal y dirá otra si usamos el editor de Blogger Draft o el editor actualizado.

Desde el editor tradicional, una vez que seleccionamos la imagen, podemos indicarle la forma en que se alineará: Ninguno, Izquierda, Derecha, Centrar y el tamaño que deseamos: Pequeñas, Medio, Grandes y el código insertado, si elegimos Centrar/Grandes será algo así:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://......./s1600/imagenDEMO.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://......./s400/imagesDEMOBASE.jpg" alt="" id="BLOGGER_PHOTO_ID_0000000000000000000" border="0" /></a>
La imagen insertada es un enlace que tiene un evento llamado onblur que vaya uno a saber para qué lo usa Blogger y apunta a la imagen en su tamaño real ya que, siempre, lo que insertamos en una entrada es una miniatura. Al hacer click en la imagen, esta se abrirá en la misma ventana así que si queremos que se abra en otra ventana, deberemos agregarle el atributo target. Podríamos entonces, simplificar ese enlace y dejarlo así:
<a href="http://......./s1600/imagenDEMO.jpg" target="_blank">
La etiqueta IMG es la que muestra la miniatura seleccionada y tiene varios atributos.

border="0" se coloca porque, por defecto, cualquier imagen que es un enlace tiene un borde pero siempre es mejor definirlo con CSS y quitarlos de manera global añadiendo la definición a la plantilla:

a img {border: none;}

alt="" está vacío así que si queremos agregar una descripción, debemos hacerlo manualmente
id="" identifica la etiqueta y no tiene ningún uso práctico

La clave de nuestros desvelos es el atributo style ya que es allí donde Blogger agrega una serie de propiedades que son las que pueden volvernos loco. Es que, si en nuestra plantilla definimos propiedades de algún tipo para las imágenes, estas, se sobrescriben en la etiqueta misma. Por ejemplo, si se establecen tamaños con width y height, estos son ignorados y lo que vale es lo que dice la etiqueta, lo mismo ocurre con los márgenes así que, si queremos algo especial, debemos eliminar todo eso y el código quedará reducido a algo así:
<img src="http://......./s400/imagesDEMOBASE.jpg" alt="" />
Sin formato, sin márgenes, sin nada; donde lo único necesario es la imagen en si misma y eventualmente, el enlace si es que nos gusta. El resto, lo podemos definir en el CSS de la plantilla y usar alguna clase; por ejemplo:
<img class="centrada" src="http://......./s400/imagesDEMOBASE.jpg" alt="" />


.post-body img.centrada {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 10px #AA8800 inset;
-webkit-box-shadow: 0 0 10px #AA8800 inset;
box-shadow: 0 0 10px #AA8800 inset;
display: block;
margin: 0 auto;padding: 10px;
}
Algo similar ocurre con el el nuevo editor, cambia el código pero la idea es similar:
<div class="separator" style="clear: both; text-align: center;"><a href="http://......./s1600/imagesDEMO.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="http://......./s400/imagesDEMOB.jpg" width="400" /></a></div>
Han quitado algunas cosas que evidentemente eran inútiles pero, han agregado otras que también son bastante dudosas y ahora, las distribuyen en varias etiquetas.

En este caso, todo esta dentro de un DIV con una clase CSS que nadie usa y que, por lo general no está definida; en el enlace, el atributo imageanchor no sé para que puede servir; en la etiqueta IMG, en lugar de tener definido el tamaño en style, se lo define con los atributos width y heigh que son los que deben eliminarse si se quiere usar alguna clase de CSS especial. Otra vez, todo eso puede simplificarse y quedarnos sólo con la imagen.

Conviene aclarar que todo lo dicho hasta acá es opcional, no hay ninguna necesidad de hacerlo de este modo y los códigos insertados por Blogger, nos gusten o no, funcionan perfectamente y sólo es necesario meterse con ellos si es que queremos hacer algo especial.

47 comentarios:

Odomera  

Yo por costumbre uso el editor antiguo, no me he podido acostumbrar al editor actualizado ya uqe cambia todo!

En cuanto al onblur="... yo lo suelo reemplazar por rel="ibox" (para las ventanas modales iBox) toco el alt="", agrego a veces un title="" y así... Cada vez que inserto una imagen tengo que modificar algo, algún detalle.

Sería interesante aue algún día implementen algo así como un cuadro opcional para los campos alt="" y otras por el estilo pero... lo veo como un sueño... :-|

Algo que noté de un tiempo a esta parte usando el editor antiguo es que al finalizar la operación de subida ya no aparece el botón "Finalizado" o "Finalizar" que antes aparecía. Ahora simplemente me sale un cuadro "en blanco"... ¿Algún bug o sólo a mí me pasa? :O

Muy buen tip lo del CSS, veamos cómo lo aplico ;)

Responder
JMiur  

Odomera:
Lo mismo digo, no me he acostumbrado al nuevo y tampoco me gusta lo que hace con los códigos HTML, suele ser desastroso.

Creo que cada uno ha encontrado la forma de simplificarlo, adaptándolo a sus necesidades. Coincido con eso de que debería haber una opción de ALT así com o TARGET en los enlaces.

Sí. Cuando se termina de subir imágenes, la ventana aparece en blanco. Es raro, me pasa lo mismo de un tiempo a esta parte.

Responder
Patty  

Hola que tal¡

Mi nombre es tania soy administradora de un directorio de webs/blogs, navegando por la red ví tu página y está muy buena, sería genial contar con tu site en mi sitio web y asi mis visitas puedan visitarlo tambien.

Si estas de acuerdo solo escribeme.
tajuancha@gmail.com
Exitos, un beso

Responder
Bonzu Pipinpadaloxicopolis III  

Por ratos también ese cuadro blanco me aparece y aveces ni el código de la imagen subida aparece :-|

Responder
Unknown  

Yo tengo problemas con lo de Div class , por culpa de esto mis imagenes me salen apretujadas una encima de la otra y tengo que quitar el div uno a uno para que se vean normal mente , lo malo que es una lata cuando meto muchas imagenes ,¿ como podria hacer que no se me amontonen por defecto y me salga sin ese codigo?

Responder
JMiur  

El código es insertado de manera automática así que sólo puedes elegir el tipo de editor a usar o sino, editarlas manualmente.

Responder
Onetwothree  

Con el editor nuevo me sucede que al insertar imágenes, ese div que recoge todas las propiedades hace que el estilo del documento a partir del div se me trastoque completamente.

Para ser más claro, cada vez que inserto una imagen, el estilo de la letra varía disminuyendo el tamaño de la letra y no se porqué, puede ser incompatibilidad con mi plantilla? Alguien más tiene este extraño error?

Gracias por la posible ayuda.

Responder
JMiur  

No veo nada de eso en tu blog y el DIV no tiene ninguna propiedad que afecte a las fuentes de los textos.

Responder
Onetwothree  

@JMiur

No lo ves porque para que no quede de esa manera he quitado el div y las imágenes quedan alineadas a la izquierda por defecto pero seguramente en cualquier entrada antigua si que se vea así.

De todas formas, crees que si cambio de nuevo al editor antiguo no me hará esas cosas raras?

Responder
JMiur  

Pués deberás indicarme un post concreto porque he visto agosto, junio, mayo, enero y en ninguno veo nada de eso.

Responder
Unknown  

Muy bueno tu blog , es un gran aporte a quines queremos aprender algo nuevo todos los dias muchas gracias

Responder
FRAN LLANO  

En su día visité la presente entrada y apliqué la definición css "a img {border: none;}" para eliminarlos de toda la plantilla pero no funciono y lo deje estar. Hoy he acabado de nuevo en tu entrada y revisando de nuevo el código creo que está bien definido pero se siguen viendo los bordes. Mi blog es http://hermandaddelcostalero.blogspot.com/. Te agradecería tu ayuda como siempre. Un gran saludo y muchísimas gracias por enseñarme todo lo que ha aprendido J. Miur.

Responder
JMiur  

Funcionará perfectamente a menos que luego agregues otra regla como esta que tiene tu plantilla:

.post img {
border: 1px solid #99DDD6;
padding: 4px;
}

y que indica que se haga exactamente lo contrario.

Responder
FRAN LLANO  

Como siempre eternamente agradecido.

Responder
JMiur  

Si, eso lo resolvió, perfecto :D

Responder
nosrepresentan  

viendo esta entrada se me ha planteado una duda. ¿siempre me he preguntado desde mi ignorancia informática si sería posible definir el tamaño de las imágenes subidas desde la plantilla para no depender de las que impone google?

y como las imágenes vienen con una clase class="separator" me pregunto si sería posible definir en la plantilla una clase con ese nombre para especificar las características de las imágenes y que ignorase el style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" width="320" que viene por defecto sin tener que borrarlo una a una imagen?

Responder
JMiur  

nosrepresentan:

Si ... pero no.

El tamaño de la imagen es el definido por el atributo SRC; Blogger utilliza Picasa y ese dato en la URL es l oque carga esa imagen de ese tamaño específico. Los atributos width y height podrán redimensionarla pero no significa que se cargará de otro tamaño sino que se verá de otro tamaño. La diferencia es sustancial.

Sí es posible agregar una regla de estilo para esa clase pero, será lo mismo, todas se mostrarán con ese otro estilo. Para eso, se deben usar tres reglas:

.separator {text-align: left !important;}
.separator a {margin:0 !important;}
.separator img {width:VALORpx;}

Se usa !important en aquellas que en la etiqueta tienen el atributo style porque sino, este atributo tiene prioridad sobre la regla; En cambio, los atributos width y height son ignorados si se definen reglas con CSS.

No se si se entiende algo de lo escrito :D En resumen, si se quiere control absoluto sobre las imágenes agregadas, deberá editarse el código HTML.

Responder
nosrepresentan  

muchas gracias por tu respuesta.

a ver si encuentro un hueco y pruebo lo que dices. yo subo muchas imágenes y estoy limitado por el tamaño 320 que viene por defecto en el nuevo cargador de blogger.
me gustaría que tuviese un tamaño superior, al menos 450 o 500, ya que actualmente la columna principal de mi blog debe limitarse a esos 320 pixels, pero para mí es inviable cambiar el tamaño una a una.

ese s320 es también es una cruz. si amplio una imagen he de tocarlo con frecuencia para evitar que se vea borrosa.

¿la definición de la clase separator debe ir en un lugar específico, como el apartado post de la plantilla?

Responder
JMiur  

Las definiciones de estilo se colocan entre <b:skin> y </b:skin>

El tamaño de 320 no es otro que el que has elegido, puedes elegir otro, pequeño, medio, grande o extra-grade.

Responder
nosrepresentan  

muchas gracias de nuevo. a ver si encuentro un rato para probarlo.

en realidad estoy limitado por los 320, salvo que haya alguna opción que desconozco. subo muchas imágenes de golpe, con lo que el editor que sí da esa opción, no me resulta útil, y el editor nuevo tiene por defecto esa resolución de 320. no he encontrado la manera de que por defecto sea diferente.

Responder
JMiur  

Con el nuevo edito basta ahcer click sobre la imagen para que veas las opciones de tamaño y alineación.

Responder
nosrepresentan  

ya, ese es el problema. si seleccionas todas las imágenes y con el botón derecho intentas modificar el tamaño -la alineación al menos sí funciona con el icono de la barra principal- sólo lo aplica a una ventana no a todas.

si subo una media de 100 imágenes a la semana tendría que hacer la modificacion 100 veces...

en una ocasión hice la sugerencia en el modo draft de que permitiesen una selección múltiple del tamaño y hacen cambios -a veces con resultados desastrosos que tardan una semana en corregir- pero esa no parece entrar en sus prioridades.

Responder
JMiur  

Cualquier servicio de blogs funcionará de manera similar ya que estás hablando de volúmenes que se apartan del uso para el que están previstos.

Responder
nosrepresentan  

gracias de nuevo.

me imagino que tienes razón. me gustaría que el servicio de blogger fuese más profesional, especialmente últimamente que no dejan de hacer modificaciones que continuamente matan las miniaturas de mis gadgets.

una última pregunta,aunque me imagino que tampoco funcionará sin modificar manualmente cada entrada. ¿es posible que las imágenes al hacer click sobre ellas no se habrán en una imagen en blanco sino sobre otra imagen predefinida que ocupe toda la pantalla?
¿o sobre otra página que en el fondo supongo que es lo mismo?

Responder
JMiur  

Todo es etipo de cosas debe hacerse manualmente, editando el código.

Responder
nosrepresentan  

div class="separator" style="clear: both; text-align: left;"
a href="http://1.bp.blogspot.com/x/x/x/s1600/x.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" img border="0" src="http://1.bp.blogspot.com/x/x/x/x/s620/x.jpg" width="320" //a /div

y para hacerlo manualmente, ¿habría que añadir alguna orden al lado de href="http://1.bp.blogspot.com/x/x/x/s1600/x.jpg"?

Responder
JMiur  

No. Lo que debes cambiar es la URL de href:

<div class="separator" style="clear: both; text-align: left;">
<a href="LA_DIRECCION_DE_ALGO" style="margin-left: 1em; margin-right: 1em;">
<img src="http://1.bp.blogspot.com/x/x/x/x/s620/x.jpg" width="320" />
</a>
</div>

Responder
nosrepresentan  

Pero eso, corrígeme si me equivoco, me obligaría a tener insertada la imagen en esa página DIRECCION DE ALGO.

si miras esta página https://www.wetransfer.com/ en realidad ahí hay una imagen de fondo, que además si la pinchas te lleva a un enlace, sobre la que flota el elemento de wetransfer.

lo que despierta mis dudas metafísicas es si es posible hacer algo parecido con blogger, que al pulsar la imagen esta no se abra sobre un fondo en blanco sino sobre una imagen que ocupe toda la pantalla y sobre la que la imagen abierta se solape dejando sólo visibles las partes fuera de su marco. y si para hacerlo habría que introducir alguna orden manualmente en el código de la imagen indicado arriba.

aquí en El País hay otra cosa parecida. http://www.elpais.com/deportes/ . en los márgenes de la noticia, fuera del marco de la entrada, tal como yo entiendo, hay dos bandas verticales de publicidad, aunque supongo que en ese caso están definidas en la página de base de los deportes. quizás es demasiado complejo para blogger.

por cierto no sé cómo hacer para mantener los <> cuando escribo un código en los comentarios. siempre me da error al intentar publicar el comentario y he de borrarlos.

y gracias como siempre!

Responder
JMiur  

El primer enlace que muestras es una animación de Flash; puedes usar archivos SWF en Blogger sin problema pero, claro, debes crearlos previamente.

El segundo no es otra cosa que una imagen de fondo. Una imagen puede colocarse en una etiqueta IMG o bien ser el fondo de cualquier otra etqieuta, en ese caso, el body mismo. Los enlaces pueden no tener contenido y ser simples rectángulos transparentes si se los define de ese modo con CSS; por ejemplo:

<a href="#" style="background:url(imagen); width:200px;height:100px;display:block"></a>

En ese caso en particular, son dos enlaces fijos (position:fixed), dimensionados y ubicados de tal forma que abarquen esas dos franjas laterales.

Cualquiera de esas cosas puede hacerse con Blogegr ya que no hay restricciones de diseño o en el uso de las etiquetas, Lo mismo puede hacerse con cualquier otro tipo de diseño.

Los formularios de comentarios no admiten el uso de HTML salvo ciertas etiquetas de formato mínimo y por eso impiden el uso de caracteres como < y > que, deben ser escritos como entities del mismo modo que se haría en una entrada del blog:

para mostrar < se escribe &lt;
para mostrar > se escribe &gt;

Responder
nosrepresentan  

ah,ahora entiendo lo de los códigos.

lo del swf excede mis posibilidades pero si fuese una imagen http://1.bp.blogspot.com/x/x/x/x/s1600/y.jpg ocupando el fondo sobre la que se abriese otra http://1.bp.blogspot.com/x/x/x/x/s620/x.jpg
¿podría hacerse modificando el código que genera blogger?

he probado con algo del tipo:

<div class="separator" style="clear: both; text-align: left;">
<href="http://1.bp.blogspot.com/x/x/x/s1600/x.jpg" style="margin-left: 1em; background:url(http://1.bp.blogspot.com/x/x/x/y.jpg); margin-right: 1em;">
<img src="http://1.bp.blogspot.com/x/x/x/x/s620/x.jpg" width="320" />
</a>
</div>

pero evidentemente no es para eso.

Responder
JMiur  

Para abrir una imagen y que esta se muestre sobre algún tipo de fondo, se debe abrir en una página web y esta es la que debe ser personalizada.

Responder
nosrepresentan  

ah, gracias.

entonces lo que yo imaginaba es conceptualmente imposible. no puedes pulsar una imagen y que se abra en una página determinada. o sea, si fuesen tres imágenes, no puedes hacer que las tres se abran sobre la misma página, sino que necesitas tres páginas diferentes, cada una con su imagen insertada, que se abra al pulsarla.

Responder
JMiur  

Las imágenes sueltas, sólo son visibles en el navegador porque así lo admitem igualq que otro tip ode archivos. Funcionan como visores.

Si esa forma de mostrarla quieres que sea personal, necesitas de una página web en donde se incruste la imagen.

Responder
nosrepresentan  

gracias

Responder
Unknown  

como hago para que aparezca el comentario al pie de una imagen incrustada? con alt="..." no muestra nada

JMiur  

alt no tiene ese uso, sólo se ve cuando la imagen es inaccesible; debes crear el html para colocar ese tipo de texto.

Responder
nosrepresentan  

hace un par de años te hacía una consulta sobre cómo definir el tamaño y la alineación de las imágenes por defecto y sólo ahora que he comprendido cómo funciona la plantilla con una parte al principio en la que se pueden definir las variables y otra parte al final en que supongo que se escribe el código.

así he logrado definir la clase separator para que alinease a la izquierda las imágenes y al volver a esta entrada, casi por casualidad, he visto que ya me lo habías explicado claramente aquí.

he añadido a la plantilla, en /* Posts, a la clase separator que viene asociada a las imágenes, tal como me habías dicho, lo siguiente:

.separator {
text-align: left !important;
}
.separator a {
margin:0 !important;
}
.separator img {
width:320px;
}

y las imágenes se alinean por defecto a la izquierda y con un ancho de 320 y además desaparece el margen.

ahora tengo un par de dudas. por un lado se modifica el ancho pero no la altura, con lo que se pierde la proporcionalidad. ¿es posible obligar a que el ancho sea de 320 y el alto proporcional a esa dimensión?

por otro, cada entrada va encabezada con una imagen en tamaño grande -ancho 640 si es horizontal, alto 640 si es vertical-. ¿es posible ponerle una condición a ese redimensionado a 320 para que no afecte a la primera imagen o, si eso no es posible, para que no afecte a las imágenes que tengan un ancho de 640?

muchas gracias.

JMiur  

Si sólo se define un ancho (width) y no se define un alto (height); la imagen será mostrada respetando su proporción; lo mismo ocurre a ala inversa; la proporción sólo cambia si ambas propiedades son definidas en cuyo caso, el valor a poner en aquella que no se quiere modificar es auto o 100%

Detectar la primera imagen con CSS depende de la estructura del HTML; podrías probar con:

:first-child
> img:nth-child(1)
> img:first-of-type

> img:nth-child(1)

Responder
nosrepresentan  

muchas gracias.

sí tienes razón, para que las imágenes verticales que cargo tengan un ancho de 320 he de modificarlas manualmente y, lo que hago siempre, es indicar que el ancho sea 320 y borro el alto y queda proporcionada, pero no sé por qué con:
.separator img {
width:320px;
}
se pierde la proporcionalidad.

sin embargo tanto con
.separator img {
width:320px;
height:100%;
}
como con
.separator img {
width:320px;
height:auto;
}
parece que se soluciona.

con respecto a la primera imagen
.separator img {
width:320px;
height:100%;
}
:first-child {
width:640px;
height:100%;
}
obliga a que todas las imágenes -iconos incluidos- de la página tengan un ancho de 640 excepto curiosamente las que están en la entrada que se rigen por la clase separator.

.separator img {
width:320px;
height:100%;
}
img:nth-child(1) {
width:640px;
height:100%;
}

.separator img {
width:320px;
height:100%;
}
img:first-of-type {
width:640px;
height:100%;
}

y

.separator img {
width:320px;
height:100%;
}
img:nth-child(1) {
width:640px;
height:100%;
}

lo que parecen hacer es obligar a que todas las imágenes de la página -incluidos iconos y estén donde estén- tengan un ancho de 640.

el comienzo de la plantilla css en la sección Post es el que sigue, no sé si sirve de ayuda:

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.postMeta{background:url('https://lh4.googleusercontent.com/-AEUACiS_bZ8/Ut3DgLyCn1I/AAAAAAAA52M/aN9kHfPuMGw/s973/barAfasia.png') repeat-x left center;text-transform:uppercase;font-size:11px;text-align:right;margin-bottom:5px}
.postMeta span.date{background:$bgcolor;color:$metacolor;padding:0 2px 0 4px;}
.postMeta span.comments{background:$bgcolor url('http://1.bp.blogspot.com/_0CLPmP1ydOo/Sa7yyg4qFKI/AAAAAAAABNI/2P6HSCDx4-g/s1600/chat_grey.gif') no-repeat left center;padding-left:15px;margin-left:2px}
.postMeta span.comments a,
.postMeta span.date a{color:$metacolor;}
.post{margin:0 0 15px 0;}
.post h2{line-height:1.2em;margin-bottom:7px;font-size:34px;color:$titlecolor;text-align:left; text-transform:capitalize;}
.post h2 a{width:100%;display:block;outline:none;color: $titlecolor;}
.post-body {
font-size:12px;
color: #777777;
text-align: left;
margin:0 0 .75em;
line-height:1.6em;
}


en realidad existiría un truco, que sería crear una clase
.separator2 img {
width:640px;
height:auto;
}
y manipular las clases de las primeras imágenes, pero no cabe duda que un método automático sería aún mejor.

otra cuestión que me ha surgido es: si la resolución original de la imágen es inferior a 640 -un caso poco habitual pero que puede darse-, ¿es posible poner una condición para que la regla no se aplique?

JMiur  

En la regla de CSS debe ponerse el height:100% porque en la etiqueta IMG está indicado el ancho y alto con width y height:

<img width="640" border="0" height="395" src="http://1.bp.blogspot.com/-NbHEAZ3ML5E/UvJvH8x475I/AAAAAAAA79Y/5Ik1Z2ZjOzY/s1600/studio+octopi+.+delfina+foundation+.+london++(1).JPG">

Dada la estructura de esos posts, la regla para la primera imagen podría ser esta:

.post .separator:first-of-type img {
.............
}

Una regla para detectar imágenes menores no sabría decirte pero puedes usar una regla para detectar un width exacto:

.post .separator:first-of-type img[width="640"]{
.............
}

Lo automático 100% no existe o simplemente, siempre habrá cosas no contempladas o leves cambios que impliquen que esas reglas no funcionen.

Lo razonable es personalizar los posts manualmente, cosa que es bastante simple ya que basta que que cambies la clase separator de la primera imagen y crees una clase personal.

Responder
nosrepresentan  
Este comentario ha sido eliminado por el autor.
Responder
afasia  
Este comentario ha sido eliminado por el autor.
Responder
nosrepresentan  

creo que me he vuelto a equivocar, publícalo por favor como nosrepresentan,

pues muchas gracias.

el código que propones hace justo lo que necesito, la primera imagen la muestra con un ancho de 640 y las siguientes de 320:
.post .separator:first-of-type img {
width:640px;
height:100%;
}
.separator img {
width:320px;
height:100%;
}

el caso de una resolución inferior a 640 no se da muchas veces y puedo modificar manualmente el nombre de la clase, por ejemplo cambiarla a separator2, para que respete la dimensión que decida darle.

pero lo que dices de que se puede establecer una regla en función de un ancho específico me ha dado una idea, porque si la primera imagen es vertical, con un ancho de 640 queda muy grande.
ahora las primeras imágenes si son verticales se muestran en lugar de con un ancho de 640, con un alto de 640 y el ancho el que le corresponda proporcionalmente.

por ello he probado a poner lo siguiente:
.post .separator:first-of-type img {
width:640px;
height:100%;
}
.post .separator:first-of-type img[height="320"]{
height:640px;
width:100%;
}
.separator img {
width:320px;
height:100%;
}
pero curiosamente, si bien eso hace que la primera imagen, si es vertical, se muestre con un alto de 640, el ancho lo mantiene también en 640 -o probablente un poco más porque sobrepasa ligeramente la columna- perdiendo la proporcionalidad.

JMiur  

el orden en que se escriben las reglas importa, primero se coloca la general y luego se van agregando las específicas

todas ellas deberían tener la misma sintaxis y no distintas; por ejemplo:

.post .separator img {}

Responder
nosrepresentan  

creo que ahora tengo otro momento para hacer pruebas con esto.

he estado revisando el código pero sigo teniendo problemas con la primera imagen de la entrada, si la dimensión mayor es vertical.
si le pongo la condición: .separator:first-of-type img[height="320"]{height:200px;} le da al altura que quiero a la primera imagen cuando es vertical pero mantiene el ancho por defecto y pierde la proporcionalidad.
si le pongo la condición: .separator:first-of-type img[height="320"]{width:100%; height:200px;} parece que se lía y en vez de mantener al proporcionalidad la imagen se sale del ancho de la columna.

aquí puedes ver en una página de prueba lo que sucede:
http://tinyurl.com/l8ct3z7
en las dos últimas entradas se ve cómo al ser las imágenes verticales se pierde la proporcionalidad.

y lo que sigue es la parte del código que afecta a la etiqueta separator, tal como la tengo ahora, en la sección /* Posts
-----------------------------------------------

.separator {
text-align: left !important;
}
.separator a {
margin:0 !important;
}
.separator img {
width:320px;
height:100%;
}
.separator:first-of-type img {
width:640px;
height:100%;
}
.separator:first-of-type img[height="320"]{
height:200px;
}

JMiur  

En las reglas que se ven en el sitio:
.separator:first-of-type img[height="320"] {
height: 200px;
}
esto hace que la imagen reduzca su altura a 200 que es lo que pasa en el post: http://afarq10.blogspot.com/2014/02/prueba-texto.html

pero esta, hace que su ancho sea de 640:
.separator:first-of-type img {
height: 100%;
width: 640px;
}

si la primera regla dijera:
.separator:first-of-type img[height="320"] {
height: 200px;
width: auto;
}
lo que se vería es una imagen pequeña.

La lógica de armar un sitio con ese tipo de esquema es que las imágenes a mostrar sean siempre iguales o mantengan una misma proporción.

Responder
nosrepresentan  

pues muchas gracias, auto era la solución. me has dado la alegría del día. con esto me voy a ahorrar bastante trabajo.

con el código así:
.separator img {
width:320px;
height:100%;
}
.separator:first-of-type img {
width:640px;
height:100%;
}
.separator:first-of-type img[height="320"]{
height:640px;
width:auto;
}

hace justo lo que necesitaba:
http://tinyurl.com/l8ct3z7


gracias de nuevo.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR