Divi ALT-Text in Bildern fehlt

Divi und der fehlende alt-Text in Bildern eine endlose Story

Ja liebe Divi User, es ist eine endlose Geschichte und ich stelle mir bei jedem Update die Frage warum Divi das seit der Veröffentlichung von Divi nie gelöst hat. Eins vorweg – Divi ist nicht das einzige Framework, bei dem das automatische Auslesen der alt-Texte nicht möglich ist. Da gibt es noch andere Pagebuilder die es ebenfalls nicht schaffen. Aber egal, hier geht es um Divi. Damit ihr das Problem versteht, zeige ich Euch zuerst ein paar Bilder.

Wir geben uns ja richtig Mühe und vergeben jedem Bild, welches wir in die Mediathek von WordPress hochladen ein ALT-Attribut und auch noch einen passenden Titel. Soweit so gut… allerdings stellen wir schnell fest, wenn wir das Bild per „Inspect Element“ im Browser untersuchen, dass der ALT- und Titeltext gar nicht aus unserer Mediathek übernommen wird in Divi. Nun, das mag zwar auf den ersten Blick ein Fehler sein, vielleicht auch ärgerlich in dem Moment…. ABER und jetzt kommts…

… es ist nicht wirklich ein Fehler welcher behoben werden müsste, sondern eher, ich nenne es Bequemlichkeit. Daher sieht Elegantthemes hier wahrscheinlich auch keinen wirklichen Handlungsbedarf. Ich versuche zu erklären wieso nicht.

In den meisten Fällen laden wir ein Bild per Divi Builder hoch und gehen nicht erst über die Mediathek, weil wir uns ohnehin schon in einem Bildmodul befinden. Ist ja logisch, wenn man schon im Bildmodul ist.

Die wenigsten User wissen, dass man im Reiter „Erweitert/Advanced“ den Abschnitt für die Attribute der Bilder findet. Man ignoriert sie einfach, oder denkt nicht dran oder man wusste es bis eben gerade wirklich nicht…

(ich ignoriere es wenn ich ehrlich bin, weil es eben in der Mediathek einfach schneller und einfacher geht. )

Würde ich nämlich die Attribute direkt immer über Divi schreiben, dann wäre alles ohne Probleme. Was aber, wenn ich Blogs schreibe und da den Gutenberg Editor nutze?

Richtig, dann bleiben die alt-Attribute leer, weil die Einträge aus der Mediathek nicht ausgelesen werden. Wie ich anfangs schon angedeutet habe, haben einige Builder/Frameworks dieses „Problem“, Divi steht da nicht alleine da.

Das alt-Text Problem kriegen wir ganz schnell in den Griff

Jeder von uns nutzt „hoffentlich“ ein Child-Theme. Wir können das auch mit einem Plugin lösen, aber – jetzt kommt mein Lieblingssatz – wozu? Ich versuche auf Plugins so gut es geht zu verzichten! Fügt bitte diesen „Schnippsel“ in die functions.php eueres Child-Themes ein. 

// ALT-Tags aus der Mediathek auslesen
// ========================================================================== //
function get_image_meta( $image, $type = 'alt' ) {
    if ( ! $image ) {
        return '';
    }
 
    $output = '';
 
    if ( '/' === $image[0] ) {
        $post_id = attachment_url_to_postid( home_url() . $image );
    } else {
        $post_id = attachment_url_to_postid( $image );
    }
 
    if ( $post_id && 'title' === $type ) {
        $output = get_post( $post_id )->post_title;
    }
 
    if ( $post_id && 'alt' === $type ) {
        $output = get_post_meta( $post_id, '_wp_attachment_image_alt', true );
    }
 
    return $output;
}
/* Aktualisiert image alt text in Modulen */
function update_module_alt_text( $attrs, $unprocessed_attrs, $slug ) {
    if ( ( $slug === 'et_pb_image' || $slug === 'et_pb_fullwidth_image' ) && '' === $attrs['alt'] ) {
        $attrs['alt'] = get_image_meta( $attrs['src'] );
        $attrs['title_text'] = get_image_meta( $attrs['src'], 'title' );
    } elseif ( $slug === 'et_pb_blurb' && 'off' === $attrs['use_icon'] && '' === $attrs['alt'] ) {
        $attrs['alt'] = get_image_meta( $attrs['image'] );
    } elseif ( $slug === 'et_pb_slide' && '' !== $attrs['image'] && '' === $attrs['image_alt'] ) {
        $attrs['image_alt'] = get_image_meta( $attrs['image'] );
    } elseif ( $slug === 'et_pb_fullwidth_header' ) {
        if ( '' !== $attrs['logo_image_url'] && '' === $attrs['logo_alt_text'] ) {
            $attrs['logo_alt_text'] = get_image_meta( $attrs['logo_image_url'] );
        }
       
        if ( '' !== $attrs['header_image_url'] && '' === $attrs['image_alt_text'] ) {
            $attrs['image_alt_text'] = get_image_meta( $attrs['header_image_url'] );
        }
    }
 
    return $attrs;
}
/* Filter injection */
add_filter( 'et_pb_module_shortcode_attributes', 'update_module_alt_text', 20, 3 );

Nun werden zumindest die ALT-Tags und Title-Tags aus der Mediathek im HMTL-Konstrukt der Webseite ausgegeben.

P.s. Dank der Hilfe von Vlad wurden auch noch die Title-Tags eingebunden. Den Code habe ich entsprechend angepasst

Seit Jahren arbeite ich mit Divi, schreibe Tutorials und teile mein Wissen über CSS, jQuery, PHP und sonstige Tipps & Tricks. Supporte mich und meine freien Arbeiten, damit ich auch künftig meine Freizeit so gut es geht finanzieren kann und so weiterhin tolle und hilfreiche Tipps geben darf !! – VIELEN DANK –.