https://github.com/coowinit/wp-inspiration-wall-modal
A WordPress-ready inspiration wall with modal detail view, built with Bootstrap v5 and Swiper.js for homepage showcase sections.
https://github.com/coowinit/wp-inspiration-wall-modal
bootstrap5 css custom-post-type frontend gallery html inspiration javascript modal responsive-design swiper wordpress wordpress-theme
Last synced: 26 days ago
JSON representation
A WordPress-ready inspiration wall with modal detail view, built with Bootstrap v5 and Swiper.js for homepage showcase sections.
- Host: GitHub
- URL: https://github.com/coowinit/wp-inspiration-wall-modal
- Owner: coowinit
- Created: 2026-04-12T05:52:06.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-04-12T05:58:29.000Z (3 months ago)
- Last Synced: 2026-04-12T07:23:04.157Z (3 months ago)
- Topics: bootstrap5, css, custom-post-type, frontend, gallery, html, inspiration, javascript, modal, responsive-design, swiper, wordpress, wordpress-theme
- Language: HTML
- Homepage: https://coowinit.github.io/wp-inspiration-wall-modal/
- Size: 284 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Instagram-Style Inspiration Gallery for WordPress
A responsive **Instagram-style inspiration wall + modal post detail** template built with **Bootstrap v5**, **Swiper.js**, and a **WordPress-friendly data flow**.
This version is optimized for homepage sections where:
- the list view shows a fixed number of post cards
- each card uses only the **featured image + title**
- clicking a card opens a modal with a **separate custom image gallery**
- profile-level account data is stored once and reused across all posts
- mobile users can comfortably read **long post content** inside the modal
---
## Features
- Instagram-style card wall layout
- Desktop **4 columns**, mobile **2 columns**
- Outer horizontal slider with navigation arrows
- Fixed number of homepage cards, no load more
- Card list uses **featured image only**
- Modal uses a **separate custom gallery**
- Shared profile data for `socialName`, `category`, and SVG avatar
- Mobile reading optimized for longer content
- WordPress-friendly JSON data handoff for modal content
- Localized third-party assets supported
---
## Tech Stack
- **HTML5**
- **CSS3**
- **JavaScript (Vanilla JS)**
- **Bootstrap v5**
- **Swiper.js**
- **WordPress**
- Optional: **ACF (Advanced Custom Fields)** for gallery and global option fields
---
## Project Structure
```bash
insta-gallery-template-slider-wp-mobile-reading/
├── index.html
├── README.md
├── assets/
│ ├── css/
│ │ ├── bootstrap.min.css
│ │ ├── swiper-bundle.min.css
│ │ └── style.css
│ ├── js/
│ │ ├── bootstrap.bundle.min.js
│ │ ├── swiper-bundle.min.js
│ │ └── main.js
│ └── images/
│ ├── brand-avatar.svg
│ ├── pic01.png
│ ├── pic02.png
│ ├── ...
│ └── pic09.png
└── wp-examples/
├── home-section-loop.php
├── register-cpt-example.php
└── README-WP.md
```
---
## Screenshots
### List Page
### Detail Modal
---
## Typical Use Cases
This template works well for:
- homepage inspiration sections
- brand storytelling blocks
- Instagram-style showcase modules
- product or project highlight walls
- visual campaign sections
- hospitality, furniture, interior, architectural, and lifestyle galleries
- WordPress homepage modules driven by a custom post type
---
## Front-End and Back-End Data Flow
This project is intentionally structured so that **PHP outputs the cards** and **JavaScript only handles interaction**.
### Homepage card list
On the homepage, the card wall should be generated by the WordPress loop.
Each card usually outputs:
- post ID
- featured image
- title
That keeps the homepage lightweight and easy to maintain.
### Modal content
The modal content is not hardcoded into each card. Instead, WordPress collects the post data and outputs JSON blocks:
```html
{...}
[...]
```
Then `main.js`:
- reads `#igProfileData`
- reads `#igPostsData`
- maps each post by ID
- listens for card clicks
- fills the modal with the matching gallery, title, text, tags, and metadata
This is a better WordPress approach because:
- the PHP loop remains the source of truth
- JavaScript does not rebuild the homepage card list
- homepage performance stays cleaner
- modal data can be richer without bloating every card
---
## Shared Profile Data vs Post Data
### Shared profile data
These values should be stored **once** for the section or brand account:
- `socialName`
- `category`
- `socialAvatarSvg`
- `socialAvatarSvgUrl`
This is ideal when the whole wall represents the same Instagram-style brand account.
### Post data
Each post object should contain only post-specific fields:
- `id`
- `title`
- `lead`
- `date`
- `images`
- `tags`
- `content`
This makes the JSON smaller, cleaner, and easier to maintain.
---
## Recommended WordPress Data Mapping
### Card list on homepage
Use the **featured image** as the card cover.
Recommended output per card:
- `post ID`
- `featured image`
- `title`
### Modal detail
Use a separate custom gallery field for the modal images.
Recommended mapping:
- **Featured image** → homepage card image
- **Custom gallery field** (`inspiration_gallery`) → modal image slider
- **Title** → card title + modal title
- **Editor content** → modal body text
- **Post date** → modal metadata
- **Optional custom fields**:
- `inspiration_lead`
- `inspiration_tags`
### Shared section-level fields
Recommended option-level fields:
- `inspiration_social_name`
- `inspiration_social_category`
- `inspiration_social_avatar_svg`
### Fallback logic
A practical fallback is:
- if `inspiration_gallery` has images, use those in the modal
- if not, fall back to the featured image
---
## Mobile Reading Experience
This version specifically improves the mobile reading experience for longer post content.
### What changed
On mobile:
- the modal becomes almost full-screen
- the media area gets a controlled fixed height
- the content column becomes flexible
- the **text content region becomes the main scrollable area**
- the rest of the layout stays stable
### Why this matters
If long content is placed inside a modal without layout control, mobile users can run into awkward nested scrolling.
This version avoids that by keeping the structure clearer:
- image area on top
- profile header below it
- long caption / text area as the main scroll region
That feels closer to an app-style reading experience and works better for long captions or article-like content.
---
## Why This JS Structure Works Better for WordPress
In many front-end demos, JavaScript renders the entire card list from a hardcoded array.
That is fine for a prototype, but it is not ideal for a real WordPress homepage.
In this version:
- **PHP renders the list cards directly**
- **PHP outputs one shared profile JSON block**
- **PHP outputs one posts JSON dataset for modal details**
- **JS only controls slider behavior, modal population, and content scrolling**
That separation makes the codebase easier to maintain because:
- template logic stays in PHP
- interaction logic stays in JS
- post quantity can be changed in `WP_Query`
- the homepage can show only the exact number of cards you want
- the modal can still contain multiple images and richer text data
---
## Example Homepage Query Logic
The included example uses a custom post type such as:
- `inspiration_post`
And a fixed homepage limit like:
```php
$posts_limit = 8;
```
This is useful because the homepage section usually does **not** need pagination or load more behavior.
You control the number of posts with `posts_per_page` and let the outer Swiper handle the horizontal browsing experience.
---
## WordPress Integration Notes
### 1. Register a custom post type
Example included in:
```bash
wp-examples/register-cpt-example.php
```
Suggested CPT:
- `inspiration_post`
### 2. Output the homepage section via PHP loop
Example included in:
```bash
wp-examples/home-section-loop.php
```
### 3. Store modal images in a custom gallery field
Recommended field name:
- `inspiration_gallery`
This works especially well with ACF Gallery, but you can adapt it to any custom field solution.
### 4. Store shared account data once
Recommended option fields:
- `inspiration_social_name`
- `inspiration_social_category`
- `inspiration_social_avatar_svg`
### 5. Output JSON blocks after the loop
At the end of the loop, encode:
- one shared profile object to `#igProfileData`
- one posts array to `#igPostsData`
### 6. Keep JS focused on interaction
Do not use JS to rebuild the homepage card list.
Use JS only for:
- outer slider initialization
- JSON parsing
- click handling
- modal population
- modal slider initialization
- resetting scroll position for repeated modal opens
---
## Suggested Data Schema
### Shared profile object
```json
{
"socialName": "evodek_company",
"category": "Outdoor Living",
"socialAvatarSvgUrl": "assets/images/brand-avatar.svg"
}
```
### Post object
```json
{
"id": "123",
"title": "Sample Post Title",
"lead": "Short lead text",
"date": "April 12, 2026",
"images": ["image-1.jpg", "image-2.jpg"],
"tags": ["#composite decking", "#outdoor design"],
"content": ["Paragraph 1", "Paragraph 2"]
}
```
---
## How to Use
### Static HTML version
1. Download or clone the project
2. Keep CSS, JS, and image paths unchanged
3. Open `index.html` in your browser
### WordPress version
1. Register the custom post type
2. Create posts for the inspiration section
3. Set a featured image for each post
4. Add a custom gallery for modal images
5. Store the shared profile fields once in theme options or ACF Options
6. Output the loop in your homepage template or a template part
7. Output the JSON data blocks after the loop
8. Enqueue or localize the assets in your theme as needed
---
## Customization Ideas
You can easily extend this project with:
- custom taxonomy filters
- category badges
- Instagram handle links
- real avatar images instead of initials
- post permalinks
- lazy loading improvements
- animation refinements
- ACF repeater or gallery enhancements
- theme option controls for homepage post count
---
## Notes for Theme Development
When integrating into a WordPress theme, it is recommended to:
- move the homepage section into a template part
- keep the query arguments configurable
- sanitize all output with WordPress escaping functions
- use `wp_json_encode()` for the modal datasets
- keep the modal markup outside the loop
- keep class names stable so the JavaScript remains reusable
A recommended structure is:
```bash
your-theme/
├── front-page.php
├── functions.php
├── template-parts/
│ └── home-inspiration-section.php
└── assets/
├── css/
└── js/
```
---
## License
This project can be released under the MIT License or another permissive open-source license depending on your preference.