Member Avatar for bkjfdghiuds

i have no programming experience so if someone could point me in the right direction, that would be amazing.
im using python and extracting image link from a website. with all these image links, i would like to create something similar to this (⋙http://imgur.com/gallery✗) ie: display all the images in a grid, crop them accordingly like imgur, and in addition to the endless scroll, the user has the ability to select what page number.

I dont know what i need to do to make a html website and interact with the list of img links i have. i am very confused :/

  • 2 Contributors
  • 2 Replies
  • 405 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by bkjfdghiuds

Dani AI

Generated

A practical, incremental plan for to turn your scraped image-URL list into an Imgur‑style gallery (and a few clarifications for ’s helpful note about HTML/CSS).

Start small: persist the URLs, generate fixed-size thumbnails on the server, build a simple API that returns pages of thumbnails, then add a client that either paginates or does infinite scroll. That order keeps each step testable and avoids juggling too many new tools at once.

Persisting/importing: for a quick prototype use SQLite (no server needed). Example to bulk-insert your Python list:

import sqlite3
urls = [...]  # your scraped list
conn = sqlite3.connect('gallery.db')
c = conn.cursor()
c.execute('CREATE TABLE IF NOT EXISTS images (id INTEGER PRIMARY KEY, url TEXT)')
c.executemany('INSERT INTO images (url) VALUES (?)', [(u,) for u in urls])
conn.commit()
conn.close()

If you prefer MySQL/phpMyAdmin: export a CSV with a single header column url, create a database/table in phpMyAdmin, open the table, use Import -> choose CSV -> set format to CSV and run. That answers where to “paste” the list.

Thumbs & cropping (reliable display): download each URL once and create a center-cropped thumbnail so every grid cell stays uniform. Example (Pillow):

from PIL import Image
# download image into bytes, open with Image, center-crop to target aspect ratio, then resize and save

Store the thumb path in your DB. Serving local thumbs avoids hotlinking or remote failures.

Serving + front end: use Flask (or any framework) to return JSON pages:

@app.route('/api/images')
def images():
    page = int(request.args.get('page',1)); per=30
    # SQL: SELECT id, thumb FROM images LIMIT ? OFFSET ?

Client-side fetch('/api/images?page=2') can append items for infinite scroll; also render page-number links that set the page param. CSS grid + object-fit: cover gives the cropped look:

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.thumb img{width:100%;height:150px;object-fit:cover;display:block}

Final tips: test a static HTML page first, verify URLs in a browser, ensure write permissions for your thumbs/ folder, and use LIMIT/OFFSET for small datasets (switch to keyset pagination for large collections).

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

with any type of web development, you need to have a solid foundation in HTML, in my opinion. Even if you were to use web dev studios to build your pages, you always find the need to tweak and customize your code. Aside from HTML, knowing how to take advantage of CSS is critical if you want to build pages that will be easy to manage and have a reduced amount of code so that pages can load faster.

A good place to start is with HTML tutorials. Many books and online sites to help you. With regard to actual programming, you'll need some server side scripting language to pick. The most common in the web tech area is PHP and ASP.NET, although there are many others out there.

The project you are working on shouldnt be too difficult once you start developing your skills. This may seem like a hugh task, but if you take it once step at a time, you'll be able to do it.

You also need to consider where you are going to host this website. There are many hosting companies out there, most that provide linux hosting, but there are quite of bit that do both linux and windows. you'll need to shop around.

Member Avatar for bkjfdghiuds

i have a list of imgs that i scraped using python. (ie: imgur links). I would like to recreate something like the imgur gallery. someone suggested that i need to create a database (using mysql?)

where do i copy and paste this list? I installed xampp and went into phpMyadmin. I'm looking at tutorials of people creating databases, but i only see people creating ... database names? im not sure where to go from there. people seem to be using php to pull up the database names but ... im not sure how this is relevant to what i am doing. (maybe in that same php code, i copy and paste the image links?)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.