Jump to content

Dynamically get images?


AKBGroups
 Share

Recommended Posts

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:
Normallayout.png.392d143ddd1404acccf4e471177d1ecd.png

Dynamic shuffling of images if the third newest image was set to width 200%:
Normallayout2.thumb.png.468bfe9123dc592d20d5a28926773d89.png

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.

Link to comment
Share on other sites

It would be better to store this information in database, each row will contain this data plus a id ref for each file that increment by 1 each time, meaning the highest id would be the latest file. Then all you have to do is retrieve this data in descending  order.

You can use this to create html img tag directly OR store as javascript array instead.

Link to comment
Share on other sites

@dsonesuk, Thanks. I have registered for a free database online and made a basic one.
https://www.obvibase.com/p/7cnGXU8jBuES9Fnq

Before I go ahead and try implementing it using this method, is this the correct way to do it? Or is there a simple method I'm not aware of?
image.png.542994ea3a76834f138f674c20466ea6.png
Would become:

<script>
    function getImage() {
        return document.getElementById(":18.cell.2" + Count(Rows)).innerHTML;
    }
  
    function getTitle() {
        return document.getElementById(":18.cell.3" + Count(Rows)).innerHTML;
    }
</script>

<div class="w3-quarter">
  <img src="getImage()" style="width: 400%;" onclick="onClick(this)" alt="getTitle()" />
</div>

I think if I know how to read from the database, I will be able to implement the logic I proposed in my first post.

I need some way to set document to be "https://www.obvibase.com/p/7cnGXU8jBuES9Fnq".
Also, how would Count(Rows) be done? I have to find the first appearance of id="4.row.*" (ID is descending order) and return the *wildcard?

Also... when I started writing this post, the id was 18... now it's 4... I don't know why.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...