将附件图像与POST环路分开

时间:2011-06-18 作者:david arthur

我正在尝试为幻灯片库脚本创建一组图像,因此需要将图像从后期循环中分离出来-有什么想法可以实现这一点并使添加图像更容易?我可以使用脚本获取附件(见下文),但它似乎有点混乱,因为:

上传的图像显示在帖子文本区域,然后需要删除,否则会出现重复

http://digwp.com/2009/08/awesome-image-attachment-recipes-for-wordpress/

更好的选择是使用类似“更多字段”的插件并创建多个文本字段来发布照片的URL吗?

因此,他们使用媒体库上传图像并抓取URL放在帖子中。

理想的情况下,我试图得到一个简单的场景,他们只需将图像一次性上传为图库或单个图像,编写图库描述文本,然后保存。

4 个回复
SO网友:chrisguitarguy

将图像分配给给定帖子的最佳方法是在WordPress帖子编辑/新建帖子区域上载图像。您还可以从中删除图像。

话虽如此,这里将是你如何做到这一点。你要钓到wp_enqueue_script, 和电话wp_enqueue_script 将库脚本添加到页面。然后您将使用wp_localize_script, 它将在脚本的正上方为您打印一个漂亮的javascript对象。

在挂钩函数中,您可以访问$post 变量,其中包含当前帖子。你不需要在圈内就能做到这一点。如果你有,你可以得到子帖子(比如附件),这使得获取循环外的图像非常容易。

