--- title: "Mosaic PRO Gallery Layout" id: "197797" type: "knowledgebase" slug: "mosaic-pro-gallery-layout" published_at: "2026-11-04T17:47:55+00:00" modified_at: "2026-11-04T17:47:55+00:00" url: "https://fooplugins.com/documentation/foogallery/pro-starter/mosaic-pro-gallery-layout/" markdown_url: "https://fooplugins.com/documentation/foogallery/pro-starter/mosaic-pro-gallery-layout.md" excerpt: "Create a Mosaic gallery with varied tiles, favourite images, density and mobile settings in FooGallery PRO Starter or higher." taxonomy_knowledgebase_cat: - "FooGallery PRO Starter" --- [FooGallery PRO Starter](https://fooplugins.com/documentation/foogallery/pro-starter/) # Mosaic PRO Gallery Layout ## Related Articles - [Polaroid Pro Gallery Template](https://fooplugins.com/documentation/foogallery/pro-starter/polaroid-pro-gallery-template/) - [Grid Pro Gallery Layout](https://fooplugins.com/documentation/foogallery/pro-starter/grid-pro-gallery-template/) - [Slider Pro Gallery Layout](https://fooplugins.com/documentation/foogallery/pro-starter/slider-pro-gallery-template/) - [Adding Thumbnail Effects](https://fooplugins.com/documentation/foogallery/pro-starter/adding-thumbnail-effects/) - [Hover Effect Presets](https://fooplugins.com/documentation/foogallery/pro-starter/hover-effect-presets/) - [Dominant Color and Color Sorting](https://fooplugins.com/documentation/foogallery/pro-starter/dominant-color-sorting/) - [Using Mobile Gallery Settings](https://fooplugins.com/documentation/foogallery/pro-starter/mobile-gallery-settings/) - [Wall PRO Gallery Layout](https://fooplugins.com/documentation/foogallery/pro-starter/wall-pro-gallery-layout/) **Need more help?** Browse all documentation or open a support ticket. [All docs](/documentation/) [Support](/support/) Mosaic PRO arranges a collection in varied tiles. Use it for mixed portrait and landscape photos, then mark favourites to influence which images receive more space. [Compare the two live Mosaic demos](/foogallery-wordpress-gallery-plugin/mosaic-gallery/) . **In this guide** - [Before you start](#before-you-start) - [Create a Mosaic gallery](#create) - [Choose tile sizes and spacing](#settings) - [Give favourite photos more space](#favorites) - [Adjust the phone layout](#mobile) - [Publish and check your gallery](#embed) - [Troubleshooting](#troubleshooting) - [Related layouts and next steps](#next) ## Before you start Mosaic PRO is included in **FooGallery PRO Starter, Expert and Commerce**, starting with FooGallery 3.3.20. It is not part of FooGallery Free. Install and activate a supported PRO version and licence, then open **FooGallery > Galleries** in WordPress. [Compare the plans](/foogallery-wordpress-gallery-plugin/compare-plans/) if you also need video, filtering or selling tools. ## Create a Mosaic gallery 1. Choose **Add Gallery**, give the gallery a descriptive title and add photos from the Media Library or upload new images. 2. Choose **Mosaic PRO** in the layout selector above Gallery Settings. 3. In **General**, start with Medium **Tile Density** and a small **Thumbnail Gap**. Preview the collection before changing several settings at once. 4. Save or update the gallery. The gallery block or shortcode on an existing page will continue to use the same gallery. ## Choose tile sizes and spacing ![Mosaic PRO General settings showing standard tile width, density, gap and favourites](/wp-content/uploads/2026/11/mosaic-settings.jpg) Mosaic General settings in the current editor. Your saved values may differ from this example. | Setting | What to choose | | --- | --- | | Standard Tile Width | Sets the approximate width of a standard tile. The current editor generates thumbnails at twice this width to keep larger tiles sharp, while preserving image proportions. Earlier versions label this control Thumbnail Width. | | Tile Density | Low makes a more spacious arrangement with larger tiles; High fits more images into the available space. Start with Medium and compare the result. | | Thumbnail Gap | Sets the space between tiles. Use enough room to separate images without making a small gallery feel fragmented. | | Thumbnail Link and Lightbox | Choose Full Size Image and a supported lightbox when visitors should open and browse the full photos. A Custom URL or Not linked changes that click behaviour. | ## Give favourite photos more space Use the stars on images in the gallery editor to mark favourites. These are your layout choices for this gallery; visitors do not need to vote or make selections. - **Automatic + favorites:** the layout can choose prominent tiles as well as favouring your selected images. - **Favorites only:** limits the preference for larger tiles to the images you starred. A favourite is a layout preference, not a fixed tile size or position. Image proportions, available width and the rest of the collection affect what fits. Preview both portrait and landscape images, and avoid starring so many photos that nothing stands out. ## Adjust the phone layout Switch to the mobile preview in the gallery editor. Mosaic supports separate mobile **Tile Density** and **Thumbnail Gap** values. Keep the inherited desktop value where it already works, and change the phone value only where needed. See [Using Mobile Gallery Settings](/documentation/foogallery/pro-starter/mobile-gallery-settings/) for the shared workflow. ## Publish and check your gallery 1. Save the gallery, then edit the page or post where it should appear. 2. Insert a **FooGallery** block and select your gallery, or paste the generated gallery shortcode into a core **Shortcode** block. 3. Preview the public page at desktop and phone widths. Open a photo and check the lightbox, captions and navigation. 4. If you enable filtering or advanced pagination, check that your plan includes those features. Mosaic starts with Starter; filtering requires Expert or Commerce. ## Troubleshooting - **A favourite stays small:** try a different density or gallery width and check the photo proportions. A star cannot force a particular size when the tile would not fit. - **Large tiles look soft:** check Standard Tile Width (or Thumbnail Width in older versions), the original image dimensions and WordPress thumbnail generation. Avoid enlarging a small original. - **A caption is difficult to read:** shorten the thumbnail text and check its hover/caption settings on a real phone. Full-size image captions can carry more detail in the lightbox. - **A photo does not open:** check Thumbnail Link and the chosen lightbox. For wider script conflicts, use the [gallery loading guide](/documentation/foogallery/troubleshooting-foogallery/gallery-loading-compatibility-settings/) . ## Related layouts and next steps Compare [Masonry columns](/foogallery-wordpress-gallery-plugin/masonry-gallery/) , [Justified rows](/foogallery-wordpress-gallery-plugin/justified-gallery/) and [Wall’s animated introduction](/foogallery-wordpress-gallery-plugin/wall-gallery/) . [Read the Wall setup guide](/documentation/foogallery/pro-starter/wall-pro-gallery-layout/) for background sections. Included in PRO Starter and higher ## Try Mosaic PRO with your own photos Explore the layout, then compare the plans for any additional features you need. [View the Mosaic demo](/foogallery-wordpress-gallery-plugin/mosaic-gallery/) [Compare plans](/foogallery-wordpress-gallery-plugin/compare-plans/) Resources ## Find the right next step Browse setup guides, get help with your site, or find licensing information. ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E) ### Documentation Search setup guides, product docs, and troubleshooting articles. [Browse docs](/documentation/) ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E) ### Support Open a ticket with product details so we can help quickly. [Get support](/support/) ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E) ### Licensing Review account, renewal, refund, and license information. [View details](/licensing/)