我怎样才能在我的页面中分两栏显示这些图片？

时间：2012-07-03 作者：Mike Wills

This page 又长又笨重。我正在尝试找到一个插件/黑客，将此页面上的图像分为两列，以使其更易于消化。删除<p> 标签似乎无法实现这一点。我将所有图片托管在S3上，以降低带宽使用率（托管在家庭DSL上）。我看的图库插件有点让人困惑，我真的只是想要一些非常简单的东西。

这是我的帖子的一部分，我想写两个专栏：

<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>
有什么想法或想法吗？

3 个回复
SO网友:its_me

如果它对您来说是一个可用的选项，那么您可以更改[caption] 使用<span> 标记而不是<div>.

下面是如何更改标题快捷码的输出（将添加到theme functions.php中）：

// 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;

}
上述功能仅将标题图像的开头标记更改为<span> 而不是<div> （请参见最后几行）。为了进一步优化字幕输出并使其更具可读性，follow this excellent article by Justin Tadlock.

现在，这里有一个关于CSS应该如何的指针：

span.wp-caption {
    display: inline-block;
    /* add padding, margin, etc. as needed */
}

SO网友:Jon Schroeder

似乎每个div都被赋予了类“alignnone”如果您将其更改为“alignleft”（上载图片或编辑源时选择“left”），则也会将图片向左浮动，允许有两列。

SO网友:Simon

为什么不使用CSS对齐图像？

如果我没有错过这个案例中显而易见的东西（如果是这样的话，我的错），但是CSS就是为了这个（而不是改变源代码，而是改变布局）。

你可以使用；

.wp-caption {
    float: left;
    margin: 20px 40px;  /* spacing a bit */
    clear: none; /* or remove the clear:both from style.css */
 }
就这样。使用Firebug我可以看出它并不完美（因为页面上有没有标题的图像，所以设计不一致），但它更好。

结束
标签： gallery   小码农  

相关推荐

Get post image gallery link

我正在自定义帖子模板上显示特色图像，我想在附加图像库中插入“更多图像”文本链接。Wordpress提供了通过直接插入图库的说明，但我只想要一个链接，或者最好是一个模式弹出窗口来查看图库。我尝试了各种各样的插件，但似乎没有一个插件能与特色图片一起正常工作。