이미지 인스턴스에 옵션 추가 (첨부 파일 디스플레이 설정)

Wordpress 3.9에서 이미지 프레젠테이션을위한 간단한 재사용 가능한 플러그인을 만들려고하는데 벽돌 벽에 부딪친 것 같습니다.

이미지 인스턴스에 몇 가지 옵션을 추가하고 싶습니다. ( "첨부 파일 디스플레이 설정"의 세부 사항). 이미지 크기 드롭 다운을 비활성화 (회색으로 표시)하거나 고정 페이지 위치 옵션 등을 표시하는 "응답"이라는 확인란과 같습니다.

이미지를 선택 / 교체 할 때 미디어 관리자에서 사용하여 일부 사용자 정의 필드를 추가 할 수 있었고 attachment_fields_to_edit형제 필터이지만이 필드는 이미지 자체 (또는 원하는 경우 이미지 첨부 포스트 객체)에 연결되므로 페이지에 동일한 이미지의 두 인스턴스가있는 경우 동일한 사용자 정의 필드 값을 공유합니다.

워드 프레스는 주석이 달린 이미지 화면을 대체합니다.

a) 내가 추가 한 사용자 지정 텍스트 필드, 인스턴스에 연결할 수 없으며 동일한 이미지의 모든 인스턴스가이 값을 공유합니다.

b) 여기에있는 모든 것이 각 인스턴스를 따르는 것처럼 옵션을 추가하고 싶은 영역입니다.

주석이 달린 Wordpress 이미지 세부 사항 화면.

c) 이전 화면과 동일한 디스플레이 설정을 보여 주지만 Wordpress 3.9에서 이미지 상단의 "연필"을 클릭하면 다르게 표시됩니다. 에서 제공 한 사용자 정의 옵션 attachment_fields_to_edit이이 화면에 전혀 없는지 확인하십시오.

백본의 작동 방식이나 wp.media 객체를 수정하는 모범 사례가 무엇인지 완전히 이해하지 못했지만 php, js 및 googling에 대한 대답은 상당히 유능합니다. 그러나 이것은 지금 며칠 동안 저를 엉망으로 만들었으므로 어떤 도움이라도 크게 감사하겠습니다.

읽어 주셔서 감사합니다!

plugin-development media-library media-settings

— isNaN
소스

사용하는 용어가 약간 혼란 스럽더라도 문제 분석에 대해 완벽하게 맞습니다. "이미지의 인스턴스"와 같은 것은 없습니다. 이미지를 게시물에 삽입 한 후에는 원래 이미지 제목 또는 캡션 (예 : 미디어 메뉴를 통해)을 수정해도 게시물에 삽입 된 이미지는 수정되지 않습니다. 확인하려면 "텍스트"탭을 클릭하고 생성 된 HTML 코드를 확인하십시오.

"미디어 추가"버튼으로 이미지를 삽입하면 다음과 같이됩니다.

"포스트에 삽입"을 클릭하면 미디어 모달에서 데이터를 가져와 HTML 코드를 생성 <img>합니다. 선택한 크기에 따라 올바른 소스가 포함 된 태그, 대체 텍스트로 제목 및 캡션이있는 경우 캡션이 표시됩니다. 이 코드는 TinyMCE 편집기의 올바른 위치에 삽입됩니다 ( "텍스트"탭을 통해 확인)
"비주얼"탭 내에서 "뷰"는 비주얼 편집기 내의 이미지를 나타 내기 위해 생성됩니다. 이보기에는 이미지와 편집 및 삭제 버튼이 표시됩니다. 이보기는 HTML 코드를 건드리지 않고 이미지의 크기를 조정하고 다른 매개 변수를 시각적으로 변경할 수있는 기능입니다.

이미지의 TinyMCE보기

따라서 일부 사용자 정의 데이터를 추가하려는 경우 (첨부 파일에 첨부되지 않은 사용자 정의 필드라고 부름) 데이터를이 HTML 코드에 삽입 한 다음 시각적으로이 데이터를 변경할 수 있도록보기를 수정해야합니다. . 질문을 잘 이해하면 페이지에서 특정 방식으로 이미지를 배치하는 데이터를 추가하려고합니다. 이를 위해 사용자 정의 클래스를 사용할 수 있습니다.

생성 된 HTML 코드는 다음과 같습니다.

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

그리고 크기 드롭 다운 목록에서 코드를 다음과 같이 표시하는 "반응 형"선택을 원합니다.

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

이를 수행하는 방법은 다음과 같습니다. 포스트 편집 페이지에서 새 스크립트를 큐에 넣을 플러그인을 작성하십시오.

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' ));
    }
}

그런 다음 customView.js는 다음과 같아야합니다.

(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, _));

결과는 다음과 같습니다.

크기 선택 드롭 다운 목록의 반응 형 옵션

— 파비앙 콰트 라보
소스

대단히 감사합니다! 이제 "이미지의 인스턴스"는 대부분 편집기에서 문자열로 저장됩니다. 그리고 내가 찾던 것은 "media.view.ImageDetails"입니다. 느린 응답으로 죄송합니다. 작년 6 월까지이 질문을 포기했습니다. :)

— isNaN