https://github.com/seb86/double-image
A custom block designed to insert two images side by side or stacked with optional overlay text.
https://github.com/seb86/double-image
gutenberg gutenberg-blocks gutenberg-plugin
Last synced: 9 months ago
JSON representation
A custom block designed to insert two images side by side or stacked with optional overlay text.
- Host: GitHub
- URL: https://github.com/seb86/double-image
- Owner: seb86
- License: gpl-3.0
- Created: 2018-08-28T15:01:25.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-02-21T18:02:28.000Z (over 7 years ago)
- Last Synced: 2025-10-13T20:03:43.211Z (9 months ago)
- Topics: gutenberg, gutenberg-blocks, gutenberg-plugin
- Language: JavaScript
- Homepage: https://wordpress.org/plugins/double-image/
- Size: 6.63 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Double Image for Gutenberg
[](https://wordpress.org/plugins/double-image/)
[](https://wordpress.org/plugins/double-image/)
[](https://wordpress.org/plugins/double-image/)
[](https://wordpress.org/plugins/double-image/)
[](https://github.com/seb86/double-image/blob/master/license.txt)
[](https://github.com/seb86/double-image/network)
**Contributors:** sebd86
**Donate link:** https://sebdumont.xyz/donate/
**Tags:** blocks, gutenberg, gallery, page builder, gutenberg blocks, editor, photo gallery
**Requires at least:** 4.9
**Requires PHP:** 5.6
**Tested up to:** 5.0.3
**Stable tag:** 1.2.1
**License:** GPL v2 or later
A custom block designed to insert two images side by side or stacked with optional overlay text.
## 🔔 Overview
Double Image is designed for the Gutenberg editor. This custom block design allows you to display two images side by side or stacked.
Images can be either selected via the media library or simply drag and drop an image to either drop zones.
Apply an overlay with or without a background color and adjust the opacity of the background.
Text can be added on either image at the top or bottom.
## 💻 Screenshots
## How to Use
Any 3 of these keywords will narrow down the blocks when looking for Double Image to add.
* image
* overlay
* double
You can also add the block by typing `:doubleimage` and then press the spacebar.
Both placeholders are drop zones so if you don't have the images already in your media library you can drag and drop an image. When the image is dropped you will see the image in the background and indicator showing it is currently uploading. When it is finished uploading the indicator will disappear.
To select an image from the media library, simply select the first or second placeholder to set an image.
Once an image is set you can then play around with the block settings.
### Block Settings
When the block is selected you have the option to change the following:
#### Image Layouts
1. `Narrow | Wide`
2. `Wide | Narror`
3. `Even`
4. `Stacked`
The first two are ratio layouts. 38% : 60% and vise versa. `Even` provides the same size images with no spacing in between. `Stacked` sets each image full width on top of one another.
Each image has the same options.
* Fixed Background (Enable to have a parallax scrolling effect.)
* Show Overlay (Enable to add a text overlay.)
The remaining block options do not show unless "Show Overlay" is enabled for either image.
* Background Color
* Background Opacity
* Text Color.
* Text Position.
#### Toolbar
The toolbar provides buttons for each image to change or remove the image. You can also set the alignment to `Wide Width`, `Full width` or `Center`.
#### Default Block Settings
* The default image layout is `Narrow | Wide`.
* For the first image, the overlay is enabled and the text overlay position is set to the top.
* For the second image, the overlay is not enabled. When the overlay is enabled, the text overlay position is set to the bottom.
### Is This Free?
Yes, it's free. But here's what you should _really_ care about:
* The code adheres to the [WordPress Coding Standards](https://codex.wordpress.org/WordPress_Coding_Standards) and follows best practices and conventions.
* This is my first Gutenberg block.
#### Requirements ✅
To use this plugin you will need:
* PHP v5.6+ (Recommend PHP v7.0+)
* WordPress v4.9 and [Gutenberg](https://wordpress.org/plugins/gutenberg/) or
* WordPress v5.0+
#### Installation 💽
1. If you are not running WordPress 5.0+, install [Gutenberg](https://wordpress.org/plugins/gutenberg/) plugin.
2. [Download the latest release of Double Image](https://github.com/seb86/double-image/releases) from the GitHub repository, or..
3. Go to **WordPress Admin > Plugins > Add New**.
4. Click **Upload Plugin** at the top.
5. **Choose File** and select the `.zip` file you downloaded in **Step 1**.
6. Click **Install Now** and **Activate** the plugin.
#### Reporting Issues 📝
If you think you have found a bug in the plugin or want to see a new feature added, please [open a new issue](https://github.com/seb86/double-image/issues/new) and I will do my best to help you out.
## Support
Need help? This is a developer's portal for Double Image and should not be used for general support and queries. Please reach visit the [Double Image support forum on WordPress.org](https://wordpress.org/support/plugin/double-image/).
## Contribute
If you or your company use Double Image or appreciate the work I’m doing in open source, please consider supporting me directly so I can continue maintaining it and keep evolving the project.
You'll be helping to ensure I can spend the time not just fixing bugs, adding features, releasing new versions, but also keeping the project afloat. Any contribution you make is a big help and is greatly appreciated.
Please also consider starring ✨ and sharing 👍 the project repo! This helps the project getting known and grow with the community. 🙏
I accept one-time donations and monthly via [BuyMeACoffee.com](https://www.buymeacoffee.com/sebastien)
- [My PayPal](https://www.paypal.me/codebreaker)
- [BuyMeACoffee.com](https://www.buymeacoffee.com/sebastien)
- Bitcoin (BTC): `3L4cU7VJsXBFckstfJdP2moaNhTHzVDkKQ`
- Ethereum (ETH): `0xc6a3C18cf11f5307bFa11F8BCBD51F355b6431cB`
- Litecoin (LTC): `MNNy3xBK8sM8t1YUA2iAwdi9wRvZp9yRoi`
Thank you for your support! 🙌
## Development 💻
1. Clone the GitHub repository: `https://github.com/seb86/double-image.git`
2. Browse to the folder in the command line.
3. Run the `npm install` command to install the plugin's dependencies within a /node_modules/ folder.
4. Run the `npm start` command for development.
5. Run the `build` gulp task to process build files and generate a zip.
---
##### License
Double Image is released under [GNU General Public License v3.0](http://www.gnu.org/licenses/gpl-3.0.html).
##### Credits
Double Image is developed and maintained by [Sébastien Dumont](https://sebastiendumont.com/about/).
---
