{"id":50709244,"url":"https://github.com/coowinit/wp-inspiration-wall-modal","last_synced_at":"2026-06-09T14:01:47.332Z","repository":{"id":350801858,"uuid":"1208327376","full_name":"coowinit/wp-inspiration-wall-modal","owner":"coowinit","description":"A WordPress-ready inspiration wall with modal detail view, built with Bootstrap v5 and Swiper.js for homepage showcase sections.","archived":false,"fork":false,"pushed_at":"2026-04-12T05:58:29.000Z","size":291,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-12T07:23:04.157Z","etag":null,"topics":["bootstrap5","css","custom-post-type","frontend","gallery","html","inspiration","javascript","modal","responsive-design","swiper","wordpress","wordpress-theme"],"latest_commit_sha":null,"homepage":"https://coowinit.github.io/wp-inspiration-wall-modal/","language":"HTML","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-12T05:52:06.000Z","updated_at":"2026-04-12T05:58:01.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/coowinit/wp-inspiration-wall-modal","commit_stats":null,"previous_names":["coowinit/wp-inspiration-wall-modal"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/coowinit/wp-inspiration-wall-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwp-inspiration-wall-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwp-inspiration-wall-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwp-inspiration-wall-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwp-inspiration-wall-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coowinit","download_url":"https://codeload.github.com/coowinit/wp-inspiration-wall-modal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fwp-inspiration-wall-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":["bootstrap5","css","custom-post-type","frontend","gallery","html","inspiration","javascript","modal","responsive-design","swiper","wordpress","wordpress-theme"],"created_at":"2026-06-09T14:01:46.250Z","updated_at":"2026-06-09T14:01:47.326Z","avatar_url":"https://github.com/coowinit.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Instagram-Style Inspiration Gallery for WordPress\n\nA responsive **Instagram-style inspiration wall + modal post detail** template built with **Bootstrap v5**, **Swiper.js**, and a **WordPress-friendly data flow**.\n\nThis version is optimized for homepage sections where:\n\n- the list view shows a fixed number of post cards\n- each card uses only the **featured image + title**\n- clicking a card opens a modal with a **separate custom image gallery**\n- profile-level account data is stored once and reused across all posts\n- mobile users can comfortably read **long post content** inside the modal\n\n---\n\n## Features\n\n- Instagram-style card wall layout\n- Desktop **4 columns**, mobile **2 columns**\n- Outer horizontal slider with navigation arrows\n- Fixed number of homepage cards, no load more\n- Card list uses **featured image only**\n- Modal uses a **separate custom gallery**\n- Shared profile data for `socialName`, `category`, and SVG avatar\n- Mobile reading optimized for longer content\n- WordPress-friendly JSON data handoff for modal content\n- Localized third-party assets supported\n\n---\n\n## Tech Stack\n\n- **HTML5**\n- **CSS3**\n- **JavaScript (Vanilla JS)**\n- **Bootstrap v5**\n- **Swiper.js**\n- **WordPress**\n- Optional: **ACF (Advanced Custom Fields)** for gallery and global option fields\n\n---\n\n## Project Structure\n\n```bash\ninsta-gallery-template-slider-wp-mobile-reading/\n├── index.html\n├── README.md\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│       ├── brand-avatar.svg\n│       ├── pic01.png\n│       ├── pic02.png\n│       ├── ...\n│       └── pic09.png\n└── wp-examples/\n    ├── home-section-loop.php\n    ├── register-cpt-example.php\n    └── README-WP.md\n```\n\n---\n\n## Screenshots\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## Typical Use Cases\n\nThis template works well for:\n\n- homepage inspiration sections\n- brand storytelling blocks\n- Instagram-style showcase modules\n- product or project highlight walls\n- visual campaign sections\n- hospitality, furniture, interior, architectural, and lifestyle galleries\n- WordPress homepage modules driven by a custom post type\n\n---\n\n## Front-End and Back-End Data Flow\n\nThis project is intentionally structured so that **PHP outputs the cards** and **JavaScript only handles interaction**.\n\n### Homepage card list\nOn the homepage, the card wall should be generated by the WordPress loop.\n\nEach card usually outputs:\n\n- post ID\n- featured image\n- title\n\nThat keeps the homepage lightweight and easy to maintain.\n\n### Modal content\nThe modal content is not hardcoded into each card. Instead, WordPress collects the post data and outputs JSON blocks:\n\n```html\n\u003cscript id=\"igProfileData\" type=\"application/json\"\u003e\n  {...}\n\u003c/script\u003e\n\n\u003cscript id=\"igPostsData\" type=\"application/json\"\u003e\n  [...]\n\u003c/script\u003e\n```\n\nThen `main.js`:\n\n- reads `#igProfileData`\n- reads `#igPostsData`\n- maps each post by ID\n- listens for card clicks\n- fills the modal with the matching gallery, title, text, tags, and metadata\n\nThis is a better WordPress approach because:\n\n- the PHP loop remains the source of truth\n- JavaScript does not rebuild the homepage card list\n- homepage performance stays cleaner\n- modal data can be richer without bloating every card\n\n---\n\n## Shared Profile Data vs Post Data\n\n### Shared profile data\nThese values should be stored **once** for the section or brand account:\n\n- `socialName`\n- `category`\n- `socialAvatarSvg`\n- `socialAvatarSvgUrl`\n\nThis is ideal when the whole wall represents the same Instagram-style brand account.\n\n### Post data\nEach post object should contain only post-specific fields:\n\n- `id`\n- `title`\n- `lead`\n- `date`\n- `images`\n- `tags`\n- `content`\n\nThis makes the JSON smaller, cleaner, and easier to maintain.\n\n---\n\n## Recommended WordPress Data Mapping\n\n### Card list on homepage\nUse the **featured image** as the card cover.\n\nRecommended output per card:\n\n- `post ID`\n- `featured image`\n- `title`\n\n### Modal detail\nUse a separate custom gallery field for the modal images.\n\nRecommended mapping:\n\n- **Featured image** → homepage card image\n- **Custom gallery field** (`inspiration_gallery`) → modal image slider\n- **Title** → card title + modal title\n- **Editor content** → modal body text\n- **Post date** → modal metadata\n- **Optional custom fields**:\n  - `inspiration_lead`\n  - `inspiration_tags`\n\n### Shared section-level fields\nRecommended option-level fields:\n\n- `inspiration_social_name`\n- `inspiration_social_category`\n- `inspiration_social_avatar_svg`\n\n### Fallback logic\nA practical fallback is:\n\n- if `inspiration_gallery` has images, use those in the modal\n- if not, fall back to the featured image\n\n---\n\n## Mobile Reading Experience\n\nThis version specifically improves the mobile reading experience for longer post content.\n\n### What changed\nOn mobile:\n\n- the modal becomes almost full-screen\n- the media area gets a controlled fixed height\n- the content column becomes flexible\n- the **text content region becomes the main scrollable area**\n- the rest of the layout stays stable\n\n### Why this matters\nIf long content is placed inside a modal without layout control, mobile users can run into awkward nested scrolling.\n\nThis version avoids that by keeping the structure clearer:\n\n- image area on top\n- profile header below it\n- long caption / text area as the main scroll region\n\nThat feels closer to an app-style reading experience and works better for long captions or article-like content.\n\n---\n\n## Why This JS Structure Works Better for WordPress\n\nIn many front-end demos, JavaScript renders the entire card list from a hardcoded array.\n\nThat is fine for a prototype, but it is not ideal for a real WordPress homepage.\n\nIn this version:\n\n- **PHP renders the list cards directly**\n- **PHP outputs one shared profile JSON block**\n- **PHP outputs one posts JSON dataset for modal details**\n- **JS only controls slider behavior, modal population, and content scrolling**\n\nThat separation makes the codebase easier to maintain because:\n\n- template logic stays in PHP\n- interaction logic stays in JS\n- post quantity can be changed in `WP_Query`\n- the homepage can show only the exact number of cards you want\n- the modal can still contain multiple images and richer text data\n\n---\n\n## Example Homepage Query Logic\n\nThe included example uses a custom post type such as:\n\n- `inspiration_post`\n\nAnd a fixed homepage limit like:\n\n```php\n$posts_limit = 8;\n```\n\nThis is useful because the homepage section usually does **not** need pagination or load more behavior.\n\nYou control the number of posts with `posts_per_page` and let the outer Swiper handle the horizontal browsing experience.\n\n---\n\n## WordPress Integration Notes\n\n### 1. Register a custom post type\nExample included in:\n\n```bash\nwp-examples/register-cpt-example.php\n```\n\nSuggested CPT:\n\n- `inspiration_post`\n\n### 2. Output the homepage section via PHP loop\nExample included in:\n\n```bash\nwp-examples/home-section-loop.php\n```\n\n### 3. Store modal images in a custom gallery field\nRecommended field name:\n\n- `inspiration_gallery`\n\nThis works especially well with ACF Gallery, but you can adapt it to any custom field solution.\n\n### 4. Store shared account data once\nRecommended option fields:\n\n- `inspiration_social_name`\n- `inspiration_social_category`\n- `inspiration_social_avatar_svg`\n\n### 5. Output JSON blocks after the loop\nAt the end of the loop, encode:\n\n- one shared profile object to `#igProfileData`\n- one posts array to `#igPostsData`\n\n### 6. Keep JS focused on interaction\nDo not use JS to rebuild the homepage card list.\n\nUse JS only for:\n\n- outer slider initialization\n- JSON parsing\n- click handling\n- modal population\n- modal slider initialization\n- resetting scroll position for repeated modal opens\n\n---\n\n## Suggested Data Schema\n\n### Shared profile object\n\n```json\n{\n  \"socialName\": \"evodek_company\",\n  \"category\": \"Outdoor Living\",\n  \"socialAvatarSvgUrl\": \"assets/images/brand-avatar.svg\"\n}\n```\n\n### Post object\n\n```json\n{\n  \"id\": \"123\",\n  \"title\": \"Sample Post Title\",\n  \"lead\": \"Short lead text\",\n  \"date\": \"April 12, 2026\",\n  \"images\": [\"image-1.jpg\", \"image-2.jpg\"],\n  \"tags\": [\"#composite decking\", \"#outdoor design\"],\n  \"content\": [\"Paragraph 1\", \"Paragraph 2\"]\n}\n```\n\n---\n\n## How to Use\n\n### Static HTML version\n1. Download or clone the project\n2. Keep CSS, JS, and image paths unchanged\n3. Open `index.html` in your browser\n\n### WordPress version\n1. Register the custom post type\n2. Create posts for the inspiration section\n3. Set a featured image for each post\n4. Add a custom gallery for modal images\n5. Store the shared profile fields once in theme options or ACF Options\n6. Output the loop in your homepage template or a template part\n7. Output the JSON data blocks after the loop\n8. Enqueue or localize the assets in your theme as needed\n\n---\n\n## Customization Ideas\n\nYou can easily extend this project with:\n\n- custom taxonomy filters\n- category badges\n- Instagram handle links\n- real avatar images instead of initials\n- post permalinks\n- lazy loading improvements\n- animation refinements\n- ACF repeater or gallery enhancements\n- theme option controls for homepage post count\n\n---\n\n## Notes for Theme Development\n\nWhen integrating into a WordPress theme, it is recommended to:\n\n- move the homepage section into a template part\n- keep the query arguments configurable\n- sanitize all output with WordPress escaping functions\n- use `wp_json_encode()` for the modal datasets\n- keep the modal markup outside the loop\n- keep class names stable so the JavaScript remains reusable\n\nA recommended structure is:\n\n```bash\nyour-theme/\n├── front-page.php\n├── functions.php\n├── template-parts/\n│   └── home-inspiration-section.php\n└── assets/\n    ├── css/\n    └── js/\n```\n\n---\n\n## License\n\nThis project can be released under the MIT License or another permissive open-source license depending on your preference.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fwp-inspiration-wall-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoowinit%2Fwp-inspiration-wall-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fwp-inspiration-wall-modal/lists"}