0

I am including HTML template in my shortcode by using ob_start & ob_get_clean. Everything works normally but the returned HTML structure is broken.

this is how I am inlcuding the html template in my shortcode function.

function return_cards_grid_section(){
  //this variable is in the same file
  global $subsitesDetails;
  ob_start();

  get_template_part('/templates/views/cards', null, [
        'subsitesDetails' => $subsitesDetails
    ]);

  return ob_get_clean();
}

And below is my code for cards html file

<section class="cards-in-grid-section mt-50">
    <div class="p-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 gap-5">

        <?
        foreach($args['subsitesDetails'] as $subsite) {
            ?>
            <a href="<?= $subsite['url']; ?>" target="_blank" class="block rounded overflow-hidden shadow-lg">
                <img class="w-full h-64 object-cover object-center" src="<?=$imageUrl?>" alt="Mountain">
                <div class="px-6 py-4">
                    <div class="font-bold text-xl mb-2"><?= $subsite['title'] ?></div>
                    <p class="text-pink text-base whitespace-normal"><?= $subsite['description'] ?></p>
                </div>

                <div class="px-6 pt-4 pb-2">
                    <?
                    $tags = ['tag1', 'tag2', 'tag3'];
                    foreach ($tags as $tag){
                    ?>
                        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"><?=$tag; ?></span>
                    <?
                    }
                    ?>
                </div>
            </a>
        <?
        }
        ?>
    </div>
</section>

If I use the same HTML template without using the shortcode, I get the proper HTML structure. But when I try to do the same thing via shortcode and include the HTML template then the output HTML is not properly structured. Trying to figure out the problem for so long but not sure what is wrong in my code.

Output - using the code above. Output 2 - expected output of the code.

Any kind of help would be appreciated. Thanks!

9
  • Could you include the complete shortcode code? maybe $subsitesDetails is not in the correct scope so it could contain different data from what you expect. Oct 12, 2021 at 8:02
  • @Buttered_Toast I have updated the shortcode function. I am able to get the data in the html template but the problem is with the html structure which is broken/un-organized. Oct 12, 2021 at 8:18
  • Could you do print_r or var_dump for $args['subsitesDetails'] when using the shortcode and another when not using the shortcode, again, maybe the data is different. Oct 12, 2021 at 8:22
  • 1
    What has changed in the actual HTML that you've generated (i.e. the view source not the screenshot)? Is there any chance that the HTML is exactly the same but some inherited styles in containing elements are making the difference?
    – Rup
    Oct 12, 2021 at 9:14
  • 1
    How is the HTML broken? Output buffers do not modify or change HTML, output buffers are not the issue. If you have found your issue, please post it as an answer below
    – Tom J Nowell
    Oct 12, 2021 at 9:47

1 Answer 1

1

After examining the code using developer tools, I was able to figure out the problem. Code was being wrapped in the pre tags which were causing the code to break its proper structure.

Found the solution for the pre tags issue here which solved the problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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