Double Image, a Gutenberg Block
Allows you to add two images side by side with optional overlay text.
Double Image provides 4 image layout options. "1-4", "4-1", "Even" and "Full Stack". The first two are ratio layouts. "Even" provides the same size images with no spacing in between and Full Stack 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 "1-4". 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 v3.7+
- Download a
.zipfile with the latest version.
- Go to WordPress Admin > Plugins > Add New.
- Click Upload Plugin at the top.
- Choose File and select the
.zipfile you downloaded in Step 1.
- Click Install Now and Activate the plugin.
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
If you want to do a one-time donation, you can donate to:
Thank you for your support!
- Clone the GitHub repository:
- Browse to the folder in the command line.
- Run the
npm installcommand to install the plugin's dependencies within a /node_modules/ folder.
- Run the
npm startcommand for development.
- Run the
gulp buildgulp 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.