Hay manera de reducir una imagen en vez de cortarmela (CSS)

Diseño y Posicionamiento Web con Joomla Foros Joomla 1.5 Componentes Hay manera de reducir una imagen en vez de cortarmela (CSS)

Mostrando 17 respuestas a los debates
  • Autor
    Entradas
    • #80456
      DimarDimarR
      Participante

      La ausencia de informacion me hace preguntar lo siguiente.

      E estado buscado info, y al parecer no se puede, pero aun no me queda claro.

      Tengo este troso de codigo de un archivo CSS:

      #jc_comment_bbcode .jc_bb_smile {
      background: transparent url(smilies/alegre.gif) no-repeat 0px 0px;
      width: 45px;
      height: 45px;
      margin: -10px;
      }

      el cual llama a un emilies, bien… al yo querer “reducir” la imagen con la sintaxis width: 45px; y height: 45px; esta me la corta por los lados en vez de reducirla.

      Hay manera de que esto no pase, que en vez de cortarmela por los lados me la reduzca?? existe alguna otra sintaxis a utilizar???

      Exitos!!

    • #80458
      tuxmerlinTux Merlin
      Participante

      No con CSS, ya para eso necesitas un programa con GD de PHP que haga el trabajo.

    • #80459
      DimarDimarR
      Participante

      Hola tuxmerlin

      Tal cual me lo había imaginado. Me tocara editar entonces los Smilies a mas pequeños, y son animados :S asi que sera mas trabajo.

      Gracias tuxmerlin

      Exitos!!! 😉

    • #80474
      daggetkim
      Participante

      Y no será que le estas dando el alto y ancho al contenedor donde aparece la imagen y la imagen queda igual…

      si por ejemplo decimos:

      o 45) {this.width=45}” /> o

      La imagen se ha de redimensionar por fuerza…

      A mi me da que tu le estas dando el estilo al contenedor…

    • #80475
      DimarDimarR
      Participante

      Hola dagget tu siempre ayudándome con los CSS, gracias!!!!

      A que te refieres con “contenedor” ???

      Yo lo coloco asi:

      #jc_comment_bbcode .jc_bb_sad {
      background: transparent url(smilies/hola.gif) no-repeat -23px -101px;
      width: 25px;
      height: 25px;
      }

      Y asi, me lo corta, de que otra manera puedo hacer??

      En todo caso al final logre hacer algo muchisimo mejor. (aunque me gustaria me explicaras como hacer lo otro) 🙂

      Bueno estoy modificando el JomComment y él utiliza una imagen completa para todo (para los BBcode’s, los smilies, el fondo que son dos imagenes) una normal y otra (hover) cuando se pasa el mouse. Estoy colocándole mas smilies pero animados, pero sucede que tengo varios smilies que son un poco grandes y no quiero agarrar mucho espacio, (ya que de por si, la parte de comentarios es mul larga verticalmente hablando) entonces la idea era que me colocase la imagen al tamaño que quiero por medio del CSS. (aun no se como) pero con este cambio:

      #jc_comment_bbcode a:link, #jc_comment_bbcode a:visited {
      width: 35px;
      height: 35px;
      margin-right: 3px;
      text-align: center;
      outline-style:none;
      float: left;
      background: transparent url(smilies/buttons.gif) no-repeat scroll 0 -231px;
      border: 0;
      }

      Logre utilizar la imagen que utiliza de fondo cuando se pasa el mouse como smilies para que se viera el smilies original al pasar el mouse. Y el otro smilies (que no es el mismo) sesta reducido al tamaño que quiero. Bueno nose si se entiende. El caso es que estoy utilizando 2 smilies que son lo mismo pero uno de tamaño reducido y el otro en tamaño original… y se ve espectacular :D.

      El fragmento de codigo original es este:

      /* new bb_code style */
      #jc_comment_bbcode {

      }
      #jc_comment_bbcode a:link, #jc_comment_bbcode a:visited {
      width: 24px;
      height: 24px;
      margin-right: 3px;
      text-align: center;
      outline-style:none;
      float: left;
      background: transparent url(smilies/buttons.gif) no-repeat scroll 0 -231px;
      border: 0;
      }
      #jc_comment_bbcode a:hover {
      background: transparent url(smilies/buttons.gif) no-repeat scroll 0 -257px;
      border: 0;
      }
      #jc_comment_bbcode a img {
      margin-top: -2px;
      border: 0;
      }
      /* bbcode toolbar */
      #jc_comment_bbcode .jc_bb_bold {
      background: transparent url(smilies/buttons.gif) no-repeat 0 4px;
      }
      #jc_comment_bbcode .jc_bb_italic {
      background: transparent url(smilies/buttons.gif) no-repeat 0 -17px;
      }
      #jc_comment_bbcode .jc_bb_underline {
      background: transparent url(smilies/buttons.gif) no-repeat 0 -38px;
      }
      #jc_comment_bbcode .jc_bb_strike {
      background: transparent url(smilies/buttons.gif) no-repeat 0 -59px;
      }
      #jc_comment_bbcode .jc_bb_url {
      background: transparent url(smilies/buttons.gif) no-repeat 0 -80px;
      }
      #jc_comment_bbcode .jc_bb_image {
      background: transparent url(smilies/buttons.gif) no-repeat -1px -103px;
      }
      #jc_comment_bbcode .jc_bb_quote {
      background: transparent url(smilies/buttons.gif) no-repeat 0 -122px;
      }
      /* smilies */
      #jc_comment_bbcode .jc_bb_smile {
      background: transparent url(smilies/buttons.gif) no-repeat -23px 4px;
      }
      #jc_comment_bbcode .jc_bb_wink {
      background: transparent url(smilies/buttons.gif) no-repeat -23px -17px;
      }
      #jc_comment_bbcode .jc_bb_laugh {
      background: transparent url(smilies/buttons.gif) no-repeat -23px -38px;
      }
      #jc_comment_bbcode .jc_bb_grin {
      background: transparent url(smilies/buttons.gif) no-repeat -23px -59px;
      }
      #jc_comment_bbcode .jc_bb_angry {
      background: transparent url(smilies/buttons.gif) no-repeat -23px -80px;
      }
      #jc_comment_bbcode .jc_bb_sad {
      background: transparent url(smilies/buttons.gif) no-repeat -23px -101px;
      }
      #jc_comment_bbcode .jc_bb_shocked {
      background: transparent url(smilies/buttons.gif) no-repeat -23px -122px;
      }
      #jc_comment_bbcode .jc_bb_cool {
      background: transparent url(smilies/buttons.gif) no-repeat -23px -143px;
      }
      #jc_comment_bbcode .jc_bb_tongue {
      background: transparent url(smilies/buttons.gif) no-repeat -23px -164px;
      }
      #jc_comment_bbcode .jc_bb_kiss {
      background: transparent url(smilies/buttons.gif) no-repeat -23px -185px;
      }
      #jc_comment_bbcode .jc_bb_cry {
      background: transparent url(smilies/buttons.gif) no-repeat -23px -206px;
      }

      Lo e colocado asi:
      #jc_comment_bbcode .jc_bb_smile {
      background: transparent url(smilies/hola.gif) no-repeat -23px -101px;
      width: 25px;
      height: 25px;
      }

      Pero me corta la imagen. Hay alguna otra forma aparte de la que estoy haciendo???

      Exitos!! 😉

    • #80478
      daggetkim
      Participante

      He estado inspeccionando los elementos de tu componente y #jc_comment_bbcode es un div contenedor las imagenes se llaman asi:

      img.jc_bb y cada una tiene un sufijo de este modo

      img.jc_bb_hola
      img.jc_bb_alegre

      prueba a poner esto en el css deshaciendo los cambios anteriores…

      img.jc_bb {
      width: 45px;
      height: 45px;
      }

    • #80479
      DimarDimarR
      Participante

      Me lo corta igual:

      Antes lo tenia asi:

      #jc_comment_bbcode .jc_bb_smile {
      background: transparent url(smilies/hola.gif) no-repeat -23px -101px;
      width: 35px;
      height: 35px;
      }

      despues lo puse asi:

      #jc_comment_bbcode .jc_bb_smile {
      background: transparent url(smilies/hola.gif) no-repeat -23px -101px;
      }

      y agregue:

      img.jc_bb {
      width: 45px;
      height: 45px;
      }

      Pero nada, lo estoy haciendo en local.

    • #80485
      daggetkim
      Participante

      Y si lo haces de forma generica para todos los atributos img de la capa esta #jc_comment_bbcode?

      #jc_comment_bbcode img {
      max-width: 35px;
      max-height: 35px;
      }

    • #80492
      tuxmerlinTux Merlin
      Participante

      Dimar pudiste resolver la cuestión? Yo había entendido para el traste, pensé que querías reducir la imagen no redimensionarla.

    • #80503
      DimarDimarR
      Participante

      No aun no e estado haciendo otras cosas. No me a dado tiempo. Despues comento.

      tuxmerlin la idea es poder reducir los emilies que aparecen en el componente jomcomment ya que estoy metiendole mano al codigo para utilizar los mios propios, pero los que utilizo son un poco mas grandes y son muchos mas y no quiero agarrar mucho espacio, por eso reducirlo para que me cubra lo menos posible y cuando aparezca el comentario arriba, salga con el tamaño original.

      Sino entonces lo dejare como lo tengo ahorita (como explique arriba) pero igual voy a probar lo que me comenta dagget .

      Los emilies le gusta a los usuarios y mas aun los animados, eso incentiva al usuario a comentar 😉

      Gracias!!

      Exitos!!!

    • #80507
      tuxmerlinTux Merlin
      Participante

      Bueno, tengo tu solución, jajajajajja…
      Tienes que retocar el código del archivo de clase “comment.class.php”….. El archivo está en “/components/com_comment/joscomment/”.
      Adentro, busca la funcion “emoticons”, y dentro de la función vas a ver una línea como esta: “$html .= “_emoticons_path/$icon’ border=’0′ alt=’$ubb’ />”;” remplazala por esta:
      ” $html .= “_emoticons_path/$icon’ WIDTH=xx HEIGHT=xx border=’0′ alt=’$ubb’ />”; ”
      Cambia las xx por el valor que quieras de tamaño y listo.

    • #80512
      DimarDimarR
      Participante

      Tuxmerlin gracias por la ayuda.

      Ese archivo yo no lo tengo en mi paquete de Jomcommnet el cual es la ultima version, lo e buscado con el buscador de windows y nada, sin embargo, voy a buscar por mi cuanta esa funsion que comentas entre todos los archivos del paquete del jomcommnet con el notepad, y luego comento. Voy a probar lo que me comento dagget a ver. Pero me pregunto algo, si llego a encontrar esa funcion que comentas Tuxmerlin, sera que me cambiara el tamaño del smilie cuando sea publicado el comentario?? creo que habrá que probar jejejejejejje pero es una idea mas a la solucion. Muchas gracias.

      Exitos!!!! 😉

    • #80540
      tuxmerlinTux Merlin
      Participante

      Bueno en ese caso no necesitas tocar los PHP solo agrega estas líneas dentro del CSS de la plantilla que vayas a usar para JosComment:
      .emoticoncontainer img{
      width: XXpx;
      height: XXpx;
      }

      Donde XX es el tamaño que le quieres dar a tus emoticons.
      Suerte!

    • #80560
      daggetkim
      Participante

      Esa es la historia, si localizas la clase o id exacta del contenedor que alberga las imágenes al decirle .clase img { valores } o #id img { valores } las imagenes han de reducirse por narices a lo que le digas… ya que el tag es hijo de ese container.

      Ya nos dirás si pudiste solucionarlo.

    • #80620
      DimarDimarR
      Participante

      Ajaaaa!!! bueno hice lo de dagget, colocar este troso de codigo:

      #jc_comment_bbcode img {
      max-width: 35px;
      max-height: 35px;
      }

      Pero de igual modo me lo corta.

      Vi este troso original:

      #jc_comment_bbcode a img {
      max-width: 35px;
      max-height: 35px;
      }

      y le hice lo mismo a ver si con ese era, pero tampoco.

      tuxmerlin busque entre todos los archivos del paquete del jomcommnet, la funcion emoticons y smilies y lo e buscado tambien por diferentes trosos del codigo que publicaste a ver si algo llegaba a encontrar, pero no alle nada que tenga concordancia con el tamaño de los smilies.

      Cada smilies utiliza una capa y cuando utilizo la variante de dagget es esta capa la que hace cortarme los smilies. Pero no le hace nada al smilies.

      Que variantes estaria utilizando el jomcomment en algun archivo php para que actue directamente sobre el tamaño del smilies?? esto lo pregunto por lo que dice dagget en su ultimo post y asi buscar esas variantes entre todos los archivos del paquete, pero como no se que variantes podria encontrar pues estoy atascado.

      Sino pues tocara dejarlo como antes, utilizando 2 smilies iguales pero de diferentes tamaños, uno para el formulario del comentario y otro el que se publicara arriba. Lo malo es que seria una carga adicional para la pagina. Mientras inventare algo a ver si la pego 🙂

      Exitos!!! 😉

    • #80621
      tuxmerlinTux Merlin
      Participante

      Lo que te comenté lo probé con JomComment v4 alpha y me anduvo con la plantilla html y css que éste instala por default.
      JomComment instala 7 plantillas para los comentarios: “akostyle”, “default”, “default-emotop”, “JQdefault-emotop”, “MT-default-emotop”, “SSlideBoth-emotop” y “SSlide-emotop.
      La corrección la tienes que hacer en una de estas plantillas o en todas.

      A ver… te doy una pista.
      Carga la web en donde usaste el JomComment en el navegador y haz como que vas a dejar un comentario. Luego pon “Ver el código fuente” y allí deberías ver un código como este: “

       
      <div….".

      Si observas bien este código está mostrando la clase "emoticoncontainer" y se refiere al CSS del template de JomComment (no al CSS del template del sitio ojo!) que estas usando.

      Luego, en ese CSS pones como lo que te dije:
      .emoticoncontainer img{
      width: XXpx;
      height: XXpx;
      }

      Te debería funcionar. A lo mejor estas corrigiendo la plantilla del sitio web y no la plantilla de JomComment.

    • #80644
      DimarDimarR
      Participante

      No claro, evidentemente todo tiene que ver con el Jomcomment, la plantilla Joomla no tiene nada que ver.

      Esas plantillas que comentas yo no las tengo :S me entero que a cambiado la version del Jommcoment. Pero gracias a tu explicacion creo encontrar los archivos que modifican la parte de los emilies o emoticon que son archivos HTML en una carpeta _default (que no es otro diseño de plantilla) sino que son archivos html para todos los diseños de plantillas del jomcommnet.

      Voy hacer los cambios en esos archivos html, segun todas las explicaciones, a ver si es por hay la cosa y despues comento.

      Haaa y lo de ver el codigo fuente y buscar esa linea, a mi no me aparece, pudiera ser por la version, nose.

      Gracias!!

      Exitos!! 😉

    • #80650
      DimarDimarR
      Participante

      Bueno, creo que voy entendiendo. Aunque sin llegar aun a lo que quiero hacer. Guiándome por lo que me dice dagget y tuxmerlin termine cambiando el tamaño de la imagen pero solo cuando es publicado en comentario :S aunque gracias a eso voy entendiendo.

      En el archivo functions.jomcomment.php en la linea que dice:

      $value“, $comment);

      Lo modifique asi:

      $value“, $comment);

      Y me cambio el tamaño del smilie.

      Me imagino que tendre que encontrar un troso de codigo como el anterior entre los archivos, el problema es que no lo allo.

      Por otra parte encontre este:


      $value){ ?>
      <a href="javascript:void(0);" tabindex="-1" title="” onclick=”jc_addText(”, ‘jc_comment’); return false;” class=”jc_bb_item”>
      <img src="/images/blank.gif” alt=”” border=”0″ width=”18″ height=”22″ class=”jc_bb_” />

      Que es la capa (creo) que me corta la imagen.

      Exitos!!! 😉

Mostrando 17 respuestas a los debates
  • El foro ‘Componentes’ está cerrado y no se permiten nuevos debates ni respuestas.
Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver
Privacidad