If you need to insert it into a body or inside a block

Created on 18 August 2016, about 9 years ago
Updated 25 July 2025, 3 months ago

In case you need to insert TwentyTwenty into a body or inside a block:
1) get zip from download page: http://zurb.com/playground/twentytwenty and unzip CSS and JS folders into sites/all/libraries/twentytwenty/;
2) change Text format for the Body field to "PHP code";
3) insert the code below anywhere inside your page:

<?php
  drupal_add_css('sites/all/libraries/twentytwenty/css/foundation.css');
  drupal_add_css('sites/all/libraries/twentytwenty/css/twentytwenty.css');
  <!-- please note, that if you don't have jquery added already you need to add jquery.min.js with drupal_add_js() in this place-->
  drupal_add_js('sites/all/libraries/twentytwenty/js/jquery.event.move.js');
  drupal_add_js('sites/all/libraries/twentytwenty/js/jquery.twentytwenty.js');
?>
<div class="row" style="margin-top: 2em;">
  <div class="large-12 columns">
    <div class="twentytwenty-container">
      <!-- these are your 2 images -->
      <img src="https://www.website.com/sites/default/files/before.jpg" />
      <img src="https://www.website.com/sites/default/files/after.jpg" />
    </div>
  </div>
</div>
<script type="text/javascript">
  jQuery(document).ready(function($) {
    $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.5});
  });
</script>

4) it works for us in Drupal 7, so troubleshoot if it doesn't work for you (e.g. replace paths to existing images). Thanks.

Feature request
Status

Closed: won't fix

Version

1.0

Component

Miscellaneous

Created by

🇨🇦Canada gennadiy

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024