Hello,
I am new to HTML and have started off with this template from w3schools: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_portfolio3&stacked=h
I have played around with it a bit and modified it to be more to my liking, but the "<!-- Photo grid -->" section seems quite tedious the way it currently is set up.
I would like to know if there is a way for me to have a series of 100 images locally or externally (e.g. imgur) and have the page updated automatically? This way, if I add a new picture to the server, the rest all shuffle down by 1.
Logically I can understand it, but I don't know how I would do the retrieving. Also, I would like to filter it so that Page 1 would show the first 20 images, then Page 2 would show the next 20, etc... (controlled by the 1, 2, 3, 4 below the pics):
<!-- Photo grid -->
<div class="w3-row w3-grayscale-min">
<div class="w3-quarter">
<img src=img[20 * (pagenum - 1)] style="width:100%" onclick="onClick(this)" alt=img[20 * (pagenum - 1)].title>
<img src=img[20 * (pagenum - 1) + 4] style="width:100%" onclick="onClick(this)" alt=img[20 * (pagenum - 1) + 4].title>
</div>
<div class="w3-quarter">
<img src=img[20 * (pagenum - 1) + 1] style="width:100%" onclick="onClick(this)" alt=img[20 * (pagenum - 1) + 1].title>
<img src=img[20 * (pagenum - 1) + 5] style="width:100%" onclick="onClick(this)" alt=img[20 * (pagenum - 1) + 5].title>
</div>
<div class="w3-quarter">
<img src=img[20 * (pagenum - 1) + 2] style="width:100%" onclick="onClick(this)" alt=img[20 * (pagenum - 1) + 2].title>
<img src=img[20 * (pagenum - 1) + 6] style="width:100%" onclick="onClick(this)" alt=img[20 * (pagenum - 1) + 6].title>
</div>
<div class="w3-quarter">
<img src=img[20 * (pagenum - 1) + 3] style="width:100%" onclick="onClick(this)" alt=img[20 * (pagenum - 1) + 3].title>
<img src=img[20 * (pagenum - 1) + 7] style="width:100%" onclick="onClick(this)" alt=img[20 * (pagenum - 1) + 7].title>
</div>
</div>
Also, I know that I can say width:400% in column 1 row 1, but then how would I made the images in row 2 on columns 2, 3 and 4 be pushed down the correct amount?
OR EVEN BETTER, can I treat them as arrays like the following:
array[x][0] = image
array[x][1] = title
array[x][2] = width
array[x][3] = tag (just a string to let me know which pictures to show, e.g. filter certain images)
Then, this can allow me to set a page limit of 20 images and dynamically do the following?
Current look with the template code above:
Dynamic shuffling of images if the third newest image was set to width 200%:
I really hope this is possible, as it would make maintaining the website 1000000x easier, and look much more interesting/dynamic. It is better to update images or arrays than html code.
Thank you in advance.