0

I'm busy with a Wordpress theme and in some templates I use images (like home.php). I do the calculations for the srcset and sizes for every template/image individually and store the urls and values in variables.

It is impossible to have a 'one size fits all' approach for rendering srcset and sizes, so trying to override the sizes and srcset like this is impossible. For example, it is possible that the first featured image in home.php has a different sizes than the second featured image.

My code is as follows:

                <div class="amb-home-post-preview thumbnail_container override">
                <img alt="<?php esc_attr( the_title() ); ?>" class="amb-home-post-preview thumbnail override"
                     src="<?php echo esc_url( $amb_post_preview_image_1000[0] ); ?>"
                     srcset="
                        <?php echo esc_url( $amb_post_preview_image_400[0] ); ?> 400w,
                        <?php echo esc_url( $amb_post_preview_image_600[0] ); ?> 600w,
                        <?php echo esc_url( $amb_post_preview_image_800[0] ); ?> 800w,
                        <?php echo esc_url( $amb_post_preview_image_1000[0] ); ?> 1000w,
                        <?php echo esc_url( $amb_post_preview_image_1400[0] ); ?> 1400w,
                        <?php echo esc_url( $amb_post_preview_image_1800[0] ); ?> 1800w,
                        <?php echo esc_url( $amb_post_preview_image_2200[0] ); ?> 2200w,
                        <?php echo esc_url( $amb_post_preview_image_2600[0] ); ?> 2600w,
                        <?php echo esc_url( $amb_post_preview_image_3000[0] ); ?> 3000w
                    "
                     sizes="<?php foreach ($amb_sizes as $amb_key => $amb_val) { echo esc_html( $amb_val ); } ?>">
                </div>

The image urls are retrieved above (I skipped that part), but it's fairly easy to understand. The $amb_key variable is the media query and the $amb_val variable is the width (e.g. calc(50vw - 36px).

What happens, is that Wordpress skips the complete <img> tag and replaces that with it's own tag. Classes and all other attributes are lost.

This happens multiple times in different template files. How do I stop Wordpress from completely overriding my <img> tags (in template files)?

Many thanks!

One of the places where this happens is the search.php template.

<?php get_header() ?>


<div class="amb-search override">

    <div class="amb-search-intro override">
        <div class="amb-search-editor-wrapper amb-container-parent override">

            <div class="amb-search-editor amb-container-child override">
                <p class="amb-search-prefix"><?php echo esc_html( get_theme_mod( 'amb_search_results_prefix', 'Search for articles, pages...') ); ?> </p>
            </div>

            <div class="amb-search-form-container amb-container-child override">

            <form role="search" method="get" class="amb-search-form search_results override" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label>
        <input type="search" class="amb-search-field search_results override" id="amb-search-field-input-search_results"
            placeholder="<?php echo esc_attr( get_theme_mod( 'amb_text_searchfield', 'Start typing...' ) ); ?>"
            value="<?php echo esc_attr( get_query_var('s') ); ?>" name="s"
            title="<?php echo esc_attr( get_theme_mod( 'amb_title_searchfield', 'Search for pages, articles and documents.' ) ); ?>"
            autocomplete="off" />
    </label>
    <input type="submit" class="amb-search-submit header_search override"
        value="" />
        </form>

        </div>

        </div>
    </div>

<div class="amb-search-results override">
    <div class="amb-search-results-wrapper amb-container-parent override">
        <div class="amb-search-results-wrapper amb-container-child small_child_margin override">


<!-- Looping through the search results -->
<?php
    //Define the variables
$amb_home_readmore_excerpt_length = get_theme_mod( 'amb_home_readmore_excerpt_length', 20 );


$amb_s = get_search_query(); //Get the query
$amb_s_args = array( 's' => $amb_s ); //...and put it into an array with argumens
$amb_search_query = new WP_Query( $amb_s_args ); //Run a new instance of WP_QUery


    //Displaying the files
