Seite wählen

Elegantthemes hat mit Divi wirklich eines der besten WordPress Themes, wenn nicht sogar das beste Theme überhaupt erschaffen. Es bietet unglaublich viele Möglichkeiten, ist Retina fähig und Responsive. ABER: Wie bei vielen anderen Theme Herstellern auch, erkauft man sich diese Funktionen durch viel zu große Bilddaten.

Ich verwende Bilder mit einer Kantenlänge von 2000 Pixel. Aus diesen Bildern werden aber leider keine kleineren Auflösungen generiert, beispielsweise für die Previewdaten in der Blogübersicht. Wenn nun also in der Übersicht bzw. auf der Startseite 6 Beiträge mit Vorschaubildern liegen, dann kommen hier insgesamt locker 10MB zusammen. Diese Seite dann in der U-Bahn über ein Mobilfunknetz zu laden dauert dann nicht nur bei O2 lange.

Dabei bietet doch WordPress selbst schon einige Funktionen an um mit untrschiedlichen Bildgrößen umzugehen. Diese werden aber von Elegantthemes durch eigene Funktionen ersetzt. Eine elegante Lösung habe ich dazu bei FLDTrace gefunden. Dieser Codeschnipsel erweitert die Functions.php um einige Funktionen damit wieder angepasste Bildgrößen geladen werden können. Ich habe das bei mir implementiert und konnte die Ladezeit der Startseite deutlich verbessern.

Der Code muss in die functions.php, am Besten macht ihr euch auch ein Child Theme zu Divi und legt dort eure eigenen Änderungen und Modifikationen ab.

Happy Coding 😀

Code auf GitHub
Beitrag auf FLDTrace

PHP Code für die functions.php

// enable divi functions add_action( 'wp_enqueue_scripts', 'my_enqueue_assets' ); function my_enqueue_assets() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); }

//add 1440px image size add_image_size('image_1440', 1440, 9999, false);

//move the 'wp_make_content_images_responsive' filter to run last remove_filter( 'the_content', 'wp_make_content_images_responsive', 10); add_filter( 'the_content', 'wp_make_content_images_responsive', 1600, 1);

add_filter( 'the_content', 'hb_add_id_to_images', 1599, 1); //filter the content and add wp-image-$id class to the images, allowing responsive feature to work function hb_add_id_to_images( $content ) { global $wpdb; if ( ! preg_match_all( '/<img [^>]+>/', $content, $matches ) ) { return $content; }

foreach( $matches[0] as $image ) { if ( !preg_match( '/wp-image-([0-9]+)/i', $image ) ) { $dom = new DOMDocument(); $dom->loadHTML($image); $img_element = $dom->getElementsByTagName('img')->item(0);

$wp_upload_dir = wp_upload_dir(); $image_path = str_replace(trailingslashit(preg_replace("(^https?://)", "", $wp_upload_dir['baseurl'])), '', preg_replace("(^https?://)", "", $img_element->getAttribute('src') ));

$attachment = $wpdb->get_col($wpdb->prepare("SELECT post_id FROM $wpdb->postmeta WHERE meta_key='_wp_attached_file' AND BINARY meta_value='%s';", $image_path ));

if ($attachment) { $img_element->setAttribute("class", "wp-image-".$attachment[0]); $new_image = $img_element->ownerDocument->saveHTML($img_element);

$content = str_replace ( $image , $new_image , $content); } } }

return $content; }

//lower image max-width to 1080px everywhere (retina compatible) function hb_content_image_sizes_attr( $sizes, $size ) { $width = $size[0];

if ($width >= 1080) $sizes = '(max-width: 1080px) 100vw, 1080px';

return $sizes; } add_filter( 'wp_calculate_image_sizes', 'hb_content_image_sizes_attr', 10 , 2 );

//override Divi 'et_pb_maybe_add_advanced_styles' function to fix the problem of browser downloading overridden background image function hb_pb_maybe_add_advanced_styles() { $styles = array();

// do not output advanced css if Frontend Builder is active if ( ! et_fb_is_enabled() ) { $styles['et-builder-advanced-style'] = ET_Builder_Element::get_style();

