makfak supports this item


Popular questions for this item

How do I create a gallery?

If you’re used standard WP galleries:
  1. edit or create a post
  2. click the “Add Media” icon (above the text editor)
  3. upload the images that you want to appear in your gallery
  4. if you edited any of the info about your images – click “Save All Changes”
  5. close the “Add media” window
  6. add [photomosaic] to your post and your gallery will appear in that spot
If you’re using NextGen Galleries:
  1. go to Gallery > Add Gallery / Images
  2. select the “Add new gallery” tab
  3. create your gallery
  4. select the “Upload Images” tab (if you weren’t taken there automatically)
  5. select the images you want to upload and the select the gallery you want them added to
  6. go to Gallery > Manage Gallery and note the ID of your new gallery
  7. go to the post where you want to insert your gallery and add [photomosaic nggid="*"] (replacing the * with your gallery’s ID)

How do I put multiple mosaics on the same page (without using NextGen)?

Simply point PhotoMosaic at another post that has attached images:

[photomosaic id="1"]
[photomosaic id="2"]
[photomosaic id="3"]

If you’re running WPv3.5 you can use the Create Gallery flow to create a list of IDS that you can then give to PhotoMosaic:

-- Create Gallery generates this --
[gallery ids="1,2,3,4,5,6"]

-- replace 'gallery' with 'photomosaic' --
[photomosaic ids="1,2,3,4,5,6"]

You can do this as many times as you like on any page.

How do I reprocess my thumbnails?

If you’re using NextGen…

  1. go to the Options page (Gallery > Options)
  2. select the Thumbnails tab (at top of the page)
  3. I found these settings worked great:
  • Width x Height : 300×300
  • Set Fixed Dimension : unchecked
  • Thumbnail Quality : 100

If you’re using Wordpress’s Galleries…

  1. go to Settings > Media and adjust your Image Sizes (PhotoMosaic uses the Medium image size)
  2. I found these settings worked great:
  • 150×150 (checked)
  • 300×300 <—this is the only size PhotoMosaic uses
  • 1024×1024

Once you’ve changed your settings, you need to get WP to make new images. I recommend a plugin called “Regenerate Thumbnails”. It adds “Regenerate Thumbnails” options to the Media Library and creates a new Tool. It automatically regenerates images for every size (not just thumbnails).

How, in the mosaic, do I show the image caption on hover?

This can be accomplished by making two changes to the settings in your PhotoMosaic Admin > Global Settings.

Set onReady Callback to…

function($, $mosaic, $items){
    $items.each(function () {
        var $a = $(this);
        var $img = $a.find('img');
        var $caption_wrapper = $('<div class="photomosaic-caption-wrapper" />');
        var $caption = $('<div class="photomosaic-caption" />');
        $caption.text( $img.attr('title') );

Set Custom CSS to…

.photomosaic-item .photomosaic-caption-wrapper {
    position: relative;
    display: table;
    padding: 0.5em;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: all 0.3s linear 0s;
    transform-origin: center center;

.photomosaic-item .photomosaic-caption {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);

.photomosaic-item:hover .photomosaic-caption-wrapper {
    opacity: 1;

.photoMosaic .photomosaic-item:hover img {
    opacity: 1;

That should get you up and running. You can, of course, tweak the caption CSS to your liking.

Show more

Contact the author

This author provides limited support for this item through this item's comments.

Item support includes:

  • Availability of the author to answer questions
  • Answering technical questions about item’s features
  • Assistance with reported bugs and issues
  • Help with included 3rd party assets

However, item support does not include:

  • Customization services
  • Installation services

View the item support policy