Question

I am currently working on a web-app/server in python and cherrypy.

Right now, I have been trying to create a kind of gallery page. For every photo, i have implemented for following HTML code:

<div> class="gallery" align="center">
  <div class="thumbnails">
    <img onmouseover="preview.src=img1.src" id="img1" src="../img/1" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img2.src" id="img2" src="../img/2" alt="Image Not Loaded"/>
  </div>
<br/>
  <div class="preview" align="center">
    <img id="preview" src="../img/1" alt="No Image Loaded"/>
    <img id="preview" src="../img/2" alt="No Image Loaded"/>
  </div>
</div>

It all works quite well, except that another method in my web app allows the user to add photos into the folder. (Or I could add photos into the folder manually sometimes). EDIT: [This folder is just a directory on my computer/server where all photo i want to be displayed in the gallery is stored.] This means that the number of photos in the folder is constantly changing.

I was wondering if there is some way for python to detect how many photo is in the folder, and dynamically and automatically add those photos into this HTML script?

EDIT[

I am thinking of changing my html script to:

<div> class="gallery" align="center">
  <div class="thumbnails">
   $$THUMB
  </div>
<br/>
  <div class="preview" align="center">
    $$PREVIEW
  </div>
</div>

Then implement some kind of loop in python that scans the entire folder for images. Followed by

page = page.replace ("$$THUMB", thumb)
page = page.replace ("$$PREVIEW", preview)

Where “thumb” and “preview” is the output of the loop that put every image i have in the folder into the proper HTML format.

Do you think that would work? And unfortunately, I have no idea how to get python to scan a folder for the name if files, then format it into the proper format. So this is probably where i need the most help.

]

Thank you for your time in advance!

Answer 1

Usually with applications of this sort, the HTML file will be generated on the fly for every page view (and never stored on your server, just sent to the user). Since the contents change frequently this is definitely recommended. Start by getting a list of all files you would be serving with os.listdir or os.walk (if you must inspect nested directories). Then figure out how to present the list of files in your webpage.

If you are asking how to detect changes during the time that a user has a browser page open, that’s a lot less straightforward. The browser needs to fetch an update from the server, so you’ll need some javascript that talks to a service on your website that checks the folder. The easiest would be for the service to compute something and send it to the javascript (e.g., last modification time, or an MD5 hash of the list of filenames). The user’s page can compare it with the last value and reload as necessary.