| WordPress

How to Create Image Collages in WordPress

The Easy Image Collage plugin for WordPress allows you to create image collages within your WordPress site and use them everywhere, either on a post, page, or custom post type. 

The plugin is compatible with both the Classic WP Editor and the Gutenberg Editor. Furthermore, it is possible to embed unlimited collages to any post or page, drag the images to accommodate them within their spot in the collage, and to add a Pinterest button to share the collage. 

In this tutorial, we will explain the functioning of this module. Let’s get started!


Step #1. Install the Required Plugin

  • Click Plugins > Add new

    Click Plugins - WordPress Easy Image Collage

 

  • Type "Easy Image Collage" in the search box 
  • Click Install now
  • Click Activate

Add Plugin - Easy Image Collage

  

  • Click Add new again
  • Search for “Lightbox”
  • Look for the Simple Lightbox Plugin
  • Click Install now
  • Click Activate

Install Now - Easy Image Collage

 


Step #2. The Easy Image Collage Settings

  • Under the Easy Image Collage Plugin, click Settings

The configuration options are arranged into 7 categories, organized through vertical tabs. The categories Captions and Custom links are only available to users of the premium version of the plugin. Let’s take a look at the others one by one.

190925 easy image collage 004

 

Default style

You can configure the alignment, width, ratio, and border of the collage grid here. Leave the Display method with the default value of Actual images. The “legacy mode” is there, in case that you want your images to be compliant with older browsers. 

  • Set the width of the grid to 1000px
  • Change the ratio to 1.78
  • Decrease the width of the borders to 2px
  • Change the color of the border

190925 easy image collage 005


1.78 is the result of dividing 16 by 9. Therefore 1.78 is just another way of representing the aspect ratio of a widescreen.

Lightbox

  • Click the Lightbox vertical tab
  • Enable Clickable images
  • Leave Open in new tab disabled

190925 easy image collage 006


Social Media

  • Click the Social media vertical tab
  • Enable Pinterest on hover
  • Change the Button location
  • Change the Button style
  • Leave the default Button size and Description

190925 easy image collage 007

 

Custom Code

The Custom Code section allows you to embed additional CSS code, in case you would have added a CSS class to the Lightbox link in the Lightbox section, for example. However, it is always recommended to keep your styles organized in stylesheet files.

190925 easy image collage 008

 

Utility

The Utility section allows you to export/import configuration options in a .json file, and import it in another site. 

The code generates when clicking the Export button. 

There is also a reset button at the bottom (do not click it), in case you want to restore all configuration options to their default values. 

  • Click Export
  • You can copy this code and paste it into the Import text area of other sites

190925 easy image collage 009

 

  • Scroll down
  • Click Save changes

A green checkmark should appear on the screen. 


Step #3. - Create a Post

  • Click Posts > Add new
  • Add a title
  • Click the + symbol to add a block
  • Under Layout elements, select Easy Image Collage
  • Click Create new Image Collage

easy image collage

 

  • Select the layout of your liking

easy image collage

 

You will be presented to the layout you selected with grey areas. When hovering on each of these areas, a blue button appears. You can click this button to insert images. 

  • Add images to the collage by clicking the blue button

You can drag the images to find the best possible angle of them inside the grid areas. 

  • Click Finish on the top right of the modal window
  • Click Publish two times
  • Click View post

easy image collage - ostraining.com

 

When hovering over an image, you will see the round Pinterest button on the top right corner of each image.

When clicking, a very basic lightbox behavior will be shown. You can install a more advanced lightbox plugin to achieve more sophisticated results. 

190925 easy image collage 013


The Easy Image Collage plugin for WordPress lets you insert neat image collages into posts and pages of your WordPress site. The plugin can be enhanced through a Lightbox plugin.

Please, leave us your questions and comments below.

Thanks for reading!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.