{"id":1497,"date":"2024-03-13T07:43:00","date_gmt":"2024-03-13T07:43:00","guid":{"rendered":"https:\/\/docs.wpblockart.com\/blockart-blocks\/?post_type=docs&p=1497"},"modified":"2024-04-10T07:22:00","modified_gmt":"2024-04-10T07:22:00","slug":"image","status":"publish","type":"docs","link":"https:\/\/docs.wpblockart.com\/blockart-blocks\/image\/","title":{"rendered":"Image"},"content":{"rendered":"\n

The Image Block lets you display an image on your site. You can upload the image directly from your PC or use an external link.<\/p>\n\n\n\n

\"Add
Add Image Using Image Block<\/figcaption><\/figure>\n\n\n\n

After you have chosen the Image Block, you’ll get a block editing panel on the right-hand side. It has three options: General<\/strong>, Style<\/strong>, and Advanced<\/strong>. These options customize the design and other elements of the block. Let\u2019s explore one by one below:<\/p>\n\n\n\n

General<\/h2>\n\n\n\n

The general settings consist of the following options listed below:<\/p>\n\n\n\n

    \n
  • Layout <\/strong>– Using the option, you can set the Width, Max-Width, and Height of the Image. Moreover, you can select the value for different devices (Desktop, Mobile, and Tablet).<\/li>\n<\/ul>\n\n\n\n
    \"Manage
    Manage the Width and Height of the Image<\/figcaption><\/figure>\n\n\n\n
      \n
    • Image<\/strong> – The option allows you to add the image and also enable the image caption.<\/li>\n<\/ul>\n\n\n\n
      \"Add
      Add Image and Caption<\/figcaption><\/figure>\n\n\n\n
        \n
      • Overlay <\/strong>– The option adds the text over the image and comes up with various customization options listed below:\n
          \n
        • Enable<\/strong> – Switch the Toggle to the right area to enable the overlay in the image. Enabling the option will display the Overlay Text on the image.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
          \"Enable
          Enable Overlay and Add Text<\/figcaption><\/figure>\n\n\n\n
            \n
          • Content Position<\/strong> – It sets the overalay position. You can set the image position to top, center, and bottom.<\/li>\n\n\n\n
          • Border <\/strong>– It customizes the Border area added around the Overlay and comes with the following options:\n
              \n
            • Type<\/strong> – You can set the border type as\u00a0Solid,\u00a0Dotted,\u00a0Dashed,\u00a0Double, etc. Moreover, select the border type to be\u00a0None\u00a0if you do not want to add any borders. If you select the border type to be other than none, you’ll get the following options:<\/li>\n\n\n\n
            • Border Color<\/strong> \u2013 It allows you to choose the appropriate color for the border.<\/li>\n\n\n\n
            • Size<\/strong> – It provides the option to select the border size.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
            • Radius <\/strong>– It allows you to fix the radius value to make the round corners for the border.<\/li>\n\n\n\n
            • Show Separator On<\/strong> – It allows the separator to be displayed between the overlay heading and description in hover and normal mode.<\/li>\n\n\n\n
            • Separator Style<\/strong> – It allows choosing the Separator Style.<\/li>\n\n\n\n
            • Separator Position<\/strong> – Using the option, you can set the separator position before or after the title.<\/li>\n<\/ul>\n\n\n\n
              \"Add
              Add Separator and Manage Position<\/figcaption><\/figure>\n\n\n\n
                \n
              • Show Heading <\/strong>– You can set the heading to be displayed Always or only in Hover mode.<\/li>\n<\/ul>\n\n\n\n
                \"Allow
                Allow Heading to be Displayed Always<\/figcaption><\/figure>\n\n\n\n
                  \n
                • Show Description <\/strong>– You can set the description to be displayed Always or only in Hover mode.<\/li>\n<\/ul>\n\n\n\n
                  \"Allow
                  Allow Description to be Displayed Always<\/figcaption><\/figure>\n\n\n\n
                    \n
                  • Mask<\/strong> – You can add masks of different shapes and sizes to your images using the option. Moreover, you can choose the Mask shape, size, position, and repetition.<\/li>\n<\/ul>\n\n\n\n
                    \"Adding
                    Adding Mask Effect to Image<\/figcaption><\/figure>\n\n\n\n

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

                    Under the style option, you’ll find the following options available:<\/p>\n\n\n\n

                    Properties<\/h3>\n\n\n\n
                      \n
                    • Text<\/strong> Alignment<\/strong> – It sets the position of the image on the left, center, and right. Moreover, you can set the position of the image to be different on various devices (desktop, tablet, and mobile).<\/li>\n<\/ul>\n\n\n\n
                      \"Change
                      Change Image Alignment<\/figcaption><\/figure>\n\n\n\n

                      Image<\/h3>\n\n\n\n

                      It changes the styling of the image added on your end and provides the following options:<\/p>\n\n\n\n

                        \n
                      • Object Fit <\/b>– Using this option, you can determine if the image should fit inside the container or be stretched to fill the container entirely.<\/li>\n\n\n\n
                      • On Hover Image<\/strong> – The option lets you add animation effects while hovering the image.<\/li>\n\n\n\n
                      • Image Filter<\/strong> – The option lets you add the effect to the image.<\/li>\n\n\n\n
                      • Opacity<\/strong> – It controls the transparency of the image.<\/li>\n<\/ul>\n\n\n\n
                        \"Adding
                        Adding Styling to Image<\/figcaption><\/figure>\n\n\n\n

                        Border<\/h3>\n\n\n\n

                        It customizes the Border area added around the Image and comes with the following options:<\/p>\n\n\n\n

                          \n
                        • Type<\/strong> – You can set the border type as\u00a0Solid,\u00a0Dotted,\u00a0Dashed,\u00a0Double, etc. Moreover, select the border type to be\u00a0None\u00a0if you do not want to add any borders. If you select the border type to be other than none, you’ll get the following options:\n
                            \n
                          • Border Color<\/strong> \u2013 It allows you to choose the appropriate color for the border.<\/li>\n\n\n\n
                          • Size<\/strong> – It provides the option to select the border size.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                          • Radius <\/strong>– It allows you to fix the radius value to make the round corners for the image.<\/li>\n\n\n\n
                          • Box Shadow<\/strong> \u2013 When you enable the Box Shadow option, you will get the following customization options:\n
                              \n
                            • Color<\/strong> \u2013 It allows you to select the appropriate box-shadow color.<\/li>\n\n\n\n
                            • Horizontal-X<\/strong> \u2013 It displays the box shadows in the horizontal position.<\/li>\n\n\n\n
                            • Horizontal-Y<\/strong> \u2013 It displays the box shadows in the vertical position.<\/li>\n\n\n\n
                            • Blur<\/strong> \u2013 You can set up the blur value of the box shadows appearing.<\/li>\n\n\n\n
                            • Spread<\/strong> \u2013 The shadow\u2019s spread value represents the distance to expand or contract a shadow in all directions. You can change the spread value according to the site\u2019s requirements.<\/li>\n\n\n\n
                            • Position<\/strong> \u2013 You can set the position of the box shadows as Inset<\/strong> or Outline<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                              \"Adding
                              Adding Box Shadow Effect<\/figcaption><\/figure>\n\n\n\n

                              Note \u2013 You can apply the settings option differently for Normal and Hover Modes.<\/em><\/p>\n\n\n\n

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

                              The Advanced section consists of four options for the Image block.<\/p>\n\n\n\n

                              Spacing<\/h3>\n\n\n\n

                              Under the spacing section, you can find the following options available:<\/p>\n\n\n\n

                                \n
                              • Block Margin – <\/strong>According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set the values of the different margins for various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                              • Block Padding – <\/strong>According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set the different padding values for various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                                \"Adding
                                Adding Margin and Padding Spacing<\/figcaption><\/figure>\n\n\n\n

                                Z-Index<\/h3>\n\n\n\n

                                It allows you to set the priority of the Image block according to the site requirement.<\/p>\n\n\n\n

                                Responsive Condition<\/h3>\n\n\n\n

                                Using the option, you can enable\/disable displaying the block on various screen sizes:<\/p>\n\n\n\n

                                  \n
                                • Hide on Desktop<\/strong> \u2013 It hides the Image block on the Desktop.<\/li>\n\n\n\n
                                • Hide on Tablet<\/strong> \u2013 It hides the Image block on the Tablet.<\/li>\n\n\n\n
                                • Hide on Mobile<\/strong>\u00a0\u2013 It hides the Image on the Mobile.<\/li>\n<\/ul>\n\n\n\n
                                  \"Enable\/Disable
                                  Enable\/Disable Block Responsive Condition Responsive Condition<\/figcaption><\/figure>\n\n\n\n

                                  Advanced<\/h3>\n\n\n\n

                                  Under the option, you can set the CSS ID and Classes for this particular Image block. The available options are listed below:<\/p>\n\n\n\n

                                    \n
                                  • CSS ID<\/strong> \u2013 It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.<\/li>\n\n\n\n
                                  • Additional CSS Class(es): <\/strong>This allows you to add a CSS class to your block, allowing you to write custom CSS to style this particular block.<\/li>\n<\/ul>\n\n\n\n

                                    It allows you to add a CSS class to your block and write custom CSS to style this particular block. After creating the separate ID and Classes, visit your CSS editor and write a style for the ID and class.<\/p>\n\n\n\n

                                    \"Adding
                                    Adding CSS IDs and Additional Classes<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

                                    The Image Block lets you display an image on your site. You can upload the image directly from your PC or use an external link. After you have chosen the Image Block, you’ll get a block editing panel on the right-hand side. It has three options: General, Style, and Advanced. These options customize the design[…]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"doc_category":[7],"doc_tag":[],"_links":{"self":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1497"}],"collection":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/comments?post=1497"}],"version-history":[{"count":38,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1497\/revisions"}],"predecessor-version":[{"id":2740,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1497\/revisions\/2740"}],"wp:attachment":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/media?parent=1497"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_category?post=1497"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_tag?post=1497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}