{"id":3875,"date":"2021-08-20T10:11:04","date_gmt":"2021-08-20T15:11:04","guid":{"rendered":"https:\/\/www.kasdorf.name\/wordpress\/?p=3875"},"modified":"2022-05-07T13:50:38","modified_gmt":"2022-05-07T18:50:38","slug":"lightbox-in-wordpress-w-gutenberg","status":"publish","type":"post","link":"https:\/\/www.kasdorf.name\/wordpress\/2021\/08\/20\/lightbox-in-wordpress-w-gutenberg\/","title":{"rendered":"Lightbox in WordPress w\/Gutenberg"},"content":{"rendered":"\n<p>Spent some time trying to figure out how to add the Lightbox effect to WordPress using Gutenberg as the editor.<\/p>\n\n\n\n<p>I did install the &#8220;Simple Lightbox&#8221; plugin first. Just left it with all default settings.<\/p>\n\n\n\n<p>First, insert the image to appear in the post or page, using the &#8220;Image&#8221; block in Gutenberg<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/08\/Wordpress-Adding-Lightbox-in-Gutenberg-01.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"393\" height=\"427\" src=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/08\/Wordpress-Adding-Lightbox-in-Gutenberg-01.jpg\" alt=\"\" class=\"wp-image-3880\" srcset=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/08\/Wordpress-Adding-Lightbox-in-Gutenberg-01.jpg 393w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/08\/Wordpress-Adding-Lightbox-in-Gutenberg-01-276x300.jpg 276w\" sizes=\"auto, (max-width: 393px) 100vw, 393px\" \/><\/a><\/figure>\n\n\n\n<p>Select your image, by whichever method you would like.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/08\/Wordpress-Adding-Lightbox-in-Gutenberg-02.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"644\" height=\"272\" src=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/08\/Wordpress-Adding-Lightbox-in-Gutenberg-02-644x272.jpg\" alt=\"\" class=\"wp-image-3881\" srcset=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/08\/Wordpress-Adding-Lightbox-in-Gutenberg-02-644x272.jpg 644w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/08\/Wordpress-Adding-Lightbox-in-Gutenberg-02-300x127.jpg 300w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/08\/Wordpress-Adding-Lightbox-in-Gutenberg-02.jpg 747w\" sizes=\"auto, (max-width: 644px) 100vw, 644px\" \/><\/a><\/figure>\n\n\n\n<p>Then click on the image and select the &#8220;Edit Link&#8221; icon. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/08\/Wordpress-Adding-Lightbox-in-Gutenberg-1.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"469\" height=\"165\" src=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/08\/Wordpress-Adding-Lightbox-in-Gutenberg-1.jpg\" alt=\"\" class=\"wp-image-3876\" srcset=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/08\/Wordpress-Adding-Lightbox-in-Gutenberg-1.jpg 469w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/08\/Wordpress-Adding-Lightbox-in-Gutenberg-1-300x106.jpg 300w\" sizes=\"auto, (max-width: 469px) 100vw, 469px\" \/><\/a><\/figure>\n\n\n\n<p>Seems like all you have to do is select &#8220;Media File&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/08\/Wordpress-Adding-Lightbox-in-Gutenberg-2-1.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"510\" height=\"175\" src=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/08\/Wordpress-Adding-Lightbox-in-Gutenberg-2-1.jpg\" alt=\"\" class=\"wp-image-3879\" srcset=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/08\/Wordpress-Adding-Lightbox-in-Gutenberg-2-1.jpg 510w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/08\/Wordpress-Adding-Lightbox-in-Gutenberg-2-1-300x103.jpg 300w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/a><\/figure>\n\n\n\n<p>Once you get it, it is pretty easy. Or maybe I haven&#8217;t really &#8220;gotten it&#8221; yet! <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Spent some time trying to figure out how to add the Lightbox effect to WordPress using Gutenberg as the editor. I did install the &#8220;Simple Lightbox&#8221; plugin first. Just left it with all default settings. First, insert the image to appear in the post or page, using the &#8220;Image&#8221; block in Gutenberg Select your image, [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"series":[],"class_list":["post-3875","post","type-post","status-publish","format-standard","hentry","category-general-news"],"_links":{"self":[{"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/posts\/3875","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/comments?post=3875"}],"version-history":[{"count":0,"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/posts\/3875\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/media?parent=3875"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/categories?post=3875"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/tags?post=3875"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/series?post=3875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}