Skip to content

Instantly share code, notes, and snippets.

@fldtrace

fldtrace/functions.php

Last active July 3, 2021 18:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fldtrace/b75fe97c9a60270dd672566b796be936 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fldtrace/b75fe97c9a60270dd672566b796be936 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. fldtrace revised this gist Apr 25, 2017. No changes.
  2. fldtrace revised this gist Apr 20, 2017. 1 changed file with 29 additions and 8 deletions.
    37 changes: 29 additions & 8 deletions functions.php
    View file
    Original file line number Diff line number Diff line change
    @@ -6,12 +6,10 @@ function my_enqueue_assets() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    }


    // ************Faster, Better Divi images

    //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);
    @@ -30,7 +28,11 @@ function hb_add_id_to_images( $content ) {
    $dom->loadHTML($image);
    $img_element = $dom->getElementsByTagName('img')->item(0);

    $attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE BINARY guid='%s';", $img_element->getAttribute('src') ));
    $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);
    @@ -103,7 +105,13 @@ function hb_responsive_bg_image() {
    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];
    $attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE BINARY guid='%s';", $url ));

    $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);

    @@ -134,15 +142,15 @@ function hb_responsive_bg_image() {
    }';
    }

    if ($image_meta['sizes']['et-pb-portfolio-image-single']) {
    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)
    //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),
    @@ -179,6 +187,19 @@ function hb_responsive_bg_image() {
    ' . 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">
    @@ -190,4 +211,4 @@ function hb_responsive_bg_image() {
    }
    }
    }
    // **********End Faster, Better Divi images******
    // **********End Faster, Better Divi images******
  3. fldtrace revised this gist Apr 20, 2017. No changes.
  4. fldtrace revised this gist Apr 19, 2017. No changes.
  5. fldtrace revised this gist Apr 19, 2017. 1 changed file with 168 additions and 5 deletions.
    173 changes: 168 additions & 5 deletions functions.php
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,24 @@
    //get the 'wp_make_content_images_responsive' filter to run last
    <?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' );
    }


    // ************Faster, Better Divi images

    //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);

    //filter 'the content', add wp-image-$id class to the images, allowing WP responsive image feature to work
    add_filter( 'the_content', 'fldtrace_add_id_to_images', 1599, 1);
    function fldtrace_add_id_to_images( $content ) {
    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;
    @@ -27,4 +41,153 @@ function fldtrace_add_id_to_images( $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];
    $attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE BINARY guid='%s';", $url ));

    $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']['et-pb-portfolio-image-single']) {
    $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)
    $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) . '
    }';
    }

    ?>
    <style type="text/css" id="responsive-bg-image-style">
    <?php echo $extra_css;?>
    </style>
    <?php
    }
    }
    }
    }
    }
    // **********End Faster, Better Divi images******
  6. fldtrace revised this gist Apr 18, 2017. No changes.
  7. fldtrace renamed this gist Apr 18, 2017. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → functions.php
    View file
    File renamed without changes.
  8. fldtrace created this gist Apr 18, 2017.
    30 changes: 30 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    //get 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);

    //filter 'the content', add wp-image-$id class to the images, allowing WP responsive image feature to work
    add_filter( 'the_content', 'fldtrace_add_id_to_images', 1599, 1);
    function fldtrace_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);

    $attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE BINARY guid='%s';", $img_element->getAttribute('src') ));
    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;
    }