if ( preg_match_all('/\.[_a-z0-9]+\.et_pb_fullwidth_header \{.*background-image.*\}/', $styles['et-builder-advanced-style'], $matches ) ) { foreach( $matches[0] as $bg_css ) { $styles['et-builder-advanced-style'] = preg_replace('/url\(.*\)/', 'none', $styles['et-builder-advanced-style']); } }

$styles['et-builder-page-custom-style'] = et_pb_get_page_custom_css(); }

foreach( $styles as $id => $style_data ) { if ( ! $style_data ) { continue; }

printf( '<style type="text/css" id="%2$s"> %1$s </style>', $style_data, esc_attr( $id ) ); }

remove_action( 'wp_footer', 'et_pb_maybe_add_advanced_styles' ); } add_action( 'wp_footer', 'hb_pb_maybe_add_advanced_styles', 9 );

add_action('wp_footer', 'hb_responsive_bg_image', 10); //add responsiveness for background images function hb_responsive_bg_image() { global $wpdb;

$css = ET_Builder_Element::get_style();

//find the background-image css in the inline css if ( preg_match_all('/\.[_a-z0-9]+\.et_pb_fullwidth_header \{.*background-image.*\}/', $css, $matches ) ) { foreach( $matches[0] as $bg_css ) { if (preg_match('/\b(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)[-A-Z0-9+&@#\/%=~_|$?!:,.]*[A-Z0-9+&@#\/%=~_|$]/i', $bg_css, $url_matches)) { $url = $url_matches[0];

$wp_upload_dir = wp_upload_dir();

$image_path = str_replace(trailingslashit(preg_replace("(^https?://)", "", $wp_upload_dir['baseurl'])), '', preg_replace("(^https?://)", "", $url ));

$attachment = $wpdb->get_col($wpdb->prepare("SELECT post_id FROM $wpdb->postmeta WHERE meta_key='_wp_attached_file' AND BINARY meta_value='%s';", $image_path ));

$bg_css = preg_replace('/background-color([^;]*);/', '', $bg_css, 1);