if ( $amb_search_query->have_posts() ) {
        while ( $amb_search_query->have_posts() ) {
           $amb_search_query->the_post(); ?>


        <div class="amb-home-post-single post_preview_search override">
            <div class="amb-home-post-contents post_preview_search override">


            <!-- Thumbnail image -->
                    <?php   if ( the_post_thumbnail() ) : ?>        <!-- Check if it exists -->
                    <?php


                    $amb_post_preview_image_400 = wp_get_attachment_image_src( get_post_thumbnail_id(), 'amb_post_preview_400');
                    $amb_post_preview_image_600 = wp_get_attachment_image_src( get_post_thumbnail_id(), 'amb_post_preview_600');
                    $amb_post_preview_image_800 = wp_get_attachment_image_src( get_post_thumbnail_id(), 'amb_post_preview_800');
                    $amb_post_preview_image_1000 = wp_get_attachment_image_src( get_post_thumbnail_id(), 'amb_post_preview_1000'); //Default src
                    $amb_post_preview_image_1400 = wp_get_attachment_image_src( get_post_thumbnail_id(), 'amb_post_preview_1400');
                    $amb_post_preview_image_1800 = wp_get_attachment_image_src( get_post_thumbnail_id(), 'amb_post_preview_1800');
                    $amb_post_preview_image_2200 = wp_get_attachment_image_src( get_post_thumbnail_id(), 'amb_post_preview_2200');
                    $amb_post_preview_image_2600 = wp_get_attachment_image_src( get_post_thumbnail_id(), 'amb_post_preview_2600');
                    $amb_post_preview_image_3000 = wp_get_attachment_image_src( get_post_thumbnail_id(), 'amb_post_preview_3000');

                    //Max-width if site
                    $amb_site_maxwidth_cust = get_theme_mod( 'amb_sitewide_layout_maxwidth', 1320 );
                    $amb_site_maxwidth_cont = $amb_site_maxwidth_cust + 2 * 12;

                    //width of sidebar
                    $amb_sidebar_width = 0; //search so there is no width

                    //Posts per row
                    if ( 'one' == get_theme_mod( 'amb_home_readmore_posts_columns', 'two' ) ) {
                        $amb_posts_per_row = 1;
                    } elseif ( 'two' == get_theme_mod( 'amb_home_readmore_posts_columns', 'two' ) ) {
                        $amb_posts_per_row = 2;
                    } elseif ( 'three' == get_theme_mod( 'amb_home_readmore_posts_columns', 'two' ) ) {
                        $amb_posts_per_row = 3;
                    } else {
                        $amb_posts_per_row = 4;
                    }


                    //Site max-width media query
                    $amb_site_maxwidth_browser = $amb_site_maxwidth_cont + 2 * 24;

                    $amb_min_maxwidth_a = ($amb_site_maxwidth_cont * (1 - $amb_sidebar_width)) / $amb_posts_per_row - 2 * 12;
                    $amb_min_maxwidth_value = '(min-width: ' . $amb_site_maxwidth_browser . 'px) ' . $amb_min_maxwidth_a . 'px, ';
                    $amb_min_maxwidth_key = 'amb_min_' . $amb_site_maxwidth_browser;

                    $amb_min_maxwidth_array = [
                        $amb_min_maxwidth_key => $amb_min_maxwidth_value
                    ];

                    // 1200+
                    if ($amb_posts_per_row == 4) {
                    $amb_min_1200_r = (100 * (1 - $amb_sidebar_width)) / $amb_posts_per_row;
                    $amb_min_1200_a = (-48 * (1 - $amb_sidebar_width)) / $amb_posts_per_row - 24;

                    $amb_min_ppr_4_sizes = '(min-width: 1200px) calc('.$amb_min_1200_r.'vw + '.$amb_min_1200_a.'px), '; //Generate the media query.
                    $amb_min_1200_4 = [
                        'amb_min_1200' => $amb_min_ppr_4_sizes
                        ];

                    $amb_posts_per_row = 2; //Set to '2' for the following media queries
                    } else { $amb_min_1200_4 = ''; }

                    // 1000+
                    $amb_min_1000_r = (100 * (1 - $amb_sidebar_width)) / $amb_posts_per_row;
                    $amb_min_1000_a = (-48 * (1 - $amb_sidebar_width)) / $amb_posts_per_row - 24;
                    $amb_min_1000 = '(min-width: 1000px) calc('.$amb_min_1000_r.'vw + '. $amb_min_1000_a .'px), ';  //Including comma and space

                    // 700+
                    $amb_min_700_r = 100 / $amb_posts_per_row;
                    $amb_min_700_a = -48 / $amb_posts_per_row - 24;
                    $amb_min_700 = '(min-width: 700px) calc('.$amb_min_700_r.'vw + '. $amb_min_700_a .'px), ';

                    // all
                    $amb_min_all_r = 100;
                    $amb_min_all_a = -24 - 24; //Margin of 2 * 12 on both sides plus margin of 2 * 12 on both sides of individual post
                    $amb_min_all = 'calc('.$amb_min_all_r.'vw + '.$amb_min_all_a.'px)';

                    $amb_min_array_constant = [                 //append 'all' later on
                        'amb_min_1000' => $amb_min_1000,
                        'amb_min_700' => $amb_min_700,
                    ];

                    //Merge default + 1200+ + max-width array
                    $amb_sizes_merged = array_merge( array_merge( (array)$amb_min_array_constant, (array)$amb_min_1200_4), /* combine default & 1200+ */ $amb_min_maxwidth_array/* Combine the max-width */);

                    //Sort the array 'naturally' (how humans would sort it = count) and reverse the order (biggest first, smallest last) and append the 'all' value to the end
                    natsort($amb_sizes_merged);
                    $amb_sizes_merged_reverse = array_reverse($amb_sizes_merged, true);
                    $amb_sizes_merged_reverse['amb_min_all'] = $amb_min_all;

                    //Find the position of the key for the max-width and remove all values above (so 'slicing' the array)
                    $amb_min_maxwidth_key_offset = array_search($amb_min_maxwidth_key, array_keys($amb_sizes_merged_reverse), true);
                    if ($amb_min_maxwidth_key_offset !== false) { $amb_sizes = array_slice($amb_sizes_merged_reverse, $amb_min_maxwidth_key_offset, 1000, true); }

                    ?>

                    <div class="amb-home-post-preview post_preview_search thumbnail_container override">
                    <img alt="<?php the_title(); ?>" class="amb-home-post-preview post_preview_search thumbnail override"
                         src="<?php echo esc_url( $amb_post_preview_image_1000[0] ); ?>"
                         srcset="
                            <?php echo esc_url( $amb_post_preview_image_400[0] ); ?> 400w,
                            <?php echo esc_url( $amb_post_preview_image_600[0] ); ?> 600w,
                            <?php echo esc_url( $amb_post_preview_image_800[0] ); ?> 800w,
                            <?php echo esc_url( $amb_post_preview_image_1000[0] ); ?> 1000w,
                            <?php echo esc_url( $amb_post_preview_image_1400[0] ); ?> 1400w,
                            <?php echo esc_url( $amb_post_preview_image_1800[0] ); ?> 1800w,
                            <?php echo esc_url( $amb_post_preview_image_2200[0] ); ?> 2200w,
                            <?php echo esc_url( $amb_post_preview_image_2600[0] ); ?> 2600w,
                            <?php echo esc_url( $amb_post_preview_image_3000[0] ); ?> 3000w
                        "
                         sizes="<?php foreach ($amb_sizes as $amb_key => $amb_val) { echo esc_attr( $amb_val ); } ?>">
                    </div> <?php endif; ?>

                    <!-- Title -->
                    <h2 class="amb-home-post-preview post_preview_search title override"><a href="<?php esc_url( the_permalink() ); ?>" style="color: <?php echo esc_attr( $amb_home_readmore_section['category_post_text_color'] ); ?>"><?php esc_html( the_title() ); ?></a></h2>

                    <!-- Excerpt -->
                    <div class="amb-home-post-preview post_preview_search excerpt content override" style="color: <?php echo esc_attr( $amb_home_readmore_section['category_post_text_color'] ); ?>"><?php echo esc_html( wp_trim_words( get_the_content(), $amb_home_readmore_excerpt_length, '...' ) ); ?></div>


                    </div>

                </div>



    <?php }
    } else { ?>

<div class="amb-search-noresults override">
    <p class="amb-search-noresults-text"><?php echo esc_html( get_theme_mod( 'amb_search_results_noresults_text', 'Sorry, but nothing matched your search criteria. Please try again with some different keywords.') ); ?></p>
</div>

<?php } ?>


