Witam
Zaznaczam że w programowaniu jestem zielony, jakieś tylko podstawowe zmiany w kodzie ogarniam.
Potrzebuję gotowego rozwiązania, lub pomocy w znalezieniu skryptu galerii.
Skrypt ten miałby działać do portfolio fotografa.
Strona jest gotowa, ale galeria była wykonana w postaci wstawiania kolejnego kodu ( aby dodać zdjęcia).
Z czasem plik galerii jest już tak duży i chciałbym to zmienić.
Założenia:
Galeria ładowana z Mysql ( ilość zdjęć wyświetlanych ograniczona jak w lazy loading)
Dodawanie zdjęć masowo jako zdjęcia główne i miniaturki w osobnych folderach ( osobno miniaturki i te w pełnej rozdzielczości)
Dodawane zdjęcia żeby były numerowane automatycznie kolejnym numerkiem.
Zamieszczam obecny fragment galerii jak to wygląda. Jest ich ponad 200 na stronie także plik jest obszerny...
<http://december.com/html/4/element/div.html class="row portfolio-column mb-50 gallery" id="pregnancy"> <!-- Item --> <http://december.com/html/4/element/div.html id="loading" class="col-12 col-sm-6 col-md-4 col-lg-3 column_single_gallery_item studio"> <http://december.com/html/4/element/img.html src="/images/thumbnail/225.jpg" alt=""> <http://december.com/html/4/element/div.html class="hover_overlay"> <http://december.com/html/4/element/a.html class="gallery_img studio_img" href="/images/gallery/225.jpg"><http://december.com/html/4/element/i.html class="fa fa-eye"></http://december.com/html/4/element/i.html></http://december.com/html/4/element/a.html> </http://december.com/html/4/element/div.html> </http://december.com/html/4/element/div.html> <!-- Item --> <http://december.com/html/4/element/div.html id="loading" class="col-12 col-sm-6 col-md-4 col-lg-3 column_single_gallery_item studio"> <http://december.com/html/4/element/img.html src="/images/thumbnail/224.jpg" alt=""> <http://december.com/html/4/element/div.html class="hover_overlay"> <http://december.com/html/4/element/a.html class="gallery_img studio_img" href="/images/gallery/224.jpg"><http://december.com/html/4/element/i.html class="fa fa-eye"></http://december.com/html/4/element/i.html></http://december.com/html/4/element/a.html> </http://december.com/html/4/element/div.html> </http://december.com/html/4/element/div.html>
Jeżeli nie możesz znaleźć gotowca Galerii, to może być trudno o pomoc, ale spróbujmy
Opcja pierwsza zleć jej napisanie, albo spróbuj tego:
https://github.com/artimman/dbmframework
gdzie masz gotowy przykład i klasę uploadu zdjęć. Klasa poradzi sobie z każdym zdjęciem i elegancko przekonwertuje duży obraz na format webowy.
Przykład uploadu znajdziesz pod linkiem: /panel/createOrEditBlog -> button Image -> Upload image
Jako szablon możesz wykorzystać np.:
https://mdbootstrap.com/docs/standard/extended/gallery/
Taka propozycja, daj znać jak wyjdzie, bo jestem ciekaw, czy jak piszesz Zielony sobie z tym zadaniem poradzi?!
Dzięki za odpowiedź.
Problem częściowo rozwiązany z pomocą ChatGPT
Nie patrzę tu na estetykę kodu, ma być funkcjonalny strona nie jest motłochem żeby obciążać bazę i serwer.
Wrzucam gotowca jaki mi wypluł. troszkę edytowany kod przez kolegę w zapytaniu i śmiga tak jak mi potrzeba.
get_images.php
<?php // Połączenie z bazą danych // $conn = new mysqli($host, $username, $password, $database); // if ($conn->connect_error) { // die("Connection failed: " . $conn->connect_error); // } // Zapytanie SQL pobierające ścieżki do zdjęć i miniatur, posortowane po dacie uploadu $sql = "SELECT i.thumbnail_path, i.gallery_path, c.group FROM images AS i LEFT JOIN categories AS c ON i.category_id = c.id ORDER BY i.upload_date DESC"; // Sortowanie malejąco po dacie uploadu $result = $conn->query($sql); if ($result->num_rows > 0) { // Iteracja przez wyniki zapytania while($row = mysqli_fetch_assoc($result)) { http://www.php.net/echo '<div " class="col-12 col-sm-6 col-md-4 col-lg-3 column_single_gallery_item ' . $row["group"] . '">'; http://www.php.net/echo '<img src="' . $row["thumbnail_path"] . '" alt="">'; http://www.php.net/echo '<div class="hover_overlay">'; http://www.php.net/echo '<a class="gallery_img " href="' . $row["gallery_path"] . '"><i class="fa fa-eye"></i></a>'; http://www.php.net/echo '</div>'; http://www.php.net/echo '</div>'; } } else { http://www.php.net/echo "0 results"; } // Zamykanie połączenia $conn->close(); ?>
<?php // Połączenie z bazą danych $conn = new mysqli($host, $username, $password, $database); if ($conn->connect_error) { http://www.php.net/die("Connection failed: " . $conn->connect_error); } // Zapytanie SQL pobierające kategorie $categories_query = "SELECT * FROM categories"; $categories_result = $conn->query($categories_query); if ($categories_result->num_rows > 0) { // Wyświetlenie przycisków kategorii while($category_row = mysqli_fetch_assoc($categories_result)) { http://www.php.net/echo '<button class="btn" id="' . $category_row["group"] . '" type="button" data-filter=".' . $category_row["group"] . '">' . $category_row["cat_name"] . '</button>'; } } else { http://www.php.net/echo "0 categories"; } // Zamykanie połączenia // $conn->close(); ?>
<?php // Import configuration from config.php require_once 'config.php'; // Connect to the database $conn = new mysqli($host, $username, $password, $database); // Check connection if ($conn->connect_error) { http://www.php.net/die("Connection failed: " . $conn->connect_error); } $target_gallery_dir = "images/gallery/"; $target_thumbnail_dir = "images/thumbnail/"; $uploaded_images = http://www.php.net/array(); $upload_failed = false; if (http://www.php.net/isset($_POST["submit"])) { $category_id = $_POST["category"]; // Get category ID from the form // Handle multiple uploaded files foreach ($_FILES['image']['tmp_name'] as $key => $tmp_name) { $filename = $_FILES['image']['name'][$key]; $target_gallery_file = $target_gallery_dir . http://www.php.net/basename($filename); $target_thumbnail_file = $target_thumbnail_dir . http://www.php.net/basename($filename); $imageFileType = http://www.php.net/strtolower(http://www.php.net/pathinfo($target_gallery_file, PATHINFO_EXTENSION)); $check = http://www.php.net/getimagesize($tmp_name); if ($check !== false && $imageFileType == "jpg") { if (http://www.php.net/move_uploaded_file($tmp_name, $target_gallery_file)) { // Create thumbnail list($width, $height) = http://www.php.net/getimagesize($target_gallery_file); $thumb_width = 400; // New thumbnail width $thumb_height = 600; // New thumbnail height $thumb = imagecreatetruecolor($thumb_width, $thumb_height); $source = imagecreatefromjpeg($target_gallery_file); imagecopyresized($thumb, $source, 0, 0, 0, 0, $thumb_width, $thumb_height, $width, $height); imagejpeg($thumb, $target_thumbnail_file); imagedestroy($source); imagedestroy($thumb); // Save image information in the database $sql = "INSERT INTO images (gallery_path, thumbnail_path, category_id, upload_date) VALUES ('$target_gallery_file', '$target_thumbnail_file', '$category_id', CURRENT_TIMESTAMP)"; if ($conn->query($sql) !== TRUE) { $upload_failed = true; } $uploaded_images[] = $filename; } else { $upload_failed = true; } } else { $upload_failed = true; } } // After successful upload if (!$upload_failed) { http://www.php.net/echo "Zdjęcia zostały pomyślnie wgrane."; } else { http://www.php.net/echo "Wystąpił błąd podczas wgrywania zdjęć."; } } // Close database connection $conn->close(); ?>
<div > <?php if (!http://www.php.net/empty($success_message)): ?> <p><?php http://www.php.net/echo $success_message; ?></p> <?php endif; ?> <form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="image[]" multiple accept="image/jpeg"> <select name="category"> <option value="">Wybierz kategorię</option> <option value="1">Ciążowa</option> <option value="2">Noworodkowa</option> <option value="3">Kobieca</option> <option value="4">Plener</option> <option value="5">Studio</option> <option value="6">Świąteczna</option> </select> <input type="submit" value="Upload zdjęcia" name="submit"> </form> </div>
<?php require_once 'get_images.php'; ?>
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)