{"id":2066,"date":"2026-10-14T04:37:37","date_gmt":"2026-10-14T04:37:37","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?post_type=docs&p=2066"},"modified":"2026-10-17T03:33:59","modified_gmt":"2026-10-17T03:33:59","password":"","slug":"simple-gallery","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/simple-gallery\/","title":{"rendered":"Simple Gallery"},"content":{"rendered":"\n

The Simple Gallery Block lets you display multiple images in a responsive grid. You can customize the number of columns, image size, spacing, captions, descriptions, hover effects, and lightbox animations to create an attractive image gallery.<\/p>\n\n\n\n

How to Add a Simple Gallery Block<\/h2>\n\n\n\n

Follow these steps to add the Simple Gallery Block to your page or post.<\/p>\n\n\n\n

Step 1: Add the Simple Gallery Block<\/h3>\n\n\n\n
    \n
  1. Open the page or post where you want to add the Simple Gallery Block.<\/li>\n\n\n\n
  2. Click the + (Add Block)<\/strong> button.<\/li>\n\n\n\n
  3. Search for Simple Gallery<\/strong> in the block search field.<\/li>\n\n\n\n
  4. Select the Simple Gallery<\/strong> block from the ShapeBlock category.<\/li>\n\n\n\n
  5. The block will be added to your editor.<\/li>\n\n\n\n
  6. Select the block to access its customization options in the sidebar.<\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Step 2: Configure the Simple Gallery Block<\/h3>\n\n\n\n

    The Simple Gallery Block includes four tabs for customization:<\/p>\n\n\n\n

      \n
    • Settings:<\/strong> Add images, choose thumbnail sizes and image order, configure the lightbox, captions, descriptions, and hover effects.<\/li>\n\n\n\n
    • Layout:<\/strong> Control the number of columns, spacing between images, and image height.<\/li>\n\n\n\n
    • Style:<\/strong> Customize image corners, caption appearance, and hover overlays.<\/li>\n\n\n\n
    • Advanced:<\/strong> Adjust the spacing and background of the entire block.<\/li>\n<\/ul>\n\n\n\n

      Settings Tab<\/h2>\n\n\n\n

      The Settings tab contains the following panels.<\/p>\n\n\n\n

      1. Gallery<\/h3>\n\n\n\n
        \n
      • Add Images:<\/strong> Select multiple images from the WordPress Media Library to create the gallery.<\/li>\n\n\n\n
      • Edit \/ Replace Images:<\/strong> Edit or replace the selected images.<\/li>\n\n\n\n
      • Thumbnail Size:<\/strong> Choose the image size used in the gallery.\n
          \n
        • Thumbnail<\/li>\n\n\n\n
        • Medium<\/li>\n\n\n\n
        • Large<\/li>\n\n\n\n
        • Full<\/li>\n<\/ul>\n<\/li>\n\n\n\n
        • Order By:<\/strong> Choose how the gallery images are ordered.\n
            \n
          • Default<\/li>\n\n\n\n
          • Title<\/li>\n\n\n\n
          • ID<\/li>\n\n\n\n
          • Date<\/li>\n\n\n\n
          • Random<\/li>\n<\/ul>\n<\/li>\n\n\n\n
          • Enable Lightbox:<\/strong> Enable or disable the lightbox for viewing images in an enlarged overlay.<\/li>\n\n\n\n
          • Lightbox Animation:<\/strong> Choose the animation used when the lightbox opens or moves between images.\n
              \n
            • Fade<\/li>\n\n\n\n
            • Zoom In<\/li>\n\n\n\n
            • Zoom Out<\/li>\n\n\n\n
            • Slide Up<\/li>\n\n\n\n
            • Slide Down<\/li>\n\n\n\n
            • Flip<\/li>\n\n\n\n
            • None<\/li>\n<\/ul>\n<\/li>\n\n\n\n
            • Animation Speed (ms):<\/strong> Set the lightbox animation duration in milliseconds. This option appears when a lightbox animation other than None is selected.<\/li>\n<\/ul>\n\n\n\n

              2. Caption<\/h3>\n\n\n\n
                \n
              • Show Caption:<\/strong> Enable or disable image captions.<\/li>\n\n\n\n
              • Caption Source:<\/strong> Choose the source of the caption. This option appears when Show Caption is enabled.\n
                  \n
                • Media Library Caption<\/li>\n\n\n\n
                • Image Title<\/li>\n\n\n\n
                • None<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                • Show Description:<\/strong> Display the description saved in each image’s Description field in the WordPress Media Library. Empty descriptions are hidden automatically.<\/li>\n<\/ul>\n\n\n\n

                  3. Hover<\/h3>\n\n\n\n
                    \n
                  • On Hover:<\/strong> Choose the content displayed when visitors hover over an image.\n
                      \n
                    • Default<\/li>\n\n\n\n
                    • Icon<\/li>\n\n\n\n
                    • Text<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                    • Hover Text:<\/strong> Enter the text to display on hover. This option appears when Text is selected.<\/li>\n\n\n\n
                    • Hover Icon:<\/strong> Select the icon to display on hover. This option appears when Icon is selected.<\/li>\n<\/ul>\n\n\n\n
                      \"\"<\/figure>\n\n\n\n

                      Layout Tab<\/h2>\n\n\n\n

                      The Layout tab contains the following panels.<\/p>\n\n\n\n

                      1. Grid<\/h3>\n\n\n\n
                        \n
                      • Columns:<\/strong> Choose the number of gallery columns separately for desktop, tablet, and mobile devices.\n
                          \n
                        • 1 Column<\/li>\n\n\n\n
                        • 2 Columns<\/li>\n\n\n\n
                        • 3 Columns<\/li>\n\n\n\n
                        • 4 Columns<\/li>\n\n\n\n
                        • 5 Columns<\/li>\n\n\n\n
                        • 6 Columns<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                        • Gap (px):<\/strong> Set the space between gallery images. The value can be adjusted separately for desktop, tablet, and mobile devices.<\/li>\n<\/ul>\n\n\n\n

                          2. Image Size<\/h3>\n\n\n\n
                            \n
                          • Height (e.g. 300px):<\/strong> Set a custom height for the gallery images. Enter a value with a unit, such as 300px<\/code>.<\/li>\n<\/ul>\n\n\n\n
                            \"\"<\/figure>\n\n\n\n

                            Style Tab<\/h2>\n\n\n\n

                            The Style tab contains panels for customizing image appearance, captions, and hover effects. Some panels appear only when the related feature is enabled.<\/p>\n\n\n\n

                            1. Image<\/h3>\n\n\n\n
                              \n
                            • Border Radius:<\/strong> Adjust the corner radius of the gallery images.<\/li>\n<\/ul>\n\n\n\n

                              2. Caption Style<\/h3>\n\n\n\n

                              This panel appears when Show Caption or Show Description is enabled.<\/p>\n\n\n\n

                                \n
                              • Alignment:<\/strong> Set the alignment of the caption and description.\n
                                  \n
                                • Default<\/li>\n\n\n\n
                                • Left<\/li>\n\n\n\n
                                • Center<\/li>\n\n\n\n
                                • Right<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                                • Caption Color:<\/strong> Customize the caption text color.<\/li>\n\n\n\n
                                • Caption Background:<\/strong> Set a background color or gradient behind the caption.<\/li>\n\n\n\n
                                • Description Color:<\/strong> Customize the description text color. This option appears when Show Description is enabled.<\/li>\n<\/ul>\n\n\n\n

                                  3. Hover Overlay<\/h3>\n\n\n\n

                                  This panel appears when Icon or Text is selected under On Hover<\/strong>.<\/p>\n\n\n\n

                                    \n
                                  • Overlay Color:<\/strong> Set the hover overlay background color or gradient.<\/li>\n\n\n\n
                                  • Icon Size (px):<\/strong> Set the hover icon size. This option appears when Icon is selected.<\/li>\n\n\n\n
                                  • Icon Color:<\/strong> Customize the hover icon color. This option appears when Icon is selected.<\/li>\n\n\n\n
                                  • Text Color:<\/strong> Customize the hover text color. This option appears when Text is selected.<\/li>\n<\/ul>\n\n\n\n
                                    \"\"<\/figure>\n\n\n\n

                                    Advanced Tab<\/h2>\n\n\n\n

                                    The Advanced tab contains settings that apply to the entire Simple Gallery Block, not to individual gallery images.<\/p>\n\n\n\n

                                    1. Spacing<\/h3>\n\n\n\n
                                      \n
                                    • Padding:<\/strong> Adjust the inner spacing around the entire block. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n\n\n\n
                                    • Margin:<\/strong> Adjust the outer spacing around the entire block. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n<\/ul>\n\n\n\n

                                      2. Background<\/h3>\n\n\n\n
                                        \n
                                      • Background:<\/strong> Set a background color or gradient for the entire block.<\/li>\n<\/ul>\n\n\n\n

                                        <\/p>\n","protected":false},"excerpt":{"rendered":"

                                        The Simple Gallery Block lets you display multiple images in a responsive grid. You can customize the number of columns, image size, spacing, captions, descriptions, hover effects, and lightbox animations to create an attractive image gallery. How to Add a Simple Gallery Block Follow these steps to add the Simple Gallery Block to your page […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[17],"doc_tag":[],"class_list":["post-2066","docs","type-docs","status-publish","hentry","doc_category-media-block"],"year_month":"2026-10","word_count":707,"total_views":"8","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Media Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/media-block\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=2066"}],"version-history":[{"count":1,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2066\/revisions"}],"predecessor-version":[{"id":2327,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2066\/revisions\/2327"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=2066"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=2066"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=2066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}