{"id":82731,"date":"2017-05-04T13:52:35","date_gmt":"2017-05-04T13:52:35","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=82731"},"modified":"2023-11-22T10:05:43","modified_gmt":"2023-11-22T10:05:43","slug":"magento-2-before-after-image","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/","title":{"rendered":"Magento 2 Before After Image"},"content":{"rendered":"<p><a href=\"https:\/\/store.webkul.com\/Image-Before-After-Magento2.html\" target=\"_blank\" rel=\"noopener\">Image Before After for Magento 2<\/a> extension shows before and after image comparison in your store. Insert the widget in any part of the page where you want to show the comparison.<\/p>\n<p>Add multiple widgets on the same page. Set widget suffix, width, and height values. The users can drag the mouse cursor and view the before and after images.<\/p>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Features<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<ul>\n<li>Show image comparison using two images.<\/li>\n<li>Easy to set up and configure the widget.<\/li>\n<li>Users can use the slider for viewing the images.<\/li>\n<li>Users can download both the images.<\/li>\n<li>Set widget width &amp; height values.<\/li>\n<li>Enter suffix when using multiple widgets.<\/li>\n<li>Animation works without using the flash or java plugin.<\/li>\n<li>Works on all devices &#8211; mobile, desktop, laptop, tablet.<\/li>\n<li>Supported image file extensions &#8211; jpg, jpeg, png.<\/li>\n<li>Module source code is open for customization.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Module Installation<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<p>To install this extension, please follow each and every step carefully as follows:<\/p>\n<h3>Step 1:<\/h3>\n<p>After extracting the downloaded zip file and you will get the <strong>src<\/strong> folder. Inside <strong>src<\/strong> folder, you will find the <strong>app<\/strong> folder, copy the <strong>app<\/strong> folder to the Magento2 root directory. Please view the below screenshot.<\/p>\n<p><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/2017-02-28_12-22-45.png\" alt=\"Magento2 Admin Buyer Chat Installation\" width=\"1024\" height=\"386\" loading=\"lazy\" \/><\/p>\n<h3>Step 2:<\/h3>\n<p>After copying the <strong>app<\/strong> folder, you need to run the commands in the Magento2 root directory. Please view the below screenshots:<\/p>\n<p><strong>php bin\/magento setup:upgrade<\/strong><\/p>\n<p><img decoding=\"async\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/Installation-Upgrade.png\" alt=\"Magento2 Admin Buyer Chat command\" loading=\"lazy\" \/><br \/>\n<strong>php bin\/magento setup:di:compile<\/strong><br \/>\n<a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/command2-compile-2.png\"><img decoding=\"async\" class=\"alignnone wp-image-88118 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/command2-compile-2.png\" alt=\"\" width=\"601\" height=\"132\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/command2-compile-2.png 601w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/command2-compile-2-250x55.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/command2-compile-2-300x66.png 300w\" sizes=\"(max-width: 601px) 100vw, 601px\" loading=\"lazy\" \/><\/a><br \/>\nNavigate the path \u2013 <strong>&lt;magento_root&gt;\/lib\/web\/mage\/adminhtml<\/strong>. Then, open browser.js file and replace this.modal.modal(\u2018option\u2019, \u2018closed\u2019, options.closed);<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/1-2-1.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-82866\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/1-2-1.png\" alt=\"\" width=\"556\" height=\"81\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/1-2-1.png 556w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/1-2-1-250x36.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/1-2-1-300x44.png 300w\" sizes=\"(max-width: 556px) 100vw, 556px\" loading=\"lazy\" \/><\/a><\/p>\n<p>with this.modal.modal(\u2018option\u2019, \u2018closed\u2019, true);<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/2-3.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-82867\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/2-3.png\" alt=\"\" width=\"486\" height=\"80\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/2-3.png 486w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/2-3-250x41.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/2-3-300x49.png 300w\" sizes=\"(max-width: 486px) 100vw, 486px\" loading=\"lazy\" \/><\/a><\/p>\n<p><strong>php bin\/magento setup:static-content:deploy<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/01\/Installation-Deploy.png\" alt=\"Magento2 Admin Buyer Chat command\" width=\"674\" height=\"120\" loading=\"lazy\" \/><\/p>\n<h3>Step 3:<\/h3>\n<p>After running the commands, you need to flush the cache and reindex all from the Magento2 admin panel. Navigate through <strong>System&gt;Cache Management<\/strong>. Click <strong>Flush Magento Cache<\/strong> button as shown below:<\/p>\n<p><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/2017-02-28_12-09-25.png\" alt=\"Magento2 Cache Management\" width=\"1338\" height=\"766\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Widget Configuration<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<p>After the module installation, navigate to<strong> Content&gt;Pages<\/strong>. Now select the page where you want to show the image. Click <strong>Edit<\/strong> to show the before\u00a0after image on an existing page.<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/page.jpg\"><img decoding=\"async\" class=\"alignnone size-full wp-image-82766\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/page.jpg\" alt=\"page\" width=\"1340\" height=\"703\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/page.jpg 1340w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/page-250x131.jpg 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/page-300x157.jpg 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/page-768x403.jpg 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/page-1200x630.jpg 1200w\" sizes=\"(max-width: 1340px) 100vw, 1340px\" loading=\"lazy\" \/><\/a><\/p>\n<p>After opening the page, go to Editor\u00a0panel, click <strong>Insert\u00a0Widget<\/strong> icon as visible in the screenshot below:<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/insert-widget-1.jpg\"><img decoding=\"async\" class=\"alignnone size-full wp-image-82798\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/insert-widget-1.jpg\" alt=\"insert widget\" width=\"1334\" height=\"740\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/insert-widget-1.jpg 1334w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/insert-widget-1-250x139.jpg 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/insert-widget-1-300x166.jpg 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/insert-widget-1-768x426.jpg 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/insert-widget-1-1200x666.jpg 1200w\" sizes=\"(max-width: 1334px) 100vw, 1334px\" loading=\"lazy\" \/><\/a><\/p>\n<p>A pop-up window will appear, select <strong>Widget Type<\/strong> as <strong>Magento Image Before After Widget<\/strong>. Click Insert Widget button after that.<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/add-widget-type.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-82761\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/add-widget-type.png\" alt=\"add widget type\" width=\"1364\" height=\"493\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/add-widget-type.png 1364w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/add-widget-type-250x90.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/add-widget-type-300x108.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/add-widget-type-768x278.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/add-widget-type-1200x434.png 1200w\" sizes=\"(max-width: 1364px) 100vw, 1364px\" loading=\"lazy\" \/><\/a><\/p>\n<p>Now you need to provide the following information about the widget:<\/p>\n<p><strong>Image Suffix<\/strong> &#8211; Enter any text here to differentiate multiple widgets.<\/p>\n<p><strong>Width<\/strong> &#8211; Enter the width value of the widget for the front-end.<\/p>\n<p><strong>Height<\/strong> &#8211; Enter the height value of the widget for the front-end.<\/p>\n<p><strong>Image 1<\/strong> &#8211; Upload the before image.<\/p>\n<p><strong>Image 2<\/strong> &#8211; Upload the after image.<\/p>\n<p>Click <strong>Insert Widget<\/strong> button add this widget to the page. Follow the same process again for adding multiple widgets.<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/widget-information.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-82762\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/widget-information.png\" alt=\"widget information\" width=\"1366\" height=\"768\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/widget-information.png 1366w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/widget-information-250x141.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/widget-information-300x169.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/widget-information-768x432.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/widget-information-1200x675.png 1200w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" loading=\"lazy\" \/><\/a><\/p>\n<p>Now widget will appear in the content area, click Save Page button to apply your changes. On the front-end, the before after image widget will appear.<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/save-page.jpg\"><img decoding=\"async\" class=\"alignnone size-full wp-image-82767\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/save-page.jpg\" alt=\"save page\" width=\"1366\" height=\"768\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/save-page.jpg 1366w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/save-page-250x141.jpg 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/save-page-300x169.jpg 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/save-page-768x432.jpg 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/save-page-1200x675.jpg 1200w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" loading=\"lazy\" \/><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">User Front-End View<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<p>Here is how the Before After Image will appear on the front-end. The users can view both the images on the page. They can use the mouse cursor to slide the images.<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/frontend-sideby-side.jpg\"><img decoding=\"async\" class=\"alignnone size-full wp-image-82808\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/frontend-sideby-side.jpg\" alt=\"frontend sideby side\" width=\"1272\" height=\"762\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/frontend-sideby-side.jpg 1272w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/frontend-sideby-side-250x150.jpg 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/frontend-sideby-side-300x180.jpg 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/frontend-sideby-side-768x460.jpg 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/frontend-sideby-side-1200x719.jpg 1200w\" sizes=\"(max-width: 1272px) 100vw, 1272px\" loading=\"lazy\" \/><\/a>\u00a0A small message appears when the users point the cursor near the slider.<a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/message-slider.jpg\"><img decoding=\"async\" class=\"alignnone size-full wp-image-82810\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/message-slider.jpg\" alt=\"message slider\" width=\"567\" height=\"308\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/message-slider.jpg 567w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/message-slider-250x136.jpg 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/message-slider-300x163.jpg 300w\" sizes=\"(max-width: 567px) 100vw, 567px\" loading=\"lazy\" \/><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>Thank you for viewing the blog for the extension, if you have any further queries please visit <a href=\"https:\/\/www.uvdesk.com\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">uvdesk.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Image Before After for Magento 2 extension shows before and after image comparison in your store. Insert the widget in any part of the page where you want to show the comparison. Add multiple widgets on the same page. Set widget suffix, width, and height values. The users can drag the mouse cursor and view <a href=\"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":135,"featured_media":82738,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302],"tags":[4799,1863,4798,585,115,4797],"class_list":["post-82731","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento2","tag-after-image","tag-before-after","tag-before-image","tag-image-before-after","tag-image-slider","tag-magent2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Magento 2 Before After Image | Show Image Comparison<\/title>\n<meta name=\"description\" content=\"Show Before and After Image Comparison in the store. Insert the widget on any page, upload the images, set the height and width values.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Magento 2 Before After Image | Show Image Comparison\" \/>\n<meta property=\"og:description\" content=\"Show Before and After Image Comparison in the store. Insert the widget on any page, upload the images, set the height and width values.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/rk225\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-04T13:52:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-22T10:05:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/download-33.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Rohit Kashyap\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Magento 2 Before After Image | Show Image Comparison\" \/>\n<meta name=\"twitter:description\" content=\"Show Before and After Image Comparison in the store. Insert the widget on any page, upload the images, set the height and width values.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2017\/05\/download-33.png\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/rohitk225\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rohit Kashyap\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/\"},\"author\":{\"name\":\"Rohit Kashyap\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/8af0383ed18e56d4b0a71504f0d3dac6\"},\"headline\":\"Magento 2 Before After Image\",\"datePublished\":\"2017-05-04T13:52:35+00:00\",\"dateModified\":\"2023-11-22T10:05:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/\"},\"wordCount\":536,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/download-33.png\",\"keywords\":[\"after image\",\"before after\",\"before image\",\"image before after\",\"image slider\",\"magent2\"],\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/\",\"url\":\"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/\",\"name\":\"Magento 2 Before After Image | Show Image Comparison\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/download-33.png\",\"datePublished\":\"2017-05-04T13:52:35+00:00\",\"dateModified\":\"2023-11-22T10:05:43+00:00\",\"description\":\"Show Before and After Image Comparison in the store. Insert the widget on any page, upload the images, set the height and width values.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/download-33.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/download-33.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Magento 2 Before After Image\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/8af0383ed18e56d4b0a71504f0d3dac6\",\"name\":\"Rohit Kashyap\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2a03958fa8ce3547181ab06e5a13c57dc5861ea7b27f90282b6eb7ae97118e58?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2a03958fa8ce3547181ab06e5a13c57dc5861ea7b27f90282b6eb7ae97118e58?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Rohit Kashyap\"},\"description\":\"Rohit Kashyap drives global promotion of digital commerce services through client success documentation, social media management, and video podcast sessions, enhancing the visibility and market reach.\",\"sameAs\":[\"https:\/\/webkul.com\/\",\"https:\/\/www.facebook.com\/rk225\",\"https:\/\/www.instagram.com\/rk225\",\"https:\/\/in.linkedin.com\/in\/rk225\",\"https:\/\/x.com\/https:\/\/twitter.com\/rohitk225\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/rohit-kashyap971\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Magento 2 Before After Image | Show Image Comparison","description":"Show Before and After Image Comparison in the store. Insert the widget on any page, upload the images, set the height and width values.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/","og_locale":"en_US","og_type":"article","og_title":"Magento 2 Before After Image | Show Image Comparison","og_description":"Show Before and After Image Comparison in the store. Insert the widget on any page, upload the images, set the height and width values.","og_url":"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_author":"https:\/\/www.facebook.com\/rk225","article_published_time":"2017-05-04T13:52:35+00:00","article_modified_time":"2023-11-22T10:05:43+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/download-33.png","type":"image\/png"}],"author":"Rohit Kashyap","twitter_card":"summary_large_image","twitter_title":"Magento 2 Before After Image | Show Image Comparison","twitter_description":"Show Before and After Image Comparison in the store. Insert the widget on any page, upload the images, set the height and width values.","twitter_image":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2017\/05\/download-33.png","twitter_creator":"@https:\/\/twitter.com\/rohitk225","twitter_site":"@webkul","twitter_misc":{"Written by":"Rohit Kashyap","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/"},"author":{"name":"Rohit Kashyap","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/8af0383ed18e56d4b0a71504f0d3dac6"},"headline":"Magento 2 Before After Image","datePublished":"2017-05-04T13:52:35+00:00","dateModified":"2023-11-22T10:05:43+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/"},"wordCount":536,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/download-33.png","keywords":["after image","before after","before image","image before after","image slider","magent2"],"articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/magento-2-before-after-image\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/","url":"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/","name":"Magento 2 Before After Image | Show Image Comparison","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/download-33.png","datePublished":"2017-05-04T13:52:35+00:00","dateModified":"2023-11-22T10:05:43+00:00","description":"Show Before and After Image Comparison in the store. Insert the widget on any page, upload the images, set the height and width values.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/magento-2-before-after-image\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/download-33.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/download-33.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/magento-2-before-after-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Magento 2 Before After Image"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/8af0383ed18e56d4b0a71504f0d3dac6","name":"Rohit Kashyap","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2a03958fa8ce3547181ab06e5a13c57dc5861ea7b27f90282b6eb7ae97118e58?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2a03958fa8ce3547181ab06e5a13c57dc5861ea7b27f90282b6eb7ae97118e58?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Rohit Kashyap"},"description":"Rohit Kashyap drives global promotion of digital commerce services through client success documentation, social media management, and video podcast sessions, enhancing the visibility and market reach.","sameAs":["https:\/\/webkul.com\/","https:\/\/www.facebook.com\/rk225","https:\/\/www.instagram.com\/rk225","https:\/\/in.linkedin.com\/in\/rk225","https:\/\/x.com\/https:\/\/twitter.com\/rohitk225"],"url":"https:\/\/webkul.com\/blog\/author\/rohit-kashyap971\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/82731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/135"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=82731"}],"version-history":[{"count":27,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/82731\/revisions"}],"predecessor-version":[{"id":412447,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/82731\/revisions\/412447"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/82738"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=82731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=82731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=82731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}