{"id":2064,"date":"2026-10-14T04:37:20","date_gmt":"2026-10-14T04:37:20","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?post_type=docs&#038;p=2064"},"modified":"2026-10-15T10:23:27","modified_gmt":"2026-10-15T10:23:27","password":"","slug":"image-comparison","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/image-comparison\/","title":{"rendered":"Image Comparison"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Image Comparison Block lets you compare two images using a draggable slider. You can display before-and-after images horizontally, vertically, or diagonally, customize the slider handle, and optionally display labels for each image.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add an Image Comparison Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow these steps to add the Image Comparison Block to your page or post.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add the Image Comparison Block<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open the page or post where you want to add the Image Comparison Block.<\/li>\n\n\n\n<li>Click the <strong>+ (Add Block)<\/strong> button.<\/li>\n\n\n\n<li>Search for <strong>Image Comparison<\/strong> in the block search field.<\/li>\n\n\n\n<li>Select the <strong>Image Comparison<\/strong> block from the ShapeBlock category.<\/li>\n\n\n\n<li>The block will be added to your editor.<\/li>\n\n\n\n<li>Select the block to access its customization options in the sidebar.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1623\" height=\"592\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-60.png\" alt=\"\" class=\"wp-image-2311\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-60.png 1623w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-60-300x109.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-60-768x280.png 768w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-60-1024x374.png 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-60-1536x560.png 1536w\" sizes=\"auto, (max-width: 1623px) 100vw, 1623px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configure the Image Comparison Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Image Comparison Block includes four tabs for customization:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Settings:<\/strong> Select before-and-after images, set the initial comparison position, and configure labels.<\/li>\n\n\n\n<li><strong>Layout:<\/strong> Choose the comparison direction, set the height, and adjust label positioning.<\/li>\n\n\n\n<li><strong>Style:<\/strong> Customize the image container, slider handle, and labels.<\/li>\n\n\n\n<li><strong>Advanced:<\/strong> Adjust spacing and background settings.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Settings Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Settings tab contains the following panels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Images<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Before Image:<\/strong> Select the image to display as the before version.<\/li>\n\n\n\n<li><strong>After Image:<\/strong> Select the image to display as the after version.<\/li>\n\n\n\n<li><strong>Default Offset (%):<\/strong> Set the initial position of the comparison slider from 0% to 100%.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Labels<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Show Before \/ After labels:<\/strong> Enable or disable labels on the comparison images.<\/li>\n\n\n\n<li><strong>Before Label:<\/strong> Customize the text displayed on the before image. Leave empty to hide this label.<\/li>\n\n\n\n<li><strong>After Label:<\/strong> Customize the text displayed on the after image. Leave empty to hide this label.<\/li>\n\n\n\n<li><strong>Show labels only on hover:<\/strong> Display the labels only when visitors hover over the comparison area.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The Before Label, After Label, and hover options appear when <strong>Show Before \/ After labels<\/strong> is enabled.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1552\" height=\"698\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-61.png\" alt=\"\" class=\"wp-image-2312\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-61.png 1552w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-61-300x135.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-61-767x345.png 767w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-61-1024x461.png 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-61-1536x691.png 1536w\" sizes=\"auto, (max-width: 1552px) 100vw, 1552px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Layout Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Layout tab contains the following panels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Size &amp; Direction<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Layout:<\/strong> Choose the comparison direction:\n<ul class=\"wp-block-list\">\n<li>Horizontal<\/li>\n\n\n\n<li>Vertical<\/li>\n\n\n\n<li>Diagonal<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Height (px):<\/strong> Set the height of the comparison area. The height can be adjusted separately for desktop, tablet, and mobile devices.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Label Position<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This panel appears when labels are enabled and the layout is not diagonal.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Label Position:<\/strong> Choose where the before and after labels appear.\n<ul class=\"wp-block-list\">\n<li>For horizontal layout: Top, Middle, or Bottom.<\/li>\n\n\n\n<li>For vertical layout: Left, Center, or Right.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Distance from the Edge (px):<\/strong> Set the distance between the labels and the edge of the comparison area.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1566\" height=\"481\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-62.png\" alt=\"\" class=\"wp-image-2314\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-62.png 1566w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-62-300x92.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-62-765x235.png 765w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-62-1024x315.png 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-62-1536x472.png 1536w\" sizes=\"auto, (max-width: 1566px) 100vw, 1566px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Style Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Style tab contains panels for customizing the comparison container, slider handle, and labels. The Labels panel appears only when labels are enabled.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Image Box<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Border:<\/strong> Customize the border of the comparison container.<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Adjust the corner radius of the container.<\/li>\n\n\n\n<li><strong>Box Shadow:<\/strong> Add and customize a shadow around the container.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Handle<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Style:<\/strong> Choose the appearance of the comparison slider handle:\n<ul class=\"wp-block-list\">\n<li>Circle (outline)<\/li>\n\n\n\n<li>Circle (filled)<\/li>\n\n\n\n<li>Rounded Square<\/li>\n\n\n\n<li>Pill<\/li>\n\n\n\n<li>Glass<\/li>\n\n\n\n<li>Line Only<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Icon:<\/strong> Choose the icon displayed inside the handle:\n<ul class=\"wp-block-list\">\n<li>Triangles<\/li>\n\n\n\n<li>Chevrons<\/li>\n\n\n\n<li>Double Arrow<\/li>\n\n\n\n<li>None<\/li>\n\n\n\n<li>This option is hidden when <strong>Line Only<\/strong> is selected.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Line &amp; Border Color:<\/strong> Set the color of the handle line and border.<\/li>\n\n\n\n<li><strong>Grip Color \/ Knob Fill:<\/strong> Set the grip color for the line-only style or the knob fill for other handle styles. A background color or gradient can be selected.<\/li>\n\n\n\n<li><strong>Icon Color:<\/strong> Customize the handle icon color. This option is hidden when <strong>Line Only<\/strong> is selected.<\/li>\n\n\n\n<li><strong>Grip Length (px) \/ Knob Size (px):<\/strong> Adjust the grip length for the line-only style or the knob size for other styles.<\/li>\n\n\n\n<li><strong>Line Width (px):<\/strong> Set the width of the comparison line.<\/li>\n\n\n\n<li><strong>Shadow:<\/strong> Enable or disable the handle shadow.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Labels<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This panel appears when <strong>Show Before \/ After labels<\/strong> is enabled.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text Color:<\/strong> Set the label text color.<\/li>\n\n\n\n<li><strong>Background:<\/strong> Customize the label background color or gradient.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Customize the label typography.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Adjust the space inside the labels.<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Customize the label corners.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1531\" height=\"771\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-63.png\" alt=\"\" class=\"wp-image-2316\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-63.png 1531w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-63-300x151.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-63-766x386.png 766w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-63-1024x516.png 1024w\" sizes=\"auto, (max-width: 1531px) 100vw, 1531px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Advanced tab contains the following panels for additional customization.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Spacing<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Padding:<\/strong> Adjust the inner spacing around the block. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Adjust the outer spacing around the block. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Background<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Background:<\/strong> Set a background color or gradient for the block.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Image Comparison Block lets you compare two images using a draggable slider. You can display before-and-after images horizontally, vertically, or diagonally, customize the slider handle, and optionally display labels for each image. How to Add an Image Comparison Block Follow these steps to add the Image Comparison Block to your page or post. Step [&hellip;]<\/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-2064","docs","type-docs","status-publish","hentry","doc_category-media-block"],"year_month":"2026-10","word_count":682,"total_views":"6","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\/2064","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=2064"}],"version-history":[{"count":3,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2064\/revisions"}],"predecessor-version":[{"id":2318,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2064\/revisions\/2318"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=2064"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=2064"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=2064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}