Cómo apicar formato a la primera imagen.

Inicio Foros WordPress Themes y Diseño Cómo apicar formato a la primera imagen.

Etiquetado: , ,

Este debate contiene 11 respuestas, tiene 3 mensajes y lo actualizó  imported_fliberty hace 8 años, 7 meses.

  • Autor
    Publicaciones
  • #16784

    imported_fliberty
    Participante

    <p>Hola, quisiera saber si se puede aplicar formatos solo a la primera imagen de la entrada; les explicaré:</p>
    <p>Yo inserto una imagen al inicio de la entrada y luego le agrego otro tipo de imágenes para delimitar ciertas áreas, como por ejemplo información técnica, sinopsis, etc…</p>
    <p>Al darle formato a las imágenes para el home mediante css:<br />

    <br />
    Estos se aplican a todas las imágenes de la entrada que se muestren en el index; pero lo que yo quisiera hacer es aplicar formato solo a la primera imagen y no a las demás.</p>
    <p>Espero que me puedan ayudar…
    </p>

  • #39587

    Pedro Raul
    Participante

    la idea es aplicar la clase al primer post mostrado por el loop.

    hice un tuto. puede verlo

    http://www.ozoneekiz.net/paginas/tutoriales/wordpress/como-hacer-que-el-primer-post-se-vea-diferente

  • #39631

    imported_fliberty
    Participante

    Bueno la idea es aplicar formato a la primera imagen de cada entrada que se muestra en el index, y dejar de lado las demás imágenes que contengan cada una de las entradas.

  • #39652

    Pedro Raul
    Participante

    por ello debes identificar el primero contenedor (div) para aplicarle un estilo a la imágenes que contenga.

    luego usar el selector: ([b]he aquí el detalle)[/b]

    .miprimerdiv img{}

    entonces nuestro primer div quedará de la siguiente manera <div class=”post miprimerdiv” ….

    en el tuto que hice esta bien explicado

  • #39654

    davidlluna
    Participante

    Hola!, también hay un pseudo selector CSS que puedes aplicar al primer elemento se llama first-child

    http://www.w3schools.com/css/pr_pseudo_first-child.asp

    Lo que pasa es que en IE6 por ejemplo no está soportado

    Saludos!

  • #39656

    Pedro Raul
    Participante

    En todo caso puedes usar esa seudo classe. por que ie6 ya murió y a todos aquellos “forences” por favor entierren al muerto.

  • #39669

    imported_fliberty
    Participante

    la pseudo clase en mención, como podría aplicarla a la imagen, la cual siempre coloco en la parte superior de la entrada, es decir:

    imagen
    contenido de la entrada…

    Y bueno quiero que ese formato se aplique a todas las entradas que se muestran en el home,y por lo que leí en el tutorial que hiciste es aplicar el formato solo a la primera entrada; he estado pensando y leí sobre la letras capitales, y en la función se inyectaba un span a la primera letra para aplicarle formato, y bueno, pensé que se podria hacer lo mismo con la primera imagen, pero aún no resuelvo como hacerlo.

    Me gustaría tener más información de la pseudoclase de la que me hablaste.

    Muchas gracias por tu ayuda…

  • #39673

    Pedro Raul
    Participante

    peas ahora si no te entiendo nada.

    el titulo del post es:

    [quote]Cómo apicar formato a la primera imagen[/quote]

    ahora mencionas:
    [quote]Y bueno quiero que ese formato se aplique a todas las entradas que se muestran en el home[/quote]

    Acerca de la de first-child

    [b]prueba con:[/b]

    Aquí tiene más información:
    http://librosweb.es/css_avanzado/capitulo3/pseudo-clases.html

  • #39675

    davidlluna
    Participante

    Hola fliberty! Si lo de que el formato se aplique a todas las entradas en home es una pregunta nueva crea por favor en un hilo nuevo

    Saludos!

  • #39692

    imported_fliberty
    Participante

    Haber, creo que no me han entendido. Cada entrada que yo escribo contienen una imagen al inicio de ella (en su mayoría), en el home utilizo the_content(”) para mostrar el contenido de la entrada.
    En el loop dle index.php, the_content lo tengo delimitado por


    Lógicamente el contenido del single contiene otro div.
    Para la imagen del loop del index, el formato css es el siguiente:

    Pero el problema es que esos formatos se aplican a todas las imágenes que se muestran en el index; si ustedes revisan mi página http://www.pachakamaq.com se darán cuenta de lo que digo.

    Teniendo en cuenta lo que quiero hacer Pedro Raúl, creo que me diste la solución, pero ahora tendré que hacer ciertas modificaciones… Lógicamente el uso de esa pseudo clase no va a servir para los que están aún en la edad de piedra con IE 6.

    Muchas gracias…

    PD. El contenido del segundo enlace a la utilización de la pseudo clase es más entendible que el primero, será porque no domino ucho el inglés.
    Lluna, disculpa si no me di a entender bien, pero lo del formato que se aplique a todas las imágenes de las entradas del home es la pregunta que estoy haciendo; Muchas gracias y mil disculpas.

  • #39693

    imported_fliberty
    Participante

    Estuve probando la pseudo clase first-child; la he colocado de esta forma:


    Pero parece no funcionar, estoy haciendo algo mal?…

    Espero que me ayuden, muchas gracias.

  • #39699

    imported_fliberty
    Participante

    SOLUCIONADO:

    Después de intentar aplicar formato a la primera imagen de la entrada utilizando a pseudo clase first-child y prácticamente darme por vencido, ya que hice todas las combinaciones que creí posibles, opté por realizar lo siguiente:

    1. Identificar cuál era el selector de la imagen o imágenes en cuestión; para eso ingrese a la edición de una entrada, fui a modo HTML, y ubiqué la imagen. WordPress por defecto le agrega una clase a la imagen alignright: cuando la alineamos a la izquierda, alignleft: a la derecha y, aligncenter: cuando está centrada; en mi caso aligncenter.

    2. Aplicar el formato de acuerdo a esa clase; el cual fue:

    3. [b]Resultado:[/b]Efecto deseado.

    A todos, muchas gracias por la ayuda, que Dios les bendiga.

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest