Thêm nhiều tùy chọn hơn vào thể hiện của một hình ảnh. (Cài đặt hiển thị tệp đính kèm)

Tôi đang cố gắng xây dựng một plugin có thể tái sử dụng đơn giản để trình bày hình ảnh trong Wordpress 3.9 và có vẻ như tôi đã gặp phải một bức tường gạch.

Tôi muốn có thể thêm một vài tùy chọn vào thể hiện của hình ảnh. (Các chi tiết trong "Cài đặt hiển thị tệp đính kèm"). Giống như một hộp kiểm có nội dung "Phản hồi" vô hiệu hóa (xóa bỏ) phần thả xuống kích thước hình ảnh hoặc các tùy chọn cho các vị trí trang cố định, v.v.

Trong Trình quản lý phương tiện khi chọn / thay thế hình ảnh, tôi đã có thể thêm một số trường tùy chỉnh bằng cách sử dụng attachment_fields_to_editvà đó là các bộ lọc anh chị em, tuy nhiên các trường này sẽ tự gắn vào hình ảnh (hoặc đối tượng bài đăng đính kèm hình ảnh nếu bạn muốn) nếu tôi có hai bản sao của cùng một hình ảnh trên một trang, chúng sẽ chia sẻ cùng một giá trị của trường tùy chỉnh của tôi.

a) Trường Văn bản tùy chỉnh tôi đã thêm, tôi không thể đính kèm trường hợp này vào tất cả các trường hợp của cùng một hình ảnh chia sẻ giá trị này.

b) Đây là khu vực mà tôi muốn thêm tùy chọn, vì mọi thứ ở đây dường như tuân theo từng trường hợp.

c) Điều này hiển thị các cài đặt hiển thị giống như trong màn hình trước, tuy nhiên nó được hiển thị khác khi nhấp vào "bút chì" trên đầu hình ảnh trong Wordpress 3.9. Lưu ý cách các tùy chọn được cung cấp bởi hoàn toàn attachment_fields_to_editkhông có trên màn hình này.

Mặc dù tôi chưa hiểu rõ về cách hoạt động của xương sống hoặc cách thực hành tốt nhất để sửa đổi các đối tượng wp.media là gì, tôi khá thành thạo với cả php, js và googling để trả lời. Nhưng điều này đã khiến tôi bối rối trong vài ngày nay, vì vậy bất kỳ sự giúp đỡ nào cũng được đánh giá cao.

Cảm ơn vì đã đọc!

Bạn hoàn toàn đúng về việc phân tích vấn đề, ngay cả khi các điều khoản bạn sử dụng hơi khó hiểu. Không có thứ gọi là "ví dụ của hình ảnh": một khi bạn đã chèn hình ảnh vào bài đăng, sửa đổi tiêu đề hoặc chú thích hình ảnh gốc (ví dụ thông qua menu Media) sẽ không sửa đổi hình ảnh được chèn vào bài đăng. Để thuyết phục bạn, nhấp vào tab "Văn bản" và kiểm tra mã HTML đã tạo.

Đây là những gì xảy ra khi bạn chèn một hình ảnh bằng nút "Thêm phương tiện":

1. Khi bạn nhấp vào "Chèn để đăng", dữ liệu được lấy từ phương thức Media để tạo một số mã HTML: <img>thẻ với nguồn chính xác tùy thuộc vào kích thước bạn chọn, tiêu đề là văn bản thay thế và chú thích nếu có. Mã này được chèn vào đúng vị trí trong trình soạn thảo TinyMCE (kiểm tra mã qua tab "Văn bản")

2. Trong tab "Trực quan", "chế độ xem" được tạo để thể hiện hình ảnh trong trình chỉnh sửa hình ảnh. Khung nhìn này hiển thị hình ảnh và hai nút: chỉnh sửa và xóa. Chế độ xem này là những gì cho phép bạn thay đổi kích thước hình ảnh và thay đổi một số thông số khác một cách trực quan mà không cần chạm vào mã HTML.

Vì vậy, nếu bạn muốn thêm một số dữ liệu tùy chỉnh (không gọi nó là trường tùy chỉnh vì nó không được đính kèm với bất kỳ bài đăng đính kèm nào), bạn sẽ phải chèn nó vào mã HTML này và sau đó sửa đổi chế độ xem để cho phép thay đổi trực quan dữ liệu này . Nếu tôi hiểu rõ câu hỏi của bạn, bạn muốn thêm dữ liệu sẽ định vị hình ảnh theo cách cụ thể trên trang. Bạn có thể sử dụng một lớp tùy chỉnh cho việc này.

Đây là mã HTML đã được tạo:

<img class="alignnone size-medium wp-image-10" src="http://myserver.com/wp-content/uploads/2014/08/opensource-300x259.gif" alt="opensource" width="300" height="259" />

Và bạn muốn có một lựa chọn "đáp ứng" trong danh sách thả xuống kích thước sẽ làm cho mã trông như sau:

<img class="alignnone size-responsive wp-image-10" src="http://myserver.com/wp-content/uploads/2014/08/opensource-300x259.gif" alt="opensource" />

Đây là cách để đạt được điều này: tạo một plugin sẽ ghi lại một tập lệnh mới trên trang chỉnh sửa bài đăng.

add_action( 'admin_enqueue_scripts', 'wpse16975_custom_image_view');
function wpse16975_custom_image_view($hook){
    if($hook == 'post.php'){
        wp_enqueue_script( 'custom_image_view', plugin_dir_url( __FILE__ ) . '/customView.js', array( 'media-views' ));
    }
}

Sau đó, customView.js sẽ trông như thế này:

(function($, _){
    var media = wp.media;

    var origImageDetails = media.view.ImageDetails;
    media.view.ImageDetails = origImageDetails.extend({
        initialize: function() {
            origImageDetails.prototype.initialize.apply( this, arguments );
            this.on( 'post-render', this.responsiveSize );
            this.listenTo( this.model, 'change:size', this.setReponsiveSize );
            this.initSize = this.model.get('size');
        },

        responsiveSize: function(){
            // add a "Reponsive" option to the Size dropdown setting
            var $opt = $(document.createElement('option')).attr('value', 'responsive').text('Responsive');
            if(this.initSize == 'responsive') $opt.attr('selected', 'selected');
            this.$('.embed-media-settings select.size').append($opt);
        },

        setReponsiveSize: function(){
            // remove width and height
            if(this.model.get('size') == 'responsive') this.controller.image.set({width:null, height:null}, {silent:true});
        }

    });
}(jQuery, _));

Và đây là kết quả :