Lesefortschritt:

ALT- und Title-Tags aus der Mediathek in Divi verwenden

17. Mai 2023 | Divi-Theme, functions.php, Mediathek

Dieser Beitrag beinhaltet 492 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.

Im Bild-Modul des Divi-Themes lassen sich ALT-Texte, welche etwa das abgebildete Bild in Worten beschreiben, problemlos erfassen. Ebenso die Title-Tags. Wer aber – und das tun sicher viele – Bilder direkt aus der Mediathek übernimmt, wird bald feststellen: Weder die ALT-Tags noch die Title-Tags werden in Divi nicht angezeigt. Das lässt sich aber nachbessern und wir zeigen Ihnen, wie das geht.

Um Divi das Auslesen der ALT-Tags und zugleich das Übernehmen der Title-Tags auch aus der Mediathek beizubringen, benötigen Sie einen zusätzlichen Code in der functions.php, der unten zu sehen ist. Fügen sie diesen via Design/Theme-Editor in die Datei functions-php Ihrer Website ein:

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 auch die ALT- und Title-Tags aus der Mediathek im HMTL-Konstrukt der Webseite ausgegeben.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This