{"id":29893064,"url":"https://github.com/mnestorov/polaroid-generator","last_synced_at":"2026-05-17T02:09:01.088Z","repository":{"id":301956665,"uuid":"1010775006","full_name":"mnestorov/polaroid-generator","owner":"mnestorov","description":"A modern WordPress block plugin that creates beautiful polaroid-style photo galleries with dynamic loading animations and customizable captions.","archived":false,"fork":false,"pushed_at":"2025-06-29T19:48:36.000Z","size":207,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-10T03:34:09.448Z","etag":null,"topics":["gutenberg-blocks","gutenberg-plugin","wordpress","wordpress-block"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-2.1","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mnestorov.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2025-06-29T19:21:02.000Z","updated_at":"2025-06-29T19:45:03.000Z","dependencies_parsed_at":"2025-06-29T20:30:35.122Z","dependency_job_id":"5aee5db4-ee44-4c40-a608-903b8f2ecaa1","html_url":"https://github.com/mnestorov/polaroid-generator","commit_stats":null,"previous_names":["mnestorov/polaroid-generator"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/mnestorov/polaroid-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mnestorov%2Fpolaroid-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mnestorov%2Fpolaroid-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mnestorov%2Fpolaroid-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mnestorov%2Fpolaroid-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mnestorov","download_url":"https://codeload.github.com/mnestorov/polaroid-generator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mnestorov%2Fpolaroid-generator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33125184,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-16T18:38:32.183Z","status":"online","status_checked_at":"2026-05-17T02:00:05.366Z","response_time":107,"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":["gutenberg-blocks","gutenberg-plugin","wordpress","wordpress-block"],"created_at":"2025-08-01T02:32:52.597Z","updated_at":"2026-05-17T02:09:01.033Z","avatar_url":"https://github.com/mnestorov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Polaroid Generator - WordPress Block Plugin\n\nA modern WordPress block plugin that creates beautiful polaroid-style photo galleries with dynamic loading animations and customizable captions.\n\n![WordPress](https://img.shields.io/badge/WordPress-6.5+-blue.svg)\n![License](https://img.shields.io/badge/License-GPL%20v2%2B-green.svg)\n![Version](https://img.shields.io/badge/Version-1.0.0-orange.svg)\n\n## 🎯 Features\n\n- **Polaroid-Style Design**: Authentic polaroid photo frames with realistic shadows and borders\n- **Dynamic Photo Count**: Adjustable number of photos (3-12) via block controls\n- **Loading Animations**: Smooth fade-in effects with loading spinners\n- **Captions**: Automatic captions that appear after images load\n- **Responsive Design**: Works perfectly on all device sizes\n- **Hover Effects**: Subtle scaling and opacity changes on hover\n- **External Image Integration**: Uses Picsum Photos for demo images\n- **Modern Development**: Built with WordPress block development tools\n\n## 🚀 Quick Start\n\n### Installation\n\n1. **Download the plugin**:\n   ```bash\n   git clone https://github.com/mnestorov/polaroid-generator.git\n   ```\n\n2. **Install dependencies**:\n   ```bash\n   cd polaroid-generator\n   npm install\n   ```\n\n3. **Build the plugin**:\n   ```bash\n   npm run build\n   ```\n\n4. **Install in WordPress**:\n   - Upload the plugin folder to `/wp-content/plugins/`\n   - Activate the plugin in WordPress admin\n   - Or install via WordPress plugin screen\n\n### Usage\n\n1. **Add the block** in the WordPress editor\n2. **Adjust photo count** using the block controls (3-12 photos)\n3. **Preview** your polaroid gallery\n4. **Publish** and enjoy!\n\n## 🛠️ Development\n\n### Prerequisites\n\n- Node.js (v16 or higher)\n- npm or yarn\n- WordPress 6.5+\n\n### Development Commands\n\n```bash\n# Install dependencies\nnpm install\n\n# Start development mode with hot reload\nnpm start\n\n# Build for production\nnpm run build\n\n# Build with webpack copy PHP\nnpm run build -- --webpack-copy-php\n\n# Format code\nnpm run format\n\n# Lint code\nnpm run lint:js\nnpm run lint:style\nnpm run lint:php\n\n# Run all linters\nnpm run lint\n```\n\n### Project Structure\n\n```\npolaroid-generator/\n├── src/\n│   └── polaroid-generator/\n│       ├── block.json          # Block configuration\n│       ├── edit.js             # Editor component\n│       ├── editor.scss         # Editor styles\n│       ├── index.js            # Main entry point\n│       ├── render.php          # Server-side rendering\n│       ├── style.scss          # Frontend styles\n│       └── view.js             # Frontend JavaScript\n├── build/                      # Compiled assets\n├── polaroid-generator.php      # Main plugin file\n└── package.json               # Dependencies and scripts\n```\n\n## 🎨 Customization\n\n### Styling\n\nThe plugin uses SCSS for styling. Key style files:\n\n- `src/polaroid-generator/style.scss` - Frontend and editor styles\n- `src/polaroid-generator/editor.scss` - Editor-only styles\n\n### Customizing Polaroid Appearance\n\n```scss\n.wp-block-create-block-polaroid-generator {\n  .polaroids {\n    .polaroid {\n      // Customize polaroid frame\n      border: 1px solid #000;\n      border-radius: 2px;\n      padding: 10px;\n      background-color: #fff;\n      \n      // Customize image effects\n      img {\n        transition: opacity 0.5s ease-in-out;\n        \n        \u0026.loaded {\n          opacity: 0.8;\n          \n          \u0026:hover {\n            opacity: 1;\n            transform: scale(1.02);\n          }\n        }\n      }\n      \n      // Customize captions\n      .caption {\n        font-family: 'Courier New', monospace;\n        font-size: 14px;\n        color: #333;\n        text-align: center;\n      }\n    }\n  }\n}\n```\n\n### Adding Custom Images\n\nTo use your own images instead of Picsum Photos:\n\n1. **Update render.php**:\n   ```php\n   \u003cimg \n     src=\"\u003c?php echo esc_url( your_custom_image_url( $i ) ); ?\u003e\"\n     alt=\"\u003c?php echo esc_attr( sprintf( 'Photo %d', $i ) ); ?\u003e\"\n     width=\"200\"\n     height=\"150\"\n     loading=\"lazy\"\n   /\u003e\n   ```\n\n2. **Update edit.js**:\n   ```javascript\n   \u003cimg \n     src={yourCustomImageUrl(i)}\n     width=\"200\"\n     height=\"150\"\n     loading=\"lazy\"\n     alt={`Photo ${ i + 1 }`}\n   /\u003e\n   ```\n\n## 🔧 Block Attributes\n\n| Attribute | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `photos` | number | 6 | Number of photos to display (3-12) |\n\n## 🎭 Block Controls\n\nThe block includes an inspector control panel with:\n\n- **Range Control**: Adjust photo count from 3 to 12\n- **Real-time Preview**: See changes immediately in the editor\n\n## 📱 Responsive Design\n\nThe polaroid gallery is fully responsive:\n\n- **Desktop**: Full polaroid layout with hover effects\n- **Tablet**: Optimized spacing and sizing\n- **Mobile**: Stacked layout for better mobile experience\n\n## 🎨 CSS Classes\n\nKey CSS classes for customization:\n\n- `.wp-block-create-block-polaroid-generator` - Main block wrapper\n- `.polaroids` - Container for all polaroids\n- `.polaroid` - Individual polaroid frame\n- `.caption` - Photo caption text\n- `.loader` - Loading spinner\n- `.loaded` - Applied when images finish loading\n\n## 🚀 Performance\n\n- **Lazy Loading**: Images load only when needed\n- **Optimized Assets**: Minified CSS and JavaScript\n- **Efficient Rendering**: Server-side rendering for better performance\n- **Caching Friendly**: Compatible with WordPress caching plugins\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature/amazing-feature`\n3. Commit your changes: `git commit -m 'Add amazing feature'`\n4. Push to the branch: `git push origin feature/amazing-feature`\n5. Open a Pull Request\n\n### Development Guidelines\n\n- Follow WordPress coding standards\n- Test on multiple WordPress versions\n- Ensure responsive design works\n- Update documentation for new features\n\n## 📄 License\n\nThis project is licensed under the GPL v2 or later - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- Built with [@wordpress/create-block](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/)\n- Uses [Picsum Photos](https://picsum.photos/) for demo images\n- Inspired by classic polaroid photography\n\n## 📞 Support\n\n- **Issues**: [GitHub Issues](https://github.com/mnestorov/polaroid-generator/issues)\n- **Documentation**: [WordPress Developer Handbook](https://developer.wordpress.org/block-editor/)\n- **Author**: [Martin Nestorov](https://github.com/mnestorov)\n\n---\n\n**Made with ❤️ for the WordPress community** ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmnestorov%2Fpolaroid-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmnestorov%2Fpolaroid-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmnestorov%2Fpolaroid-generator/lists"}