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();
} }

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

@ -1,5 +1,6 @@
<!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">
@ -14,8 +15,16 @@ body {
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; } h2 {
font-weight: 700;
color: #1b1f3b;
}
.navbar-brand {
font-weight: 600;
font-size: 1.5rem;
}
/* Masonry Grid */ /* Masonry Grid */
.gallery-container { .gallery-container {
@ -24,6 +33,7 @@ h2 { font-weight: 700; color: #1b1f3b; }
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;
@ -32,14 +42,24 @@ h2 { font-weight: 700; color: #1b1f3b; }
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 { .masonry-item img:hover {
transform: scale(1.03); transform: scale(1.03);
box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25);
} }
/* Modal styling */ /* Modal styling */
.modal-content { background-color: rgba(0,0,0,0.95); border: none; border-radius: 10px; } .modal-content {
.modal-body img { max-height: 85vh; border-radius: 10px; } background-color: rgba(0, 0, 0, 0.95);
border: none;
border-radius: 10px;
}
.modal-body img {
max-height: 85vh;
border-radius: 10px;
}
.modal-navigation { .modal-navigation {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -49,6 +69,7 @@ h2 { font-weight: 700; color: #1b1f3b; }
transform: translateY(-50%); transform: translateY(-50%);
padding: 0 1rem; padding: 0 1rem;
} }
.modal-navigation button { .modal-navigation button {
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
border: none; border: none;
@ -60,7 +81,10 @@ h2 { font-weight: 700; color: #1b1f3b; }
cursor: pointer; cursor: pointer;
transition: background 0.2s; transition: background 0.2s;
} }
.modal-navigation button:hover { background: rgba(0,0,0,0.8); }
.modal-navigation button:hover {
background: rgba(0, 0, 0, 0.8);
}
</style> </style>
</head> </head>
@ -75,13 +99,13 @@ h2 { font-weight: 700; color: #1b1f3b; }
</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>
@ -94,7 +118,13 @@ h2 { font-weight: 700; color: #1b1f3b; }
</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">
@ -115,7 +145,7 @@ h2 { font-weight: 700; color: #1b1f3b; }
<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) {
@ -167,4 +197,5 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
</script> </script>
</body> </body>
</html> </html>