if ($attachment) { $image_meta = wp_get_attachment_metadata($attachment[0]);

$extra_css = '';

//add fullsize background image style, fixing the problem of browser downloading overridden background image $extra_css .= ' @media only screen and ( min-width: 1441px ) { ' . $bg_css . ' }';

//add responsive background image for (non-retina) screen with max-width 1440px (use 1440px image), 1080px (use 1080px image), 768px (use 768px image) if ($image_meta['sizes']['image_1440']) { $extra_css .= ' @media only screen and ( max-width: 1440px ) { ' . str_replace(basename($url), $image_meta['sizes']['image_1440']['file'], $bg_css) . ' }'; }

if ($image_meta['sizes']['et-pb-portfolio-image-single']) { $extra_css .= ' @media only screen and ( max-width: 1080px ) { ' . str_replace(basename($url), $image_meta['sizes']['et-pb-portfolio-image-single']['file'], $bg_css) . ' }'; }

if ($image_meta['sizes']['medium_large']) { $extra_css .= ' @media only screen and ( max-width: 768px ) { ' . str_replace(basename($url), $image_meta['sizes']['medium_large']['file'], $bg_css) . ' }'; }

//add responsive background image for retina screen with max-width 1440px (use fullsize image), 768px (use 1440px image), 540px (use 1080px image), 384px (use 768px image) $extra_css .= ' @media only screen and ( max-width: 1440px ) and (-webkit-min-device-pixel-ratio: 2), only screen and ( max-width: 1440px ) and ( min--moz-device-pixel-ratio: 2), only screen and ( max-width: 1440px ) and ( -o-min-device-pixel-ratio: 2/1), only screen and ( max-width: 1440px ) and ( min-device-pixel-ratio: 2), only screen and ( max-width: 1440px ) and ( min-resolution: 192dpi), only screen and ( max-width: 1440px ) and ( min-resolution: 2dppx) { ' . $bg_css . ' }';

if ($image_meta['sizes']['image_1440']) { $extra_css .= ' @media only screen and ( max-width: 768px ) and (-webkit-min-device-pixel-ratio: 2), only screen and ( max-width: 768px ) and ( min--moz-device-pixel-ratio: 2), only screen and ( max-width: 768px ) and ( -o-min-device-pixel-ratio: 2/1), only screen and ( max-width: 768px ) and ( min-device-pixel-ratio: 2), only screen and ( max-width: 768px ) and ( min-resolution: 192dpi), only screen and ( max-width: 768px ) and ( min-resolution: 2dppx) { ' . str_replace(basename($url), $image_meta['sizes']['image_1440']['file'], $bg_css) . ' }'; }

if ($image_meta['sizes']['et-pb-portfolio-image-single']) { $extra_css .= ' @media only screen and ( max-width: 540px ) and (-webkit-min-device-pixel-ratio: 2), only screen and ( max-width: 540px ) and ( min--moz-device-pixel-ratio: 2), only screen and ( max-width: 540px ) and ( -o-min-device-pixel-ratio: 2/1), only screen and ( max-width: 540px ) and ( min-device-pixel-ratio: 2), only screen and ( max-width: 540px ) and ( min-resolution: 192dpi), only screen and ( max-width: 540px ) and ( min-resolution: 2dppx) { ' . str_replace(basename($url), $image_meta['sizes']['et-pb-portfolio-image-single']['file'], $bg_css) . ' }'; }

if ($image_meta['sizes']['medium_large']) { $extra_css .= ' @media only screen and ( max-width: 384px ) and (-webkit-min-device-pixel-ratio: 2), only screen and ( max-width: 384px ) and ( min--moz-device-pixel-ratio: 2), only screen and ( max-width: 384px ) and ( -o-min-device-pixel-ratio: 2/1), only screen and ( max-width: 384px ) and ( min-device-pixel-ratio: 2), only screen and ( max-width: 384px ) and ( min-resolution: 192dpi), only screen and ( max-width: 384px ) and ( min-resolution: 2dppx) { ' . str_replace(basename($url), $image_meta['sizes']['medium_large']['file'], $bg_css) . ' }'; }

?> <style type="text/css" id="responsive-bg-image-style"> <?php echo $extra_css;?> </style> <?php } } } } } // **********End Faster, Better Divi images******

Verwandte Beiträge

DyDNS, FritzBox und All-inkl

DyDNS, FritzBox und All-inkl

In Deutschland ist die FritzBox des Herstellers AVM recht weit verbreitet. Und das aus gutem Grund: kaum ein anderes Gerät erhält so lange Sicherheitsupdates und Patches, lässt sich so einfach einrichten und bietet auf einfachem Weg so viele Möglichkeiten. Zur Nutzung...

mehr lesen
Keine Berechtigung auf USB Laufwerke

Keine Berechtigung auf USB Laufwerke

Keine Berechtigung auf USB Laufwerke Bei meinem neuen HP Laptop der 400er Serie (HP pro Book 440 G5) hatte ich recht bald nach der Einrichtung von Windows 10 ein Problem. Ich konnte nicht auf angeschlossene USB Laufwerke zugreifen. Dabei war es irrelevant welches...

mehr lesen
WordPress Backup erstellen

WordPress Backup erstellen

Nachdem ich hier bereits einen kurzen Artikel über die Sicherheit des Adminbereichs von Wordpress geschrieben habe folgt nun noch ein Artikel über das Backup der Wordpress Installation. Nicht nur Steve Jobs wusste, das die einfachsten und simplesten Dingen oftmals die...

mehr lesen
2 Kommentare
  1. Daniel

    Saustark! Hab zwar grad keinen akuten Bedarf für diese Art Theme, aber wenn ich das mal benutzen will, muss ich das Posting hier unbedingt wieder ausgraben.

    Antworten
  2. Oliver Heinrich

    Danke Sebastian für Deinen Workaround!
    Ich habe heute beim Support von Elegant Themes diesbezüglich nachgehackt.
    Als Antwort erhielt ich, dass das Problem schon bei den Entwicklern bekannt sei.

    Wollen wir hoffen, dass diese es zügig umsetzen!

    Viele Grüße,
    Oliver

    Antworten

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen