Bilder von der Editor-Auswahl ausschließen

  • Hallo zusammen,

    Setup

    ich fahre eine aktuelle WordPress Installation. Der ganze Auftritt wird modular mittels ACF (Advanced Custom Fields) aufgebaut. Ich habe mit ACF ein WYSIWYG-Modul (bei ACF heißt das "Layout") gebaut. Darin ist der einfache/alte WP Editor als Feld eingebunden (also nicht der Gutenberg). Außerdem ist "Advanced Editor Tools (previously TinyMCE Advanced)" installiert.

    Anforderung

    Da ich für Bild-Einbindungen eigene Module habe, möchte ich verhindern, dass der User über den "Dateien hinzufügen"-Dialog Bilder einbinden kann. Er soll aber weiterhin PDFs, DOCs etc. auswählen und verlinken können.

    Problem

    Bisher konnte ich aber nur Hooks finden, die auch den _Upload_ von Bildern unterbinden. Das möchte ich natürlich nicht, da der User ja weiterhin Bilder hochladen können, aber eben nur in den dafür vorgesehenen Modulen einbinden, soll.

    Ich hatte schon den Hook "media_view_settings" ausprobiert und dort mittels "unset($settings['mimeTypes']['image'])" den Bild MIME-Type rausgenommen. Das hat aber leider nichts gebracht.

    Eine denkbare Alternative wäre es, im normalen Link-Dialog nicht nur nach Seiten, sondern auch nach Dateien suchen zu können. Aber auch dazu konnte ich nichts finden.

    Hat jemand eine Idee?
    Die langweilige Lösung wäre es den Button "Dateien hinzufügen" mit ACF auszublenden. Dann müsste sich der User aber immer erst die Media-URL zurecht kopieren und sie dann über den Link-Dialog einbinden.

    Über Ideen wäre ich sehr dankbar.

    Besten Gruß
    Nick

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • ... möchte ich verhindern, dass der User über den "Dateien hinzufügen"-Dialog Bilder einbinden kann. Er soll aber weiterhin PDFs, DOCs etc. auswählen und verlinken können.


    Hier ein möglicher Ansatz anhand von Codebeispielen in der wordpress.org Dokumentation, Tests auf Nebenwirkungen vorausgesetzt...

    Code
    function b3317133_ajax_query_attachments_args( $query = array() ) {
        $unsupported_mimes = array( 'image/jpeg', 'image/gif', 'image/png', 'image/bmp', 'image/tiff', 'image/x-icon' );
        $all_mimes = get_allowed_mime_types();
        $accepted_mimes = array_diff( $all_mimes, $unsupported_mimes );
        $query['post_mime_type'] = $accepted_mimes;
        return $query;
    }
    add_filter( 'ajax_query_attachments_args', 'b3317133_ajax_query_attachments_args' );
  • Hier ein möglicher Ansatz anhand von Codebeispielen in der wordpress.org Dokumentation, Tests auf Nebenwirkungen vorausgesetzt...

    Vielen vielen Dank, b3317133!

    Das Filtern hat damit funktioniert.
    Ich habe das noch so umgeschrieben, dass er einfach alle Types rausfiltert, die mit "image" beginnen:

    Code
    add_filter('ajax_query_attachments_args', static function ($query = []) {
        $query['post_mime_type'] = array_filter(get_allowed_mime_types(), static function ($mimeType) {
            // Remove all image mime-types from media selection
             return substr($mimeType, 0, 5) !== 'image';
        });
    
    
        return $query;
    });

    Neues Problem was sich dadurch leider ergibt, woran ich nicht gedacht habe: ACF benutzt auch bei den Bild-Modulen dieses Media-Popup und nun kann man nirgends mehr ein Bild auswählen. Ich muss mir also überlegen ob ich irgendwie an den ACF Context (also ob es gerade um den Editor geht oder nicht) rankomme.

    Falls ich was finde, meld ich mich. Oder falls da jemand eine Idee zu hat, gerne melden.

  • Bzgl. des neuen Problems auch der Hinweis:

    ...Tests auf Nebenwirkungen vorausgesetzt...


    Schau Dir z.B. die Parameter in [FONT=Courier New]$query[/FONT] an, die bei den jeweiligen Aufrufen in [FONT=Courier New]ajax_query_attachments_args[/FONT] ankommen, evtl. kannst Du da eine Unterscheidung feststellen. Alternativ kann man in PHP evtl. über [FONT=Courier New]debug_backtrace()[/FONT] die Herkunft des Aufrufs feststellen und so entscheiden, wann man die Bilder rausnimmt und wann nicht. Oder man begibt sich in die JavaScript Welt der Seite und versucht, alleine darüber in die Parameter für den gewünschten Button einzugreifen oder schickt einen eigenen Parameter mit, der dann von einem PHP Filter Code erkannt werden kann. Entdecke die Möglichkeiten, viel Erfolg beim Basteln.

    7 Mal editiert, zuletzt von b3317133 (20. Mai 2021 um 00:01)

  • Ich habe es nun maximal kompliziert umgesetzt :D

    Der PHP Code, bspw. in der functions.php sieht so aus:

    Code
    // Add media button
    add_action('media_buttons', static function () {
        echo '<a href="#" id="insert-media-except-images" class="button">Datei hinzufügen</a>';
    }, 15);
    
    
    // Add media button JS
    add_action('wp_enqueue_media', static function () {
        wp_enqueue_script('media_button', plugins_url('/../../assets/js/media_button.js', __FILE__), ['jquery'], '1.0', true);
    });

    Dazu kommt dann die JS Datei unter "{plugin_dir}/assets/js/media_button.js":

    Und zu guter letzt noch den eigentlichen Media-Button ausblenden:

    CSS
    .wp-editor-tools .insert-media.add_media {
        display: none !important;
    }

    Et voilà! Bei ACF muss dann außerdem noch bei jedem WYSIWYG Editor Feld "media_upload" aktiviert sein. Sonst wird der neue Button nämlich nicht ausgespielt. Deshalb muss man auch den eigentlichen Button ausblenden.

  • Falls noch Lust für weitere Experimente:

    Über ein Javascript in der Seite könnte man auch die Click-Events von allen Media-Buttons entfernen und dann selektiv je nach Wunsch wieder (mit direkt angepassten options oder auch dem Hinzufügen eines eigenen Parameter für das Erkennen eines ggf. genutzten serverseitigen PHP Filters) einhängen, basierend auf dem Code in media-editor.js

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!