</div>
</div>
</div>
</div>



<?php get_footer() ?>
  • How and from where do you call that code/template? – Sally CJ Jul 10 at 2:32
  • Hi @SallyCJ it happens everywhere. I use this code in search.php but also twice in home.php. I didn’t try it in single.php but I fear it will be the same. Have you any idea what I could be? – ralphsmit Jul 10 at 9:58
  • Are you sure WordPress replaces the entire <img> tag? Did you check the page source (Ctrl + U on Chrome desktop)? Maybe some JavaScript code replaced the tag on the page? – Sally CJ Jul 10 at 14:46
  • It is really replaced. This is the output: <img src="x.com/wp-content/uploads/2020/07/img-800x500.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="x.com/wp-content/uploads/2020/07/img-800x500.jpg 800w, x.com/wp-content/uploads/2020/07/img-400x250.jpg 400w, x.com/wp-content/uploads/2020/07/img-600x375.jpg 600w, x.com/wp-content/uploads/2020/07/img-1000x625.jpg 1000w, x.com/wp-content/uploads/2020/07/img-1400x875.jpg 1400w, x.com/wp-content/uploads/2020/07/img-1800x1125.jpg 1800w" sizes="(max-width: 800px) 100vw, 800px" width="800" height="500"> – ralphsmit Jul 10 at 14:53
  • 1
    Sure, I added it. Thanks for helping :-) – ralphsmit Jul 10 at 15:01
1

So after checking your search.php template, actually the issue is not with WordPress. Instead:

That the_post_thumbnail() (as in if ( the_post_thumbnail() )) echoes the post thumbnail and returns nothing which then bypasses your conditional (doesn't echo your img tag), so you should instead use has_post_thumbnail():

if ( has_post_thumbnail() ) {
    // echo your img
}
| improve this answer | |
  • You're awesome, thanks!! – ralphsmit Jul 10 at 15:17
  • You're very welcome! :) – Sally CJ Jul 10 at 15:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.