Kiyan
/
PhotoGallery
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor image handling in Photo Gallery 

- Update Java version in pom.xml from 21 to 17.
- Modify PageController to retrieve image file names instead of HTML.
- Implement getImageFileNames method in PhotoService and ImageHtmlBuilder.
- Update index.html to display images using Thymeleaf with new data structure.
This commit is contained in:
Kiyan 2025-10-04 08:19:04 +02:00
parent 2267c38e40
commit 2093b1b82c
5 changed files with 191 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
pom.xml
View File

@ -27,7 +27,7 @@
<url/> <url/>
</scm> </scm>
<properties> <properties>
<java.version>21</java.version> <java.version>17</java.version>
</properties> </properties>
<dependencies> <dependencies>
<dependency> <dependency>
@ -85,6 +85,7 @@
<groupId>org.apache.maven.plugins</groupId> <groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId> <artifactId>maven-compiler-plugin</artifactId>
<configuration> <configuration>
<release>${java.version}</release>
<annotationProcessorPaths> <annotationProcessorPaths>
<path> <path>
<groupId>org.projectlombok</groupId> <groupId>org.projectlombok</groupId>

5
src/main/java/com/example/PhotoGallery/Controller/PageController.java
View File

@ -1,6 +1,7 @@
package com.example.PhotoGallery.Controller; package com.example.PhotoGallery.Controller;
import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Autowired;
import java.util.List;
import org.springframework.stereotype.Controller; import org.springframework.stereotype.Controller;
import org.springframework.ui.Model; import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.GetMapping;
@ -15,8 +16,8 @@ public class PageController {
@GetMapping("/") @GetMapping("/")
public String index(Model model) { public String index(Model model) {
String imagesHtml = photoService.buildImageHtml(model); List<String> imageFileNames = photoService.getImageFileNames();
model.addAttribute("images", imagesHtml); model.addAttribute("imageFileNames", imageFileNames);
return "index"; return "index";
} }

29
src/main/java/com/example/PhotoGallery/Services/ImageHtmlBuilder.java
View File

@ -1,8 +1,8 @@
package com.example.PhotoGallery.Services; package com.example.PhotoGallery.Services;
import java.io.File; import java.io.File;
import java.util.ArrayList;
import java.util.List; import java.util.List;
import java.util.Random;
import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service; import org.springframework.stereotype.Service;
@ -16,36 +16,17 @@ public class ImageHtmlBuilder {
@Autowired @Autowired
private PhotoRepo photoRepo; private PhotoRepo photoRepo;
public String htmlImageBuilder() { public List<String> getImageFileNames() {
String html = ""; List<String> fileNames = new ArrayList<>();
List<Photo> allPhotos = photoRepo.findAll(); List<Photo> allPhotos = photoRepo.findAll();
for (Photo photo : allPhotos) { for (Photo photo : allPhotos) {
String thumbnailPath = photo.getThumbnail_path(); String thumbnailPath = photo.getThumbnail_path();
String filename = new File(thumbnailPath).getName(); String filename = new File(thumbnailPath).getName();
fileNames.add(filename);
// if (metaData.getDate is before x and after y)
html = createHtml(filename);
//if searching && is search in tag
//html createHtml(filename);
} }
return html; return fileNames;
} }
private String createHtml(String fileName) {
StringBuilder html = new StringBuilder();
html.append("<div class=\"masonry-item\">")
.append("<img data-src=\"/thumbnails/").append(fileName).append("\" ")
.append("data-full=\"/images/").append(fileName).append("\" ")
.append("class=\"lazy-img\" loading=\"lazy\" />")
.append("</div>");
return html.toString();
}
} }

4
src/main/java/com/example/PhotoGallery/Services/PhotoService.java
View File

@ -25,8 +25,8 @@ public class PhotoService {
databasePopulation.populateDatabase(); databasePopulation.populateDatabase();
} }
public String buildImageHtml(Model model) { public List<String> getImageFileNames() {
return imageHtmlBuilder.htmlImageBuilder(); return imageHtmlBuilder.getImageFileNames();
} }

169
src/main/resources/templates/index.html
View File

