how to organize html image sources for future content changes - html

Question

I have a certain number of images into the html, and each one is accompanied with some text and/or transitions. Each set of img and whatever else (text, video, etc...) is inside a div to allow and simplify positioning. Also, each image is numbered as in a magazine or a book. Lets say for the shake of argument that there are 30 pages.
Then from the art dept, I receive a new page, which will be the fourth page, displacing the following ones one page further. Also, for organization porpouses, the img files also are renamed (i.e. img-20-jpeg now is img-21-jpeg)
Im looking for a way to avoid renaming manually classes of each div, img, paragraph, both in html and css.
I have tried to ignore actual numbers in img sources and refer the css styling to each "page" by nth-child selector.
Also, I have tried to relate each set of text, effects, etc... to it's inmediate "page" parent with ~.
so far, i have succeded only in epic headaches.
<div class="page">
<img class="page" src="photo/img.001.jpeg" alt="1">
<p class="text-page-1">
some text
</p>
</div>
<img class="page" src="photo/img.002.jpeg" alt="2">
<img class="page" src="photo/img.003.jpeg" alt="3">
<div class="page">
<img class="page" src="photo/img.004.jpeg" alt="4">
<video class= "video-page-4" src="video/4.mov" controls playsinline loop></video>
</div>
<div class="page">
<img class="page" src="photo/img.005.jpeg" alt="5">
<p class="text-page-5">
some other text
</p>
</div>

Answer 1

A couple ideas.
avoid numbering; use comments to keep track. also change the hard-coded classes like text-page-1 to get a paragraph inside of class page: .page p or .page > p.
<!--page 1-->
<div class="page">
<img src="photo/img.001.jpeg" alt="1">
<p>
some text
</p>
</div>
<!--page 2-->
<div class="page">
<img src="photo/img.0045.jpeg" alt="1">
<p>
some text
</p>
</div>
use old-school numbering. start at 10 and go up by 10, or even 100.
that way you can do inserts without renumbering everything.
<div class="page">
<img src="photo/img.10.jpeg" alt="1"> <!--start at 10.-->
<p class="text-page-10"> <!--use class only if necessary-->
some text
</p>
</div>
<!--can insert a new page here using numbers 11-19.-->
<div class="page">
<img src="photo/img.20.jpeg" alt="1">
<p class="text-page-20">
some text
</p>
</div>

Answer 2

You can use this code
<!--page 1-->
<div class="page">
<img class="page" src="photo/images/img1.jpeg" alt="1">
<p class="text-page-1">some text</p>
</div>
<!--page 2-->
<div class="page">
<img class="page" src="photo/images/img2.jpeg" alt="2">
<img class="page" src="photo/images/img3.jpeg" alt="3">
</div>
<!--page 3-->
<div class="page">
<img class="page" src="photo/images/img4.jpeg" alt="4">
<video class= "video-page-4" src="video/4.mov" controls playsinline loop></video>
</div>
<!--page 4-->
<div class="page">
<img class="page" src="photo/images/img5.jpeg" alt="5">
<p class="text-page-5">some other text</p>
</div>