How to add “before-after” in Gutenberg

Hi,

Use the following shortcode in Gutenberg shortcode block.

[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="Before" after="After" hover="true"]

Note: img1 and img2 are should be the image IDs.

How to get the image ids from Media Libray check this video: https://www.youtube.com/watch?v=MmSjQMsOgPQ

Br,

The only way is to write the code manually?

For the Gutenberg, yes you have to copy and paste the shortcode and just add the image ids.

Thank you so much.

Hello, I’ve added the shortcode but nothing appears when viewing the page. ANy idea ?
Thanks a lot.

I’m interested in the reply. It’s not working for me either.

@cathryn-wellner Can you please share the shortcode screenshot.

Thanks;

Hi, Zayed – thanks for your responsiveness. I don’t have the code anymore as I deleted both the code and the plugin and added a different plugin (that’s working for me). The code was copied directly from the Twenty20 how-to instructions, substituting image ID’s copied from the WP URLs for the photos I was using. I tried that with quite a few different image ID’s and even created a new post to try it out on a fresh piece. I also tried quitting WordPress and even rebooting my computer. What happened each time was…nothing. The shortcode and images didn’t appear in Preview or when I saved a post and tried looking at it on WP. Must be some gremlin biting me. Twenty20 worked beautifully for me before the gradual migration to Gutenberg. Now I can’t even get it to work in Gutenberg. Might be user error, but I’ve found a different plugin so am happy now.