{"id":50709230,"url":"https://github.com/coowinit/bootstrap-swiper-card-gallery-modal","last_synced_at":"2026-06-09T14:01:46.767Z","repository":{"id":350791846,"uuid":"1208286175","full_name":"coowinit/bootstrap-swiper-card-gallery-modal","owner":"coowinit","description":"A responsive card gallery page built with Bootstrap v5 and Swiper.js, featuring per-card sliders, a large detail modal, localized assets, and a structure ready for WordPress integration.","archived":false,"fork":false,"pushed_at":"2026-04-12T04:31:03.000Z","size":538,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-12T06:20:33.789Z","etag":null,"topics":["bootstrap","bootstrap5","card-gallery","css","frontend","gallery","html","javascript","modal","portfolio-template","responsive-design","swiper","ui-design","wordpress","wordpress-theme"],"latest_commit_sha":null,"homepage":"https://coowinit.github.io/bootstrap-swiper-card-gallery-modal/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coowinit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-12T04:19:23.000Z","updated_at":"2026-04-12T04:30:47.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/coowinit/bootstrap-swiper-card-gallery-modal","commit_stats":null,"previous_names":["coowinit/bootstrap-swiper-card-gallery-modal"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/coowinit/bootstrap-swiper-card-gallery-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fbootstrap-swiper-card-gallery-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fbootstrap-swiper-card-gallery-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fbootstrap-swiper-card-gallery-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fbootstrap-swiper-card-gallery-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coowinit","download_url":"https://codeload.github.com/coowinit/bootstrap-swiper-card-gallery-modal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fbootstrap-swiper-card-gallery-modal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34110012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap5","card-gallery","css","frontend","gallery","html","javascript","modal","portfolio-template","responsive-design","swiper","ui-design","wordpress","wordpress-theme"],"created_at":"2026-06-09T14:01:45.579Z","updated_at":"2026-06-09T14:01:46.752Z","avatar_url":"https://github.com/coowinit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bootstrap Swiper Card Gallery with Modal Detail\n\nA clean, responsive HTML gallery page built with **Bootstrap v5** and **Swiper.js**.\n\nThis project uses a **card grid + image slider + detail modal** pattern that works well for portfolios, brand campaigns, editorial content, lookbooks, case studies, and visual showcase pages.\n\n---\n\n## Demo Overview\n\nThis page includes:\n\n- Responsive card grid layout\n- 3-column desktop layout / 1-column mobile layout\n- Per-card Swiper slider support\n- Click-to-open detail modal\n- Large modal image viewer with thumbnails\n- Load More interaction\n- Localized CSS / JS assets\n- Local image folder structure for quick replacement\n\n---\n\n## Tech Stack\n\n- **HTML5**\n- **CSS3**\n- **JavaScript (Vanilla JS)**\n- **Bootstrap v5**\n- **Swiper.js**\n\n---\n\n## Features\n\n- Clean card-based gallery UI\n- Supports both **single-image** and **multi-image** cards\n- Card image area can directly open the detail modal\n- Slider arrows are hidden by default and only appear on image hover\n- Pagination dots and navigation arrows do not accidentally trigger the modal\n- Desktop modal uses a more controlled presentation size for better visual balance\n- Large modal images use `object-fit: contain` to better handle non-uniform image proportions\n- Grid images use `object-fit: cover` to keep the card layout neat and consistent\n- Button text is centered with CSS for more stable alignment\n- Split file structure for easier maintenance and later framework / CMS integration\n\n---\n\n## Project Structure\n\n```bash\n.\n├── index.html\n├── assets/\n│   ├── css/\n│   │   ├── bootstrap.min.css\n│   │   ├── swiper-bundle.min.css\n│   │   └── style.css\n│   └── js/\n│       ├── bootstrap.bundle.min.js\n│       ├── swiper-bundle.min.js\n│       └── main.js\n└── images/\n    ├── pic01.png\n    ├── pic02.png\n    ├── pic03.png\n    ├── pic04.png\n    ├── pic05.png\n    ├── pic06.png\n    ├── pic07.png\n    ├── pic08.png\n    └── pic09.png\n```\n\n---\n\n## Screenshots\n\nThe following screenshots show the gallery list layout and the detail modal view.\n\n### List Page\n![Gallery List Page](docs/screenshots/gallery-list-page.png)\n\n### Detail Modal\n![Gallery Modal Detail](docs/screenshots/gallery-modal-detail.png)\n\n---\n\n## How to Use\n\n1. Download or clone the repository.\n2. Keep the folder structure unchanged.\n3. Replace the demo images inside the `images/` folder with your own files.\n4. Keep the filenames in this format:\n\n```bash\npic01.png\npic02.png\n...\npic09.png\n```\n\n5. Open `index.html` in your browser.\n\n---\n\n## Data Customization\n\nThe card content is currently defined in:\n\n```js\nassets/js/main.js\n```\n\nYou can update:\n\n- category\n- title\n- lead text\n- author\n- date\n- button link\n- image array\n- detail content\n\nThis makes the page easy to adapt for:\n\n- portfolio entries\n- case study listings\n- campaign pages\n- editorial features\n- product storytelling pages\n- lookbook / gallery pages\n\n---\n\n## Recommended Use Cases\n\nThis layout is especially suitable for:\n\n- Brand campaign showcase pages\n- Portfolio / studio presentation pages\n- Editorial article previews\n- Case study listing pages\n- Visual storytelling landing pages\n- Lookbook or collection presentation pages\n- Image-driven content archives\n\n---\n\n## WordPress Integration Notes\n\nThis project can be used as a front-end prototype before integrating into a WordPress theme or custom template.\n\n### Recommended integration approach\n\n- Convert `index.html` into a WordPress template file or template part\n- Move static content from `main.js` into PHP-generated data\n- Output card data dynamically from:\n  - custom post types\n  - posts\n  - ACF fields\n  - WooCommerce products\n  - custom queries\n- Enqueue CSS and JS properly with `wp_enqueue_style()` and `wp_enqueue_script()`\n- Replace static image paths with dynamic theme or upload URLs\n\n### Important notes when integrating into WordPress\n\n#### 1. Avoid duplicate library loading\nIf your theme already loads Bootstrap or Swiper, do not load them again.\n\n#### 2. Do not hardcode production data in JavaScript\nThe current demo data is fine for static preview, but in WordPress it is better to:\n\n- output JSON from PHP\n- localize script data\n- or render the card markup directly in PHP\n\n#### 3. Replace local image paths\nThe current demo uses:\n\n```bash\nimages/pic01.png\n```\n\nIn WordPress, replace these with dynamic URLs such as:\n\n- theme directory assets\n- featured image URLs\n- gallery field URLs\n- media library images\n\n#### 4. Keep modal structure reusable\nUse one shared modal container and dynamically inject the corresponding content, rather than outputting one modal per card.\n\n#### 5. Test content with mixed image proportions\nThis layout is already optimized for inconsistent image sizes, but real project data should still be tested with:\n\n- landscape images\n- portrait images\n- square images\n- long titles\n- short titles\n- longer detail text\n\n### Good WordPress use scenarios\n\n- custom post type archive + modal detail\n- WooCommerce lookbook or inspiration page\n- campaign landing page with modal detail view\n- featured stories block on homepage\n- brand case study listing template\n\n---\n\n## Performance Notes\n\nFor real project use, consider:\n\n- compressing images before upload\n- generating multiple image sizes\n- lazy loading where appropriate\n- limiting the initial card batch\n- using CDN or optimized media delivery in production\n\n---\n\n## Future Improvements\n\nPossible next steps:\n\n- category filtering\n- search function\n- AJAX or API-based data loading\n- WordPress dynamic rendering\n- JSON data source\n- light/dark style presets\n- animation fine-tuning\n- accessibility improvements\n\n---\n\n## License\n\nThis project is open source and available for personal and commercial use.\n\nYou may modify, adapt, and reuse it in your own projects. Attribution is appreciated but not required.\n\n---\n\n## Author Notes\n\nThis project was built as a clean, presentation-focused front-end gallery prototype with an emphasis on:\n\n- controlled visual rhythm\n- polished modal interaction\n- flexible image handling\n- future WordPress integration readiness\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fbootstrap-swiper-card-gallery-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoowinit%2Fbootstrap-swiper-card-gallery-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fbootstrap-swiper-card-gallery-modal/lists"}