USER_AVATAR sin tamaño

[javiexin]

Hola,

Tengo un pequeño problema de diseño.

Me gustaría permitir avatares relativamente grandes a los usuarios, que se utilicen en su página de perfil. Sin embargo, esos mismos avatares son excesivamente grandes en los mini-perfiles de las páginas de mensajes (viewtopic).

El problema está en que la variable {postprofile.USER_AVATAR} ya incluye atributos width y height, con lo que incluso aunque ponga max-width y max-height en el CSS correspondiente, no funcionan (no tienen precedencia sobre width y height).

Lo que tengo hecho es una chapuza: al finalizar la carga de la página, ejecuto un JS que cambia el tamaño de los avatares. Funciona, pero me gustaría, si fuera posible, utilizar CSS en lugar de JS para cambiar esto (no me gusta esperar hasta la finalización de la carga de página para que se redimensionen los avatares).

Alguna idea? Muchas gracias de antemano,
-javiexin

[leviatan21]

El problema está en que la variable {postprofile.USER_AVATAR} ya incluye atributos width y height, con lo que incluso aunque ponga max-width y max-height en el CSS correspondiente, no funcionan (no tienen precedencia sobre width y height).

Debería funcionar, comenta como lo hiciste, porque desgraciadamente los avatares no tienen in ID o clase de css definidos, por lo que había que hacer ciertos cambios en la plantilla para lurgo utilizar esa clase en las hojas de estilo :

Yo me lo imagino así :
en la plantilla viewtopic_body.html cambiando :

Código: Seleccionar todo

<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF -->

por :

Código: Seleccionar todo

<!-- IF postrow.U_POST_AUTHOR --><span class="user-avatar"><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}</span><!-- ENDIF -->

Luego en alguna de las hojas de estilo, ( puede ser stylesheet.css ) agregar :

Código: Seleccionar todo

.user-avatar img {
max-width: 50px;
max-height: 50px;
}

[viktor]

Lo que yo no entiendo es porque tienes que recurrir a javascript para modificar tamaños de esa manera.

Es muy simple, (sin mirar el código css del estilo te digo que...) crees un par de clases (o identificadores) para los avatares, una clase para el viewtopic y otra para el perfil, llámalos como tu quieras. Le pones tamaños diferentes a cada uno con sus correspondientes máximos y mínimo, también cualquier efecto raro que quieras ponerle a los bordes de los mismos, ec.
Luego cambias los nombres de las clases (o los identificadores) en el vietopic o en el profile, o en el archivo que mas te guste, donde van los avatares.

De paso, ya que estas, chequea bien que esas etiquetas no estén englobadas por algún otro div o tabla que te fuerce el tamaño o te lo limita (ese es generalmente el error).
Normalmente, cuando tienes este tipo de problemas debes estudiar el template que estés usando bien a fondo, porque cuanto mas complejo, mas complicado es hacer un cambio tan simple.

Edito: Arf... ahí esta leviatan ganándome de mano,...

[javiexin]

Yo me lo imagino así :
en la plantilla viewtopic_body.html cambiando :

Código: Seleccionar todo

<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF -->

por :

Código: Seleccionar todo

<!-- IF postrow.U_POST_AUTHOR --><span class="user-avatar"><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}</span><!-- ENDIF -->

Luego en alguna de las hojas de estilo, ( puede ser stylesheet.css ) agregar :

Código: Seleccionar todo

.user-avatar img {
max-width: 50px;
max-height: 50px;
}

Muy parecido es lo que yo he intentado:
He sustituido lo mismo que tú indicas por:

Código: Seleccionar todo

<div class="avatar" id="avatar{postrow.POST_ID}" name="avatar" style="position: relative;"><!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --></div>

O sea, he usado un div en vez de un span.
El CSS que he usado es el mismo que has puesto, tanto como CSS como dentro del style. Pero esto no vale, porque el <img> del avatar es más grande que el div o el span, y los max-* no tienen efecto (creo yo). Desde luego, a mi no me ha funcionado.

Es decir, que para que tenga el efecto correcto tengo que cambiar los atributos width y height del tag img del avatar, yo no he visto otro modo. He probado con firebug a cambiar múltiples cosas, cambiar div por span, meter max-* en el img, span y div... nada me ha funcionado. Sólo he conseguido que funcione cambiando directamente los atributos width y height, y eso sólo lo he podido hacer con JS.

Muy agradecido por vuestra ayuda!
-javiexin

[leviatan21]

Acabo de probarlo cambiando :

raíz/styles/prosilver/template/Viewtopic_body.html

Código: Seleccionar todo

				<!-- IF postrow.POSTER_AVATAR -->
					<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />
				<!-- ENDIF -->

Por :

Código: Seleccionar todo

				<!-- IF postrow.POSTER_AVATAR -->
					<span class="user-avatar"><!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --></span>
				<!-- ENDIF -->

Y al final de raíz/styles/prosilver/theme/stylesheet.css, agregando :

Código: Seleccionar todo

.user-avatar img {
	max-width: 50px;
	max-height: 50px;
}

Luego de actualizar las plantillas y el tema del estilo prosilver me funciona de maravillas

[viktor]

Solo me gustaría agregar que max-with y max-height no funcionan en "cierto" navegador (a ver si adivinan en cual... )

Así que si quieres que también te funcione en ese "bendito" navegador tienes que poner directamente height y with en un css aparte para IE, que se llama con un javascritp muy simple.

Eso o usar una tabla... a ese navegador a veces solo la "tabla" lo hace funcionar como debería.

[javiexin]

Muchas gracias!!!

Ya CASI está! Y por qué casi? Bueno, pues porque me deforma los avatares, no mantiene el ratio de aspecto. Es decir, siempre los deja "cuadrados" y no con la forma que tuvieran originalmente. He intentado poner sólo uno de los límites (vertical u horizontal), pero el resultado es todavía peor.

Se os ocurre algo?

-javiexin

PD: A mi, en "ese" navegador, también me hace lo mismo: redimensiona, pero deforma el aspecto.

[leviatan21]

Así funcionan el max-width y max-height, deforman

[javiexin]

Así funcionan el max-width y max-height, deforman

Si la imagen del avatar no tiene especificadas width y height, la redimensión es correcta. Pero si pones width y height en la imagen del avatar, entonces fuerza a cada dimensión independiente, y deforma.

Se os ocurre algo? Muchas gracias!
-javiexin