@ -1,46 +1,66 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <html lang="en" xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Photo Gallery</title> <title>Photo Gallery</title>
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<style> <style>
body { body {
background: linear-gradient(160deg, #e0eafc, #cfdef3); background: linear-gradient(160deg, #e0eafc, #cfdef3);
font-family: 'Segoe UI', sans-serif; font-family: 'Segoe UI', sans-serif;
color: #333; color: #333;
} }
h2 { font-weight: 700; color: #1b1f3b; }
.navbar-brand { font-weight: 600; font-size: 1.5rem; }
/* Masonry Grid */ h2 {
.gallery-container { font-weight: 700;
color: #1b1f3b;
}
.navbar-brand {
font-weight: 600;
font-size: 1.5rem;
}
/* Masonry Grid */
.gallery-container {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 10px; grid-auto-rows: 10px;
gap: 10px; gap: 10px;
} }
.masonry-item img {
.masonry-item img {
width: 100%; width: 100%;
height: auto; height: auto;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 8px 20px rgba(0,0,0,0.15); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
} }
.masonry-item img:hover {
transform: scale(1.03);
box-shadow: 0 16px 30px rgba(0,0,0,0.25);
}
/* Modal styling */ .masonry-item img:hover {
.modal-content { background-color: rgba(0,0,0,0.95); border: none; border-radius: 10px; } transform: scale(1.03);
.modal-body img { max-height: 85vh; border-radius: 10px; } box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25);
.modal-navigation { }
/* Modal styling */
.modal-content {
background-color: rgba(0, 0, 0, 0.95);
border: none;
border-radius: 10px;
}
.modal-body img {
max-height: 85vh;
border-radius: 10px;
}
.modal-navigation {
position: absolute; position: absolute;
top: 50%; top: 50%;
width: 100%; width: 100%;
@ -48,9 +68,10 @@ h2 { font-weight: 700; color: #1b1f3b; }
justify-content: space-between; justify-content: space-between;
transform: translateY(-50%); transform: translateY(-50%);
padding: 0 1rem; padding: 0 1rem;
} }
.modal-navigation button {
background: rgba(0,0,0,0.5); .modal-navigation button {
background: rgba(0, 0, 0, 0.5);
border: none; border: none;
color: #fff; color: #fff;
font-size: 2rem; font-size: 2rem;
@ -59,47 +80,56 @@ h2 { font-weight: 700; color: #1b1f3b; }
height: 50px; height: 50px;
cursor: pointer; cursor: pointer;
transition: background 0.2s; transition: background 0.2s;
} }
.modal-navigation button:hover { background: rgba(0,0,0,0.8); }
</style> .modal-navigation button:hover {
background: rgba(0, 0, 0, 0.8);
}
</style>
</head> </head>
<body> <body>
<!-- Navbar --> <!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="#">PhotoGallery</a> <a class="navbar-brand" href="#">PhotoGallery</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav"> <div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> <ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" href="#">All</a></li> <li class="nav-item"><a class="nav-link active disabled" href="#">All</a></li>
<li class="nav-item"><a class="nav-link" href="#">Favorites</a></li> <li class="nav-item"><a class="nav-link disabled" href="#">Favorites</a></li>
<li class="nav-item"><a class="nav-link" href="#">Recent</a></li> <li class="nav-item"><a class="nav-link disabled" href="#">Recent</a></li>
</ul> </ul>
<form class="d-flex" role="search"> <form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search"> <input class="form-control me-2 disabled" type="search" placeholder="Search">
<button class="btn btn-outline-light" type="submit">Search</button> <button class="btn btn-outline-light disabled" type="submit">Search</button>
</form> </form>
</div> </div>
</div> </div>
</nav> </nav>
<!-- Hero Section --> <!-- Hero Section -->
<div class="container text-center my-5"> <div class="container text-center my-5">
<h2>Welcome To The Gallery</h2> <h2>Welcome To The Gallery</h2>
<p class="text-muted">Memories</p> <p class="text-muted">Memories</p>
</div> </div>
<!-- Gallery Container --> <!-- Gallery Container -->
<div class="container gallery-container" th:utext="${images}"></div> <div class="container gallery-container" id="gallery-container">
<!--/* Thymeleaf loop to generate image elements */-->
<div class="masonry-item" th:each="fileName : ${imageFileNames}">
<img th:data-src="@{/thumbnails/{name}(name=${fileName})}"
th:data-full="@{/images/{name}(name=${fileName})}" class="lazy-img" loading="lazy" />
</div>
</div>
<!-- Image Modal --> <!-- Image Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true"> <div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl"> <div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content"> <div class="modal-content">
<div class="modal-body text-center p-0 position-relative"> <div class="modal-body text-center p-0 position-relative">
<img id="modalImage" src="" class="img-fluid" alt="Full size"> <img id="modalImage" src="" class="img-fluid" alt="Full size">
<div class="modal-navigation"> <div class="modal-navigation">
@ -107,15 +137,15 @@ h2 { font-weight: 700; color: #1b1f3b; }
<button id="nextImage">&#10095;</button> <button id="nextImage">&#10095;</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const galleryContainer = document.querySelector('.gallery-container'); const galleryContainer = document.getElementById('gallery-container');
const lazyImages = galleryContainer.querySelectorAll('img.lazy-img'); const lazyImages = galleryContainer.querySelectorAll('img.lazy-img');
function resizeMasonryItem(img) { function resizeMasonryItem(img) {
@ -164,7 +194,8 @@ document.addEventListener('DOMContentLoaded', () => {
// Recalculate on resize // Recalculate on resize
window.addEventListener('resize', resizeAllMasonry); window.addEventListener('resize', resizeAllMasonry);
window.addEventListener('load', resizeAllMasonry); window.addEventListener('load', resizeAllMasonry);
}); });
</script> </script>
</body> </body>
</html> </html>