A double image Gutenberg block with optional overlay text.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.editorconfig
.eslintignore
.eslintrc.json
.gitignore
LICENSE
README.md
demo.gif
double-image.php
gulpfile.js
package.json

README.md

Double Image, a Gutenberg Block

License GitHub forks

Allows you to add two images side by side with optional overlay text.

Double Image Demo

Overview 🔔

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.

Requirements

To use this plugin you will need:

  • PHP v5.6+ (Recommend PHP v7.0+)
  • WordPress v4.9+
  • Gutenberg v3.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.

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. 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.

License

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

Credits

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