Aspiring Web Developer

Thanks for bringing this up – this is next on my list to add

With the technique described here:

https://www.ads-software.com/support/topic/before-after-side-text?replies=4

You can add a <style> tag right to an individual post, you can download the theme and edit the file and then upload the theme to your site, or you can use a plugin that allows you to add site-wide CSS (Ex. https://www.ads-software.com/plugins/simple-custom-css/).

My suggestion is to use the twentytwenty-wrapper class to work with the before-and-after images.

You’ll have to do some research into the CSS required to display the two images side by side – but that should be similar to displaying anything side by side and not specific to TwentyTwenty.

For instance,

`
<div class=”twentytwenty-side-by-side”>
[twentytwenty]
…
[/twentytwenty]
[twentytwenty]
…
[/twentytwenty]
</div>

<style>
.twentytwenty-side-by-side .twentytwenty-wrapper {
/* operate on the images here */
}
</style>
`

Good luck!

Hi Ed, I’m afraid I cannot replicate this issue and it looks to be working on the page. Please let me know if this is still an issue.

I can be of assistance if you could provide the URL where this is occurring.

Unfortunately this comes down to functionality in Zurb’s TwentyTwenty JavaScript, which this plugin uses. You can submit feature requests to Zurb at https://github.com/zurb/twentytwenty under the issue tab.

Ah – a shortcode within a shortcode. That’s a great question.

We don’t currently support this but I’ll look into adding it.

This question is more related to Zurb’s TwentyTwenty JavaScript, which this plugin uses. You can submit feature requests to Zurb at https://github.com/zurb/twentytwenty under the Issues tab.

cultivardesignschris, have you tried using the shortcode? You should not have to add any JavaScript in order to use this plugin – the plugin takes care of that.

Marking as resolved since the original issue is resolved.

This is the JavaScript to activate the image comparison:

$(“.twentytwenty-container”).twentytwenty();

More information is available at https://github.com/zurb/twentytwenty/, the script on which this plugin is based.

Hope this helps.

This plugin uses Zurb’s TwentyTwenty script. Please submit your request directly to that script’s Issue page on GitHub: https://github.com/zurb/twentytwenty

Can you please explain what happens when you attempt to use the shortcode?

Please confirm that you are adding the shortcode in the “Text” tab, not the “Visual” tab, of hte post editor.

Please provide a link if possible.

Please provide a link – otherwise it is difficult to troubleshoot this issue.

You may also try filing an issue on the Zurb TwentyTwenty Github page at https://github.com/zurb/twentytwenty/. That is the script that this plugin utilizes.

TwentyTwenty uses Zurb’s TwentyTwenty script, located at https://github.com/zurb/twentytwenty/. It is open source software. I have not heard of the paid plugin that is linked in this support question, and would always recommend considering free, open source software where possible.

At least one image in the [twentytwenty] shortcode must have an explicit width and height in its <img> tag in order for TwentyTwenty to recognize it.

ex. <img src=”path_to_image” width=”200″ height=”400″ />

TwentyTwenty will pick up the first width and height it finds in the images and use it for the width and height of the compare tool.

If you are still having an issue, please provide the full HTML of the post that’s having issues. Thanks!