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:
parent
2267c38e40
commit
2093b1b82c
3
pom.xml
3
pom.xml
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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();
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,170 +1,201 @@
|
||||||
<!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;
|
||||||
display: grid;
|
color: #1b1f3b;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
}
|
||||||
grid-auto-rows: 10px;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
.masonry-item img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
|
|
||||||
cursor: pointer;
|
|
||||||
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 */
|
.navbar-brand {
|
||||||
.modal-content { background-color: rgba(0,0,0,0.95); border: none; border-radius: 10px; }
|
font-weight: 600;
|
||||||
.modal-body img { max-height: 85vh; border-radius: 10px; }
|
font-size: 1.5rem;
|
||||||
.modal-navigation {
|
}
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
/* Masonry Grid */
|
||||||
width: 100%;
|
.gallery-container {
|
||||||
display: flex;
|
display: grid;
|
||||||
justify-content: space-between;
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||||
transform: translateY(-50%);
|
grid-auto-rows: 10px;
|
||||||
padding: 0 1rem;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
.modal-navigation button {
|
|
||||||
background: rgba(0,0,0,0.5);
|
.masonry-item img {
|
||||||
border: none;
|
width: 100%;
|
||||||
color: #fff;
|
height: auto;
|
||||||
font-size: 2rem;
|
border-radius: 10px;
|
||||||
border-radius: 50%;
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||||
width: 50px;
|
cursor: pointer;
|
||||||
height: 50px;
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
cursor: pointer;
|
}
|
||||||
transition: background 0.2s;
|
|
||||||
}
|
.masonry-item img:hover {
|
||||||
.modal-navigation button:hover { background: rgba(0,0,0,0.8); }
|
transform: scale(1.03);
|
||||||
</style>
|
box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
top: 50%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-navigation button {
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 2rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 */-->
|
||||||
<!-- Image Modal -->
|
<div class="masonry-item" th:each="fileName : ${imageFileNames}">
|
||||||
<div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
|
<img th:data-src="@{/thumbnails/{name}(name=${fileName})}"
|
||||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
th:data-full="@{/images/{name}(name=${fileName})}" class="lazy-img" loading="lazy" />
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-body text-center p-0 position-relative">
|
|
||||||
<img id="modalImage" src="" class="img-fluid" alt="Full size">
|
|
||||||
<div class="modal-navigation">
|
|
||||||
<button id="prevImage">❮</button>
|
|
||||||
<button id="nextImage">❯</button>
|
|
||||||
</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>
|
<!-- Image Modal -->
|
||||||
|
<div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-body text-center p-0 position-relative">
|
||||||
|
<img id="modalImage" src="" class="img-fluid" alt="Full size">
|
||||||
|
<div class="modal-navigation">
|
||||||
|
<button id="prevImage">❮</button>
|
||||||
|
<button id="nextImage">❯</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const galleryContainer = document.querySelector('.gallery-container');
|
|
||||||
const lazyImages = galleryContainer.querySelectorAll('img.lazy-img');
|
|
||||||
|
|
||||||
function resizeMasonryItem(img) {
|
<script>
|
||||||
const rowHeight = parseInt(getComputedStyle(galleryContainer).getPropertyValue('grid-auto-rows'));
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
const rowGap = parseInt(getComputedStyle(galleryContainer).getPropertyValue('gap'));
|
const galleryContainer = document.getElementById('gallery-container');
|
||||||
const rowSpan = Math.ceil((img.getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
|
const lazyImages = galleryContainer.querySelectorAll('img.lazy-img');
|
||||||
img.parentElement.style.gridRowEnd = `span ${rowSpan}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function resizeAllMasonry() {
|
function resizeMasonryItem(img) {
|
||||||
galleryContainer.querySelectorAll('.masonry-item img').forEach(img => {
|
const rowHeight = parseInt(getComputedStyle(galleryContainer).getPropertyValue('grid-auto-rows'));
|
||||||
if (img.complete) resizeMasonryItem(img);
|
const rowGap = parseInt(getComputedStyle(galleryContainer).getPropertyValue('gap'));
|
||||||
});
|
const rowSpan = Math.ceil((img.getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
|
||||||
}
|
img.parentElement.style.gridRowEnd = `span ${rowSpan}`;
|
||||||
|
|
||||||
// Lazy load + masonry setup
|
|
||||||
const observer = new IntersectionObserver((entries, obs) => {
|
|
||||||
entries.forEach(entry => {
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
const img = entry.target;
|
|
||||||
img.src = img.dataset.src;
|
|
||||||
obs.unobserve(img);
|
|
||||||
img.onload = () => resizeMasonryItem(img);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function resizeAllMasonry() {
|
||||||
|
galleryContainer.querySelectorAll('.masonry-item img').forEach(img => {
|
||||||
|
if (img.complete) resizeMasonryItem(img);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Lazy load + masonry setup
|
||||||
|
const observer = new IntersectionObserver((entries, obs) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
const img = entry.target;
|
||||||
|
img.src = img.dataset.src;
|
||||||
|
obs.unobserve(img);
|
||||||
|
img.onload = () => resizeMasonryItem(img);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
lazyImages.forEach(img => observer.observe(img));
|
||||||
|
|
||||||
|
// Modal setup
|
||||||
|
const modal = new bootstrap.Modal(document.getElementById('imageModal'));
|
||||||
|
const modalImg = document.getElementById('modalImage');
|
||||||
|
let currentIndex = -1;
|
||||||
|
const images = Array.from(lazyImages);
|
||||||
|
|
||||||
|
function showModal(idx) { currentIndex = idx; modalImg.src = images[idx].dataset.full; modal.show(); }
|
||||||
|
images.forEach((img, idx) => img.addEventListener('click', () => showModal(idx)));
|
||||||
|
document.getElementById('prevImage').addEventListener('click', () => {
|
||||||
|
currentIndex = (currentIndex - 1 + images.length) % images.length;
|
||||||
|
modalImg.src = images[currentIndex].dataset.full;
|
||||||
|
});
|
||||||
|
document.getElementById('nextImage').addEventListener('click', () => {
|
||||||
|
currentIndex = (currentIndex + 1) % images.length;
|
||||||
|
modalImg.src = images[currentIndex].dataset.full;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Recalculate on resize
|
||||||
|
window.addEventListener('resize', resizeAllMasonry);
|
||||||
|
window.addEventListener('load', resizeAllMasonry);
|
||||||
});
|
});
|
||||||
});
|
</script>
|
||||||
lazyImages.forEach(img => observer.observe(img));
|
|
||||||
|
|
||||||
// Modal setup
|
|
||||||
const modal = new bootstrap.Modal(document.getElementById('imageModal'));
|
|
||||||
const modalImg = document.getElementById('modalImage');
|
|
||||||
let currentIndex = -1;
|
|
||||||
const images = Array.from(lazyImages);
|
|
||||||
|
|
||||||
function showModal(idx) { currentIndex = idx; modalImg.src = images[idx].dataset.full; modal.show(); }
|
|
||||||
images.forEach((img, idx) => img.addEventListener('click', () => showModal(idx)));
|
|
||||||
document.getElementById('prevImage').addEventListener('click', () => {
|
|
||||||
currentIndex = (currentIndex - 1 + images.length) % images.length;
|
|
||||||
modalImg.src = images[currentIndex].dataset.full;
|
|
||||||
});
|
|
||||||
document.getElementById('nextImage').addEventListener('click', () => {
|
|
||||||
currentIndex = (currentIndex + 1) % images.length;
|
|
||||||
modalImg.src = images[currentIndex].dataset.full;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Recalculate on resize
|
|
||||||
window.addEventListener('resize', resizeAllMasonry);
|
|
||||||
window.addEventListener('load', resizeAllMasonry);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue