-
-
Save tomaskavalek/07d88177d40e4781e2c66f5bf8c8ffc3 to your computer and use it in GitHub Desktop.
Better, Faster, Responsive Images for Divi – Upload in Divi child theme – with Divi Gallery module.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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') )); | |
| // Divi Gallery | |
| $image_path = preg_replace('~\-[0-9]{1,4}x[0-9]{1,4}(\.[a-zA-Z]{3,4})$~', '$1', $image_path); | |
| $original_src = $wp_upload_dir['baseurl'] . '/' . $image_path; | |
| $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]); | |
| $img_element->setAttribute("src", $original_src); | |
| $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****** |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
It's not working for the background images, any idea why?