<?php
add_action( \'wp_enqueue_scripts\', \'wpse20321_enqueue_scripts\' );
function wpse20321_enqueue_scripts()
{
    // If this isn\'t a singular post, return -- don\'t enqueue anything
    if( ! is_singular() ) return;

    // enqueue your gallery script
    wp_enqueue_script( 
        \'wpse20321-gallery-script\', 
        trailingslashit( get_stylesheet_directory_uri() ) . \'path/to/gallery.js\', 
        // use trailingslashit( plugin_dir_url( __FILE__ ) ) . \'path/to/gallery.js\' if you\'re in a plugin
        array( \'jquery\' )
    );

    // now we\'ll get the attachments...
    global $post;
    if( empty( $post ) ) $post = get_queried_object();
    $attachments = get_posts(
        array(
            \'post_type\'         => \'attachment\',
            \'post_mime_type\'    => \'image\',
            \'post_status\'       => \'inherit\',
            \'post_parent\'       => $post->ID
        )
    );
    if( ! $attachments ) return;
    $out = array();
    $out[\'img_list\'] = array();
    foreach( $attachments as $a )
    {
        $img = wp_get_attachment_image_src( $a->ID, \'full\' );
        $out[\'img_list\'][] = array( 
            \'image\'     => $img[0],
            \'width\'     => $img[1],
            \'height\'    => $img[2]
        );
    }

    // call wp_localize_script, which will spit out a nice JSON for you,
    // right before your enqueued gallery script, ready for use.
    // the object name will be wpse20321
    wp_localize_script( 
        \'wpse20321-gallery-script\', 
        \'wpse20321\',
        $out 
    );
}
您可以向该JS对象添加任何需要的内容。要为图像保存标题属性吗?

foreach( $attachments as $a )
    {
        $img = wp_get_attachment_image_src( $a->ID, \'full\' );
        $out[\'img_list\'][] = array( 
            \'image\'     => $img[0],
            \'width\'     => $img[1],
            \'height\'    => $img[2],
            \'title\'     => $a->post_title
        );
    }

SO网友:Ramkumar M

所有上载图像都保存在媒体库下。您可以在撰写新文章时编写图像描述文本。

步骤:


帖子->添加新内容->上传图片->选择媒体库->选择图片->现在您有了更多选项,如图片(标题、备选文本、标题、描述、链接URL、对齐方式、大小)->然后单击插入帖子->保存所有更改。

我希望这对你有用

SO网友:petermolnar

骇人听闻的黑客,但它会起作用:

在需要JSON对象的标题中,放置一个字符串并确保它是唯一的。(例如,生成uniqid()

  • 在模板中,在标题的最开始处,放置。这将关闭输出,而是将所有输出读入缓冲区正如我所说,糟透了。如果您只需将页面末尾的JSON放入页脚,但将循环中的图像收集到一个字符串中,效果会更好。

  • SO网友:endle.winters

    在函数文件中放置以下内容:

    //gives me different image sizes
    if ( function_exists( \'add_image_size\' ) ) 
    {
    add_image_size( \'t1x1\', 145, 200, true );
    add_image_size( \'t2x2\', 200, 200, true );
    add_image_size( \'t3x2\', 307, 417, true );
    add_image_size( \'t3x3\', 600, 400, true );
    add_image_size( \'t4x3\', 680, 500, true );
    }
    ///////////////////////////////////////////////
    // Start  Gallery Function
    ////////////////////////////////////////////////
    
    function wpo_get_images($size = \'thumbnail\', $limit = \'0\', $offset = \'0\', $big = \'large\', $post_id = \'$post->ID\', $link = \'1\', $img_class = \'attachment-image\', $wrapper = \'div\', $wrapper_class = \'attachment-image-wrapper\' , $wrapper2 = \'div\' ) {
    
        global $post;
    
        $images = get_children( array(\'post_parent\' => $post_id, \'post_status\' => \'inherit\', \'post_type\' => \'attachment\', \'post_mime_type\' => \'image\', \'order\' => \'ASC\', \'orderby\' => \'menu_order ID\') );
    
        if ($images) {
    
            $num_of_images = count($images);
    
            if ($offset > 0) : $start = $offset--; else : $start = 0; endif;
            if ($limit > 0) : $stop = $limit+$start; else : $stop = $num_of_images; endif;
            $i = 0;
    
            foreach ($images as $attachment_id => $image) {
                if ($start <= $i and $i < $stop) {
    
                $img_title = $image->post_title;   // title.
    
                $img_description = $image->post_content; // description.
    
                $img_caption = $image->post_excerpt; // caption.
    
                //$img_page = get_permalink($image->ID); // The link to the attachment page.
    
                $img_alt = get_post_meta($attachment_id, \'_wp_attachment_image_alt\', true);
    
                if ($img_alt == \'\') {
    
                $img_alt = $img_title;
    
                }
    
                    if ($big == \'large\') {
    
                    $big_array = image_downsize( $image->ID, $big );
    
                    $img_url = $big_array[0]; // large.
    
                    } else {
    
                    $img_url = wp_get_attachment_url($image->ID); // url of the full size image.
    
                    }
    
    
                // FIXED to account for non-existant thumb sizes.
    
                $preview_array = image_downsize( $image->ID, $size );
    
                if ($preview_array[3] != \'true\') {
    
                $preview_array = image_downsize( $image->ID, \'thumbnail\' );
    
                $img_preview = $preview_array[0]; // thumbnail or medium image to use for preview.
    
                $img_width = $preview_array[1];
    
                $img_height = $preview_array[2];
    
                } else {
    
                $img_preview = $preview_array[0]; // thumbnail or medium image to use for preview.
    
                $img_width = $preview_array[1];
    
                $img_height = $preview_array[2];
    
                }
    
                // End FIXED to account for non-existant thumb sizes.
                ///////////////////////////////////////////////////////////
    
                // This is where you\'d create your custom image/link/whatever tag using the variables above.
    
                // This is an example of a basic image tag using this method.
    
                ?>
    
                <?php if ($wrapper != \'0\') : ?>
    
                <<?php echo $wrapper; ?> class="<?php echo $wrapper_class; ?>">
    
                <?php endif; ?>
    
                <?php if ($wrapper2 != \'0\') : ?>
    
                <<?php echo $wrapper2; ?>>
    
                <?php endif; ?>
    
                <?php if ($link == \'1\') : ?>
    
    
                <a href="<?php echo $img_url; ?>" title="<?php echo $img_title; ?>">
    
                <?php endif; ?>
    
                <img class="<?php echo $img_class; ?>" src="<?php echo $img_preview; ?>" alt="<?php echo $img_alt; ?>" title="<?php echo $img_title; ?>" />
    
                <?php if ($link == \'1\') : ?>
    
    
                </a>
    
                <?php endif; ?>
    
                <?php if ($img_caption != \'\') : ?>
    
                <div class="attachment-caption"><?php echo $img_caption; ?></div>
    
                <?php endif; ?>
    
                <?php if ($img_description != \'\') : ?>
    
                <div class="attachment-description"><?php echo $img_description; ?></div>
    
                <?php endif; ?>
    
                <?php if ($wrapper2 != \'0\') : ?>
    
                </<?php echo $wrapper2; ?>>
    
                <?php endif; ?>
    
                <?php if ($wrapper != \'0\') : ?>
    
                </<?php echo $wrapper; ?>>
    
                <?php endif; ?>
    
                <?
    
                // End custom image tag. Do not edit below here.
    
                ///////////////////////////////////////////////////////////
    
                }
                $i++;
            }
        }
    } 
    ///////////////////////////////////////////////
    
    然后调用上载到任何帖子的图像:

    <ul>
    
    <?php wpo_get_images(\'t4x3\',\'0\',\'0\',\'slide\',"$post->ID",\'0\',\'portfolio-photo\',\'li\', \'theclass\' );?>
    
    
    </ul>   
    
    您可以看到其中有不同的选项可以设置,例如图像大小(第一个选项和其他一些选项)。

    结束

    相关推荐

    Resizing all images

    我刚刚更改了博客的主题,由于页面宽度很小,它打破了布局。我之前的大多数图片(附在帖子中)的宽度都在600px左右,现在我需要按450px的比例调整它们的大小。如何一次性调整它们的大小?有这个插件吗?P、 美国:编写CSS规则是一个很好的选择,我已经做到了。但我认为调整图像大小也会减少每个页面的下载开销!