Problem installing TwentyTwenty module

Hi,

I am migrating the cern.ch/connectdots Drupal 7 site to Drupal 8.

I make use of the TwentyTwenty module which worked perfectly well with Drupal 7. This module allows to show 2 versions of an image with a slider.

See an example on : https://cern.ch/connectdots/collision-15425874568.

I am lucky as TwentyTwenty is also available and supported in Drupal 8 and covered by the [security advisory policy.

See: https://www.drupal.org/project/zurb_twentytwenty

I have therefore tried to use it on http://cern.ch/test-connectdots.

But I am unable to make it work…

This module requires a custom library to be installed called TwentyTwenty as well.
The TwentyTwenty library does not seem to support Ludwig.
But there are instructions to install manually.

The first step is to copy manually the TwentyTwenty library in the /libraries/twentytwenty folder, which I did.

The second step is to install the TwentyTwenty module in the Extend menu like any other module.

But when trying to enable this new module, I get the following error:

The Zurb TwentyTwenty plugin was not found. Please download it into the libraries folder in the root (/libraries/twentytwenty).

… which I seem to have done in step 1

The problem may be the following:
On https://www.ostraining.com/blog/drupal/zurb-twentytwenty/, it is clear that the library folder must be in the ROOT of website, outside core. But when I map a drive to https://test-connectdots.web.cern.ch/_webdav/, my feeling is that I am already in the core folder. Correct?

I have also checked the install script which raises the error. Here is the line:

$file_exists = file_exists(DRUPAL_ROOT . ‘/libraries/twentytwenty/js/jquery.twentytwenty.js’);

  if ($file_exists) {
    $message = t('Zurb TwentyTwenty plugin detected in %path', ['%path' => '/libraries/twentytwenty.']);
  } else {
    $message = t('The Zurb TwentyTwenty plugin was not found. Please <a href=":repository_url" target="_blank">download it</a> into the libraries folder in the root (/libraries/twentytwenty).', [':repository_url' => 'https://github.com/zurb/twentytwenty']);
  }

How can I copy the library files to the library folder outside the core folder?

Any help would be more than welcome.

Best,

François

Hi Francois,

You can’t install libraries in Drupal 8 like you did in Drupal 7 anymore.

There are two solutions. One is with Ludwig for PHP libraries and the second for JS libraries is to add them in the theme.

Twentytwenty is a JS library so check my answer from this post onwards.

You need to install the override theme and make the modifications there.

Hi Sotirios,

Thanks for your answer and sorry for late reaction.
I tried to find information about installing the CERN Override Them on
https://drupal-tools.web.cern.ch/docs/styling/override-cern-theme

2 questions:

  1. What do you mean by “If you use the CERN Override Theme, you won’t get any support. You wull be responsible for updating and maintaining the theme.”? What work will it clearly represent? How do I know I need to update what? How often?

  2. Where can I find the CERN Override files? The link in the page is invalid: https://gitlab.cern.ch/webteam-drupal8/cernoverride

Thanks.

François

Hi Francois,

In order to download the theme you need to subscribe to this e-group https://e-groups.cern.ch/e-groups/Egroup.do?egroupId=10368372

I have also updated the gitlab link with the correct one. Thank you for reporting this.

Once you subscribe to the e-group, give it some time to sync before you try to access the repo.

As long as you don’t override anything else from the theme, you don’t have to worry about the support.

I have subscribed to the e-groups about 4 hours ago.
But the link still give me a 404 not found…

https://gitlab.cern.ch/web-team/drupal/public/d8/themes/cernoverride

Is this the correct one?

François

The link is correct. I am not sure when exactly e-groups sync so I gave you reporter access until it syncs. It will expire in a couple of days but until then e-groups will have synced.

Also for gitlab you need to sign out and sign in again to get new permissions.

Hi Konstantinos,

Thanks. I could download the overriden theme, copy it to file system.
But when I try to install it, I get an error message:

The website encountered an unexpected error. Please try again later.

Drupal\Core\Config\PreExistingConfigException : Configuration objects (cernoverride.settings) provided by cernoverride already exist in active configuration in Drupal\Core\Config\PreExistingConfigException::create() (line 65 of core/lib/Drupal/Core/Config/PreExistingConfigException.php ).

Tried to recover a backup made before that operation, but still the same error message…
I am stuck. Any idea?

My site is cern.ch/test-connectdots.

François

Hello Francois,

  • Is it the first time you install the override theme?
  • Can you try to Registry Rebuild? (/_site/backups) and press the button at the bottom

Honestly I have tried to install override theme many times. But never worked.

I rebuilt the registry and got this:
Drupal loaded.
Drupal initialized.
If you don’t see any crazy fatal errors, your registry has been rebuilt.Same error.

But I get the same error when trying to install override…

François

I have seen this error in modules and I have already written a guide on how to fix it How to fix Unable to install MODULE_NAME already exists in active configuration.

Probably the same solution can be applied for themes too

Hi. Thanks for the try. But Purge Configuration does not offer “theme” or “override”.

François

Hi Francois,

I asked the admins to delete the cernoverride.settings entry from the system and I managed to enable the override theme.

It should be ok now.

Hi Sotirios,

Yes Override theme works now. Thanks.

Tried to follow instructions from your post on how to install plugin within the override theme.

  1. I have copied the twentytwenty plugin code in the js/twentytwenty subfolder

    /themes/cernoverride/js/twentytwenty

  2. I have added the following lines (last 4 lines below) in the cernoverride.libraries.yml file (based on what I found in README.md file)

global-styling:

css:
base:
css/color/colors.css: {}
theme:
css/theme.css: {}
js/twentytwenty/css/twentytwenty.css: { media: screen }
js:
js/twentytwenty/js/jquery.event.move.js: {}
js/twentytwenty/js/jquery.twentytwenty.js: {}

  1. I have tried to install the TwentyTwenty module, but I get the same error than at the beginning.

Please download it into the libraries folder in the root (/libraries/twentytwenty).)

It seems I really have no other option than copying the twentytwenty plugin in /libraries (outside of root).

Any idea for the next step?

François

PS: really sorry to bother you, but it seems installing some modules with Drupal 8 has become quite much more complicated than with Drupal 7…

Hi Francois,

I have downloaded the plugin and I put it into the modules folder under a directory called lib.

Then I modified the install file of TwentyTwenty module to check in that folder and the installation was successful.

The only problem is that if you plan to update the module in the future you need to modify that part of the code again.

Indeed when a module requires extra libraries the installation process if more trivial now and it has to be examined case by case.

This is due to the fact that we don;t use composer. This will change in the new infra though which will be deployed sometime next year.

Hi Sotirios,

THanks for having a look at it.
The problem is that is seem the path through “/library” is hardcoded in various places.
I now have this error when trying to render the field type:

Warning : file_get_contents(libraries/twentytwenty/js/jquery.twentytwenty.js): failed to open stream: No such file or directory in _locale_parse_js_file()

Really not possible to use the “/library” path?

François

Hi Francois,

Unfortunatelly there is no way to add it under libraries.

I tried and updated all the refernces in module’s code with the correct path.

Have a look and let me know if it works.

Hi Sotirios!

Thanks for your efforts. I was still having an error about an undefined variable in the field formatter code…

Anyway, things were getting less and less standard: having to use overriden theme, modifying module code, asking you to copy files out of the core subdirectory… Which would mean an unmaintainable website in the long term.

I therefore looked further and found another solution (which I should have checked from the beginning): use H5P ! They have an “image juxtaposition” module which gives exactly the same behavior than TwentyTwenty module, with no need to install any plugin. I could even revert to CERN standard theme.

I think I will go with that solution.

If you want to get a look at how it looks like: check the “answers” menu (currently only first collision, I need to do the others now).

Thanks again to you and Konstantinos help in this issue. Sorry for reverting back to another solution. Hope we all learn from this experience.

Best,

François

No worries Francois.

I am glad that you found an alternative.