Выбираем и прикрепляем изображения с помощью метабокса с миниатюрами

Достаточно крупный, но ОЧЕНЬ полезный сниппет, который мы наверняка поставим на все свои проекты на WordPress. Действительно очень удобный! Суть его в следующем: код позволяет очень просто и быстро прикреплять изображения к записям с помощью метабокса в админке с перечнем всех картинок, представленных в виде миниатюр. Добавляем первый код в functions.php вашей темы WordPress. Второй, маленький кусочек вставляем в цикл вашей темы ВП для вывода изображений в ваших записях или на страницах. Ведь намного проще выбрать изображения для вставки одним кликом, нежели утруждать себя поход в раздел Медиафайлы.

attach-images-with-simple-thumbnail-selection-metabox-screenshot[1]

add_action("admin_init", "images_init");
add_action('save_post', 'save_images_link');
function images_init(){
          $post_types = get_post_types();
          foreach ( $post_types as $post_type ) {
                add_meta_box("my-images", "Pictures", "images_link", $post_type, "normal", "low");
          }
        }
function images_link(){
        global $post;
        $custom  = get_post_custom($post->ID);
        $link    = $custom["_link"][0];
        $count   = 0;
        echo '<div class="link_header">';
        $query_images_args = array(
                'post_type' => 'attachment',
                'post_mime_type' =>array(
                                'jpg|jpeg|jpe' => 'image/jpeg',
                                'gif' => 'image/gif',
                                'png' => 'image/png',
                                ),
                'post_status' => 'inherit',
                'posts_per_page' => -1,
                );
        $query_images = new WP_Query( $query_images_args );
        $images = array();
        echo '<div class="frame">';
        $thelinks = explode(',', $link);
        foreach ( $query_images->posts as $file) {
           if(in_array($images[]= $file->ID, $thelinks)){
              echo '<label><input type="checkbox" group="images" value="'.$images[]= $file->ID.'" checked /><img src="'.$images[]= $file->guid.'" width="60" height="60" /></label>';
                 }else{
              echo '<label><input type="checkbox" group="images" value="'.$images[]= $file->ID.'" /><img src="'.$images[]= $file->guid.'" width="60" height="60" /></label>';
                 }
                $count++;
        }
        echo '<br /><br /></div></div>';
        echo '<input type="hidden" name="link" class="field" value="'.$link.'" />';
        echo '<div class="images_count"><span>Files: <b>'.$count.'</b></span> <div class="count-selected"></div></div>';
}
function save_images_link(){
        global $post;
        if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE){ return $post->ID; }
        update_post_meta($post->ID, "_link", $_POST["link"]);
}
add_action( 'admin_head-post.php', 'images_css' );
add_action( 'admin_head-post-new.php', 'images_css' );
function images_css() {
        echo '<style type="text/css">
        #my-images .inside{padding:0px !important;margin:0px !important;}
        .frame{
                width:100%;
                height:320px;
                overflow:auto;
                background:#e5e5e5;
                padding-bottom:10px;
                }
        .field{width:800px;}
        #results {
                width:100%;
                overflow:auto;
                background:#e5e5e5;
                padding:0px 0px 10px 0px;
                margin:0px 0px 0px 0px;
                }
        #results img{
                border:solid 5px #FDD153;
                -moz-border-radius:3px;
                margin:10px 0px 0px 10px;
                }
        .frame label{
                margin:10px 0px 0px 10px;
                padding:5px;
                background:#fff;
                -moz-border-radius:3px;
                border:solid 1px #B5B5B5;
                height:60px;
                display:block;
                float:left;
                overflow:hidden;
                }
        .frame label:hover{
                background:#74D3F2;
                }
        .frame label.checked{background:#FDD153 !important;}
        .frame label input{
                opacity:0.0;
                position:absolute;
                top:-20px;
                }
        .images_count{
                font-size:10px;
                color:#666;
                text-transform:uppercase;
                background:#f3f3f3;
                border-top:solid 1px #ccc;
                position:relative;
                }
        .selected_title{border-top:solid 1px #ccc;}
        .images_count span{
                color:#666;
                padding:10px 6px 6px 12px;
                display:block;
                }
        .count-selected{
                font-size:9px;
                font-weight:bold;
                text-transform:normal;
                position:absolute;
                top:10px;
                right:10px;
                }
                </style>';
}
add_action( 'admin_head-post.php', 'images_js' );
add_action( 'admin_head-post-new.php', 'images_js' );
function images_js(){?>
<script type="text/javascript">
jQuery(document).ready(function($){
  $('.frame input').change(function() {
        var values = new Array();
        $("#results").empty();
        var result = new Array();
        $.each($(".frame input:checked"), function() {
                result.push($(this).attr("value"));
                $(this).parent().addClass('checked');
        });
        $('.field').val(result.join(','));
        $('.count-selected').text('Selected: '+result.length);
        $.each($(".frame input:not(:checked)"), function() {
                $(this).parent().removeClass('checked');
        });
  });
        var result = new Array();
        $.each($(".frame input:checked"), function() {
                result.push($(this).attr("value"));
                $(this).parent().addClass('checked');
        });
        $('.field').val(result.join(','));
        $('.count-selected').text('Selected: '+result.length);
        $.each($(".frame input:not(:checked)"), function() {
                $(this).parent().removeClass('checked');
        });
});
</script>
<?}
function wps_thumbnails_list(){
           global $post;
           $image = get_post_meta($post->ID, '_link', true);
           $image = explode(",", $image);
           foreach($image as $images){
                $url = wp_get_attachment_image_src($images, 1, 1);
                echo '<a href="';
                echo $url[0];
                echo '" class="lightbox">';
                echo wp_get_attachment_image($images,'thumbnail', 1, 1);
                echo '</a>';
                }
}
<?
      wps_thumbnails_list()
?>
VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
  • Ий

    Круто. А как можно реализовать вывод отображение не всех картинок, а только тек которые загружены в запись?

    • Ий

      Ответ найден:
      Just add this
      ‘post_parent’ => $post->ID
      Under
      ‘posts_per_page’ => -1,

      • ADv

        Благодарю 🙂

Scroll To Top