Styling text and images in the_content()

Question

So I have recently started working on Wordpress and coming from a different programming background, having the logic but not being able to actually code is an issue I have been butting my head on for days and I really could use some help.

Like a normal post in the single.php file, the_content(); function fetches all the things and styles them in wordpress' own tags and standard css classes. Images go in a different wrapping and youtube embeds go in another mess of a tag hierarchy.

My scenario is this; text text image text image image youtube text image text

I want each of these individual element to go in their separate custom tags where I apply a custom styling to it and then output it. So far I have tried combinations of codes as described below but can't seem to make it work or wrap my head around the concept;

if (have_posts())
{
    while (have_posts())
    {
        the_post();
        the_content();
        //  get_template_part( 'template-parts/content','article' );
        $args = array(
            'post_type' => 'attachment',
            'numberposts' => - 1,
            'post_status' => null,
            'post_parent' => $post->ID
        );
    }
    $attachments = get_posts($args);
    if ($attachments)
    {
        foreach ($attachments as $attachment)
        { ?>
            <div class="img-box clearfix detect-inview-2 inview">
                <div class="item loaded">
                    <img src= "<?php echo wp_get_attachment_url($attachment->ID); ?>"/>
                </div>
            </div>
        }
    }

Doing this does wrap the image into the specific div but the text isn't shown as it naturally shouldn't.

Answer 1

I think the problem is the way you use the foreach with HTML inside. I usually use this way, so try perhaps to modify your code like this :

<?php

if (have_posts()) {
    while (have_posts()) {
        the_post();
        the_content();
        //  get_template_part( 'template-parts/content','article' );
        $args = array(
            'post_type' => 'attachment',
            'numberposts' => -1,
            'post_status' => null,
            'post_parent' => $post->ID
        );
    }
    $attachments = get_posts($args);
    if ($attachments) {
        foreach ($attachments as $attachment) : ?>

            <div class="img-box clearfix detect-inview-2 inview">
                <div class="item loaded">
                    <img src="<?php echo wp_get_attachment_url($attachment->ID); ?>" />
                </div>
            </div>

        <?php endforeach;
    }
}