¿Cómo puedo mostrar estas imágenes en dos columnas en mi página?

2

Esta página es larga e incómoda. Estoy tratando de encontrar un plugin / hack que ponga las imágenes en esta página en dos columnas para que sea un poco más fácil de digerir. Eliminar las etiquetas <p> no parece lograr eso. Tengo todas las imágenes alojadas en S3 para reducir el uso del ancho de banda (alojado en el DSL doméstico). Los complementos de la galería que busqué son un poco confusos y realmente quiero algo realmente simple.

Aquí hay una parte de mi publicación que quiero hacer dos columnas:

<p>[caption id="" align="alignnone" width="350" caption="I 300 w/ Hitachi Alt"]
<a href="http://cdn.mikewills.me/charliesrepair/I_300_w_Hitachi_alt.jpg" target="_blank">
<img src="http://cdn.mikewills.me/charliesrepair/I_300_w_Hitachi_alt_thumb.jpg"alt="I 300 w/ Hitachi Alt" /></a>
[/caption]
[caption id="" align="alignnone" width="350" caption="Hitachi mounting bracket"]
<a href="http://cdn.mikewills.me/charliesrepair/Hitachi_mounting_bracket.jpg" target="_blank">
<img src="http://cdn.mikewills.me/charliesrepair/Hitachi_mounting_bracket_thumb.jpg"alt="Hitachi mounting bracket" /></a>
[/caption]</p>

¿Algún pensamiento o idea?

    
pregunta Mike Wills 03.07.2012 - 04:48

3 respuestas

3

Si es una opción utilizable para usted, puede cambiar la salida de [caption] para usar la etiqueta <span> en lugar de un <div> .

Esta es la forma en que cambiaría la salida (que se agregará en las funciones de tema.php) del código breve de subtítulos:

// Source code from http://core.svn.wordpress.org/trunk/wp-includes/media.php

add_filter( 'img_caption_shortcode', 'wpse57262_cleaner_caption', 10, 3 );

function wpse57262_cleaner_caption( $output, $attr, $content ) {

    if ( ! isset( $attr['caption'] ) ) {
        if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {
            $content = $matches[1];
            $attr['caption'] = trim( $matches[2] );
        }
    }

    extract(shortcode_atts(array(
        'id'    => '',
        'align' => 'alignnone',
        'width' => '',
        'caption' => ''
    ), $attr));

    if ( 1 > (int) $width || empty($caption) )
        return $content;

    if ( $id ) $id = 'id="' . esc_attr($id) . '" ';

    $output = '<span ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
    . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></span>';

    return $output;

}

La función anterior solo cambia las etiquetas de apertura de una imagen con subtítulos para que sean <span> en lugar de <div> (vea las últimas líneas). Para optimizar aún más la salida de Caption y hacerla más legible, siga este excelente artículo de Justin Tadlock .

Ahora hay un indicador de cómo debería ser tu CSS:

span.wp-caption {
    display: inline-block;
    /* add padding, margin, etc. as needed */
}
    
respondido por el its_me 03.07.2012 - 05:57
1

Parece que a cada div se le asigna la clase "alignnone". Si cambia eso a "alignleft" (seleccione "izquierda" cuando cargue la imagen o edite la fuente), eso también hará que las imágenes floten hacia la izquierda, permitiendo dos columnas.

    
respondido por el Jon Schroeder 03.07.2012 - 07:30
0

¿Por qué no usar CSS para alinear imágenes?

Si no me olvido de algo obvio en este caso (si es así, mi error), pero CSS está destinado a eso (en lugar de cambiar la fuente, cambiar el diseño).

Podrías usar;

.wp-caption {
    float: left;
    margin: 20px 40px;  /* spacing a bit */
    clear: none; /* or remove the clear:both from style.css */
 }

y, eso es todo. Usando Firebug, pude ver que no es perfecto (ya que hay imágenes sin títulos en la página, por lo que el diseño no es consistente) pero es mejor.

    
respondido por el Simon 03.07.2012 - 21:24

Lea otras preguntas en las etiquetas