How to stop Wordpress from completely overriding my <img> tags in my templates?

Question

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() ?>

Answer 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
}