A way to insert two images side by side or stacked with optional overlay text using Gutenberg.
Clone or download
Latest commit 6362622 Jan 2, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src More tweaks Jan 2, 2019
.babelrc Git and Babel config files Dec 31, 2018
.editorconfig First commit Aug 30, 2018
.eslintignore First commit Aug 30, 2018
.eslintrc.json First commit Aug 30, 2018
.gitattributes Git and Babel config files Dec 31, 2018
.gitignore Git and Babel config files Dec 31, 2018
CHANGELOG.md More tweaks Jan 2, 2019
LICENSE First commit Aug 30, 2018
README.md Updated description Dec 31, 2018
demo.gif Updated screenshot with a Gif demonstrating the block. Sep 13, 2018
double-image.php v1.1.0 Dec 31, 2018
gulpfile.js Minor edit corrections Dec 31, 2018
package-lock.json v1.1.0 Dec 31, 2018
package.json v1.1.0 Dec 31, 2018


Double Image, a Gutenberg Block

License GitHub forks

Insert two images side by side or stacked with optional overlay text.

Double Image Demo

Overview 🔔

Double Image provides 4 image layout options. "Narrow | Wide", "Wide | Narror", "Even" and "Stacked". The first two are ratio layouts. "Even" provides the same size images with no spacing in between and Stacked sets each image full width on top of one another.

Each image has it's own set of settings. You have the option to change the text overlay position, the text colour, the background opacity and set the block to a fixed background for a paralex effect. You don't have to set a text overlay so you can switch it off or leave it on with no text to use the background opacity.

The second image does not show the overlay by default. The default image layout is "Narrow | Wide". There are controls for each image to change or remove the image.

You can also set the alignment to Wide Width, Full width or Center.

The choice is up to you and I hope you like it.

Is This Free?

Yes, it's free. But here's what you should really care about:

  • The code adheres to the WordPress Coding Standards and follows best practices and conventions.
  • This is my first Gutenberg block.


To use this plugin you will need:

  • PHP v5.6+ (Recommend PHP v7.0+)
  • WordPress v4.9+
  • Gutenberg v4.7+

Installation 💽

  1. Download a .zip file with the latest version.
  2. Go to WordPress Admin > Plugins > Add New.
  3. Click Upload Plugin at the top.
  4. Choose File and select the .zip file you downloaded in Step 1.
  5. 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 and I will do my best to help you out.


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. It's pretty clear that software actually costs something, and even though it may be offered freely, somebody is paying the cost.

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 repo! This helps the project getting known and grow with the community. 🙏

If you want to do a one-time donation, you can donate to:

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 gulp build gulp task to process build files and generate a zip.


Double Image is released under GNU General Public License v3.0.


Double Image is developed and maintained by Sébastien Dumont.