--- title: "WordPress Mosaic Gallery" id: "197758" type: "page" slug: "mosaic-gallery" published_at: "2026-11-04T14:49:09+00:00" modified_at: "2026-11-04T18:30:38+00:00" url: "https://fooplugins.com/foogallery-wordpress-gallery-plugin/mosaic-gallery/" markdown_url: "https://fooplugins.com/foogallery-wordpress-gallery-plugin/mosaic-gallery.md" excerpt: "Create a WordPress mosaic gallery with varied image tiles and larger favorites. Explore live Mosaic PRO demos and build your own with FooGallery." --- Included in PRO Starter # WordPress Mosaic Gallery Give your photos a varied tiled layout, with larger tiles for favorites and room for portraits and landscapes. Build a mosaic photo gallery with FooGallery PRO Starter. [Start Free Trial](/foogallery-wordpress-gallery-plugin/start-trial/) [Compare Plans](/foogallery-wordpress-gallery-plugin/compare-plans/) 7-day trial ยท 30-day guarantee ### Mosaic Gallery Demo: Larger Tiles for Favorite Photos Browse this mixed collection and select a photo to open the lightbox. Selected favorites can receive larger tiles where the available space and image proportions allow. Live demo [https://fooplugins.com/wp-content/uploads/2026/10/l-alpine-meadow.webp](https://fooplugins.com/wp-content/uploads/2026/10/l-alpine-meadow.webp) Alpine Meadow [https://fooplugins.com/wp-content/uploads/2026/10/w-fox.webp](https://fooplugins.com/wp-content/uploads/2026/10/w-fox.webp) Fox Cub [https://fooplugins.com/wp-content/uploads/2026/10/u-alex-holyoake.webp](https://fooplugins.com/wp-content/uploads/2026/10/u-alex-holyoake.webp) Sunglasses [https://fooplugins.com/wp-content/uploads/2026/10/m-dahlia.webp](https://fooplugins.com/wp-content/uploads/2026/10/m-dahlia.webp) Dahlia [https://fooplugins.com/wp-content/uploads/2026/10/l-rice-terraces.webp](https://fooplugins.com/wp-content/uploads/2026/10/l-rice-terraces.webp) Rice Terraces [https://fooplugins.com/wp-content/uploads/2026/10/w-hummingbird.webp](https://fooplugins.com/wp-content/uploads/2026/10/w-hummingbird.webp) Hummingbird [https://fooplugins.com/wp-content/uploads/2026/10/u-liana-de-laurent-de-laurent.webp](https://fooplugins.com/wp-content/uploads/2026/10/u-liana-de-laurent-de-laurent.webp) The Eye [https://fooplugins.com/wp-content/uploads/2026/10/m-dandelion.webp](https://fooplugins.com/wp-content/uploads/2026/10/m-dandelion.webp) Dewdrops [https://fooplugins.com/wp-content/uploads/2026/10/l-waterfall.webp](https://fooplugins.com/wp-content/uploads/2026/10/l-waterfall.webp) Hidden Falls [https://fooplugins.com/wp-content/uploads/2026/10/w-red-panda.webp](https://fooplugins.com/wp-content/uploads/2026/10/w-red-panda.webp) Red Panda [https://fooplugins.com/wp-content/uploads/2026/10/u-darius-bashar.webp](https://fooplugins.com/wp-content/uploads/2026/10/u-darius-bashar.webp) Garage Lion [https://fooplugins.com/wp-content/uploads/2026/10/m-fly_agaric.webp](https://fooplugins.com/wp-content/uploads/2026/10/m-fly_agaric.webp) Fly Agaric [https://fooplugins.com/wp-content/uploads/2026/10/l-snowy-peaks.webp](https://fooplugins.com/wp-content/uploads/2026/10/l-snowy-peaks.webp) Snowy Peaks [https://fooplugins.com/wp-content/uploads/2026/10/w-tiger.webp](https://fooplugins.com/wp-content/uploads/2026/10/w-tiger.webp) Tiger [https://fooplugins.com/wp-content/uploads/2026/10/u-mercedes-alvarez.webp](https://fooplugins.com/wp-content/uploads/2026/10/u-mercedes-alvarez.webp) Portrait Wall [https://fooplugins.com/wp-content/uploads/2026/10/m-bee.webp](https://fooplugins.com/wp-content/uploads/2026/10/m-bee.webp) Sunflower Bee [https://fooplugins.com/wp-content/uploads/2026/10/l-countryside.webp](https://fooplugins.com/wp-content/uploads/2026/10/l-countryside.webp) Golden Hour [https://fooplugins.com/wp-content/uploads/2026/10/w-kingfisher.webp](https://fooplugins.com/wp-content/uploads/2026/10/w-kingfisher.webp) Kingfisher [https://fooplugins.com/wp-content/uploads/2026/10/u-luis-alfonso-orellana.webp](https://fooplugins.com/wp-content/uploads/2026/10/u-luis-alfonso-orellana.webp) Orange Facade [https://fooplugins.com/wp-content/uploads/2026/10/m-lily.webp](https://fooplugins.com/wp-content/uploads/2026/10/m-lily.webp) Lily Device preview switcher available on desktop devices ### A More Compact Mosaic Image Gallery The same photos use High tile density and a narrower gap here. Compare the two layouts, then choose the balance that suits your own images. Live demo [https://fooplugins.com/wp-content/uploads/2026/10/l-alpine-meadow.webp](https://fooplugins.com/wp-content/uploads/2026/10/l-alpine-meadow.webp) Alpine Meadow [https://fooplugins.com/wp-content/uploads/2026/10/w-fox.webp](https://fooplugins.com/wp-content/uploads/2026/10/w-fox.webp) Fox Cub [https://fooplugins.com/wp-content/uploads/2026/10/u-alex-holyoake.webp](https://fooplugins.com/wp-content/uploads/2026/10/u-alex-holyoake.webp) Sunglasses [https://fooplugins.com/wp-content/uploads/2026/10/m-dahlia.webp](https://fooplugins.com/wp-content/uploads/2026/10/m-dahlia.webp) Dahlia [https://fooplugins.com/wp-content/uploads/2026/10/l-rice-terraces.webp](https://fooplugins.com/wp-content/uploads/2026/10/l-rice-terraces.webp) Rice Terraces [https://fooplugins.com/wp-content/uploads/2026/10/w-hummingbird.webp](https://fooplugins.com/wp-content/uploads/2026/10/w-hummingbird.webp) Hummingbird [https://fooplugins.com/wp-content/uploads/2026/10/u-liana-de-laurent-de-laurent.webp](https://fooplugins.com/wp-content/uploads/2026/10/u-liana-de-laurent-de-laurent.webp) The Eye [https://fooplugins.com/wp-content/uploads/2026/10/m-dandelion.webp](https://fooplugins.com/wp-content/uploads/2026/10/m-dandelion.webp) Dewdrops [https://fooplugins.com/wp-content/uploads/2026/10/l-waterfall.webp](https://fooplugins.com/wp-content/uploads/2026/10/l-waterfall.webp) Hidden Falls [https://fooplugins.com/wp-content/uploads/2026/10/w-red-panda.webp](https://fooplugins.com/wp-content/uploads/2026/10/w-red-panda.webp) Red Panda [https://fooplugins.com/wp-content/uploads/2026/10/u-darius-bashar.webp](https://fooplugins.com/wp-content/uploads/2026/10/u-darius-bashar.webp) Garage Lion [https://fooplugins.com/wp-content/uploads/2026/10/m-fly_agaric.webp](https://fooplugins.com/wp-content/uploads/2026/10/m-fly_agaric.webp) Fly Agaric [https://fooplugins.com/wp-content/uploads/2026/10/l-snowy-peaks.webp](https://fooplugins.com/wp-content/uploads/2026/10/l-snowy-peaks.webp) Snowy Peaks [https://fooplugins.com/wp-content/uploads/2026/10/w-tiger.webp](https://fooplugins.com/wp-content/uploads/2026/10/w-tiger.webp) Tiger [https://fooplugins.com/wp-content/uploads/2026/10/u-mercedes-alvarez.webp](https://fooplugins.com/wp-content/uploads/2026/10/u-mercedes-alvarez.webp) Portrait Wall [https://fooplugins.com/wp-content/uploads/2026/10/m-bee.webp](https://fooplugins.com/wp-content/uploads/2026/10/m-bee.webp) Sunflower Bee [https://fooplugins.com/wp-content/uploads/2026/10/l-countryside.webp](https://fooplugins.com/wp-content/uploads/2026/10/l-countryside.webp) Golden Hour [https://fooplugins.com/wp-content/uploads/2026/10/w-kingfisher.webp](https://fooplugins.com/wp-content/uploads/2026/10/w-kingfisher.webp) Kingfisher [https://fooplugins.com/wp-content/uploads/2026/10/u-luis-alfonso-orellana.webp](https://fooplugins.com/wp-content/uploads/2026/10/u-luis-alfonso-orellana.webp) Orange Facade [https://fooplugins.com/wp-content/uploads/2026/10/m-lily.webp](https://fooplugins.com/wp-content/uploads/2026/10/m-lily.webp) Lily Device preview switcher available on desktop devices Recreate this demo PRO Starter or higher ### Create this with your own images Use these settings as a starting point, then adapt the layout to your collection. 1. **Add your own photos**Create a FooGallery gallery and add a mix of portrait and landscape images from your Media Library. 2. **Choose Mosaic PRO**Select the Mosaic PRO layout. Set Tile Density to Medium and Thumbnail Gap to 10 for a starting point. 3. **Mark your favorites**Use the stars on gallery images to choose favorites. Favorites receive larger tiles when the space and proportions allow. 4. **Embed and check**Save the gallery and select it in a FooGallery block, or use its generated shortcode. Preview the page on desktop and phone. Settings used in this demo- Layout **Mosaic PRO** - Tile density **Medium / High** - Thumbnail gap **10 / 4** - Favorites **Automatic + favorites** - Lightbox **FooGallery** Tips and troubleshootingA favorite is a layout preference, not a fixed tile size. Compare Low, Medium and High density with your own photo proportions, and choose a thumbnail width large enough for your biggest tiles. The two examples show the layout without filtering or pagination. [Start Free Trial](/foogallery-wordpress-gallery-plugin/start-trial/) [Compare Features](/foogallery-wordpress-gallery-plugin/compare-plans/) [Read the Mosaic setup guide](/documentation/foogallery/pro-starter/mosaic-pro-gallery-layout/) or [view PRO Starter](/foogallery-wordpress-gallery-plugin/pro-starter/) . Who is this for? ## Build a photo story with more than equal-sized thumbnails. Choose Mosaic PRO for a WordPress tiled gallery with visual variety. It mixes tile sizes while keeping the collection together, so selected photos can stand out without a separate featured-image section. - **Photography portfolios**Mix portrait and landscape images in one collection and mark your strongest photos as favorites. - **Travel and editorial stories**Combine wide views and close-up details in a mosaic image gallery that adapts to the available width. - **Creative studios**Adjust tile density and gaps to create a compact project overview or a more spacious presentation. ## More FooGallery features Explore more ways to style your galleries and display your photos, with a working demo for each feature. ### Prefer an animated introduction? Mosaic is designed for browsing a tiled collection. If the photos should introduce your page through motion, compare the [Wall gallery demo](/foogallery-wordpress-gallery-plugin/wall-gallery/) and its inline or background placement options. [/foogallery-wordpress-gallery-plugin/polaroid-gallery/](/foogallery-wordpress-gallery-plugin/polaroid-gallery/) ### [Polaroid Layout](/foogallery-wordpress-gallery-plugin/polaroid-gallery/) A playful layout with thumbnails framed as Polaroid photos. [/foogallery-wordpress-gallery-plugin/post-query-gallery/](/foogallery-wordpress-gallery-plugin/post-query-gallery/) ### [Post Query Gallery](/foogallery-wordpress-gallery-plugin/post-query-gallery/) You can add galleries from datasources, one of which is a Post Query, so you can populate your gallery with featured images from your posts. [/foogallery-wordpress-gallery-plugin/product-gallery/](/foogallery-wordpress-gallery-plugin/product-gallery/) ### [Product Gallery](/foogallery-wordpress-gallery-plugin/product-gallery/) Display ecommerce products in a dedicated gallery layout. FAQs ## Questions about Mosaic Layout ### How do I create a mosaic gallery in WordPress?+ Install FooGallery PRO Starter or higher, create a gallery and add your photos from the Media Library. Select Mosaic PRO, choose the tile density and gap, then save. Add a FooGallery block to your page and select the gallery, or paste its generated shortcode into a Shortcode block. Mosaic arranges the photos in varied tiles; you can also mark favorite images for larger tiles where space and proportions allow. ### Is Mosaic PRO included in FooGallery Free?+ No. Mosaic PRO requires FooGallery PRO Starter or higher. FooGallery Free includes other layouts, including Responsive, Masonry and Justified. Compare plans to choose the layouts and features you need. ### How is Mosaic different from Masonry or Justified?+ [Masonry](/foogallery-wordpress-gallery-plugin/masonry-gallery/) arranges images in columns, while [Justified](/foogallery-wordpress-gallery-plugin/justified-gallery/) creates rows of photos. Mosaic varies tile sizes within the layout and can give favorite photos more space. Use the linked demos to compare the browsing experience with your own portfolio in mind. ### Can I choose which photos get larger tiles?+ Yes. Mark images with the favorite stars in the gallery editor. Automatic + favorites also lets the layout choose prominent tiles; Favorites only limits that preference to your selected images. The resulting size still depends on image proportions and available space. ### Does the mosaic gallery work on mobile?+ Yes. The layout rearranges as the gallery width changes. You can also override tile density and the gap in the mobile settings. Use the phone preview above, then check the embedded gallery on a real phone. ### Can visitors open the full photo in a lightbox?+ Yes. These demos link thumbnails to their images and use the FooGallery lightbox. Select any photo to inspect it and browse the collection. You can configure the thumbnail link and lightbox in the gallery editor. ### Can I add captions to a tiled mosaic gallery?+ Yes. Add text to your images in the Media Library, then choose the title and description sources in the gallery's Captions settings. Use the hover caption controls to decide when that text appears. These demos show image titles on hover. Mosaic Layout PRO ## Create a mosaic gallery for your WordPress site Mosaic PRO is included in PRO Starter, Expert and Commerce. Start a trial to build a tiled gallery with your own photos, or compare features before choosing a plan. [Start Free Trial](/foogallery-wordpress-gallery-plugin/start-trial/) [Compare Features](/foogallery-wordpress-gallery-plugin/compare-plans/) [More demos](/foogallery-wordpress-gallery-plugin/demos/)