Wordpress | How to put content at the start and the end of a POST around regulr HTML?

Question

I have a wordpress website and I need to put somehow the updatable content in a POST around regular HTML which is semi automatic semi static. This is the code:

<img src="https://website.xyz/img.jpg" class="fullimgfirst" alt="">
<img src="https://website.xyz/img3.jpg" class="leftimg" alt="">
<img src="https://website.xyz/img4.jpg" class="rightimg" alt="">
<img src="https://website.xyz/img5.jpg" class="fullimg" alt="">

<div class="firstfull">
  <div class="firstleft">
    <p1>Branding + Digital</p1>
  </div>
  <div class="firstright">
    <h1>Summit</h1>
  </div>
</div>
<div class="secondfull">
  <h2>Project overview</h2>
  <p2>The project description.</p2>
</div>

<img src="https://website.xyz/img2.jpg" class="bigimg" alt="">
<img src="https://website.xyz/img3.jpg" class="leftimg" alt="">
<img src="https://website.xyz/img4.jpg" class="rightimg" alt="">
<img src="https://website.xyz/img10.jpg" class="fullimglast" alt="">

A user will need to update only all images and P2. But as you can see, there are images on the first lines and the last ones. How to do it in wordpress to leave this part static:

<div class="firstfull">
  <div class="firstleft">
    <p1>Branding + Digital</p1>
  </div>
  <div class="firstright">
    <h1>Summit</h1>
  </div>
</div>
<div class="secondfull">
  <h2>Project overview</h2>

And images and P2 uploadable/updatable for each post?

Thank you veru much in advance.

Answer 1

You can use ACF plugin.

For that you will have to create two ACF Repeater fields for both top and bottom images. and call that ACF Fields in your template as per your structure.

And P2 will come from the admin page editor()

you can do your code like this:

<?php if( have_rows('top_content_images') ): ?>
    <?php while( have_rows('top_content_images') ): the_row(); 
        $top_image = get_sub_field('content_image');
    ?>
        <?php echo wp_get_attachment_image( $top_image, 'full' ); ?>
    <?php endwhile; ?>
<?php endif; ?>

<div class="firstfull">
    <div class="firstleft">
        <p1>Branding + Digital</p1>
    </div>
    <div class="firstright">
        <h1>Summit</h1>
    </div>
</div>
<div class="secondfull">
    <h2>Project overview</h2>
    <?php the_content();?>
</div>

<?php if( have_rows('bottom_content_images') ): ?>
    <?php while( have_rows('bottom_content_images') ): the_row(); 
        $bottom_image = get_sub_field('content_image');
    ?>
        <?php echo wp_get_attachment_image( $bottom_image, 'full' ); ?>
    <?php endwhile; ?>
<?php endif; ?>