Drupal 8 diy_ creating a slideshow with theme libraries and slick. – 【126kr】

This summer we were excited to launch a new website for Scanse . Data recovery download After they impressively fulfilled their Kickstarter funding, The Jibe was brought on board to develop their new website.

After assessing their short and long term needs, we decided to move full steam ahead with developing their site using Drupal 8. Data recovery after factory reset We knew the Drupal 8 contributed module ecosystem was not up to speed with Drupal 7. Database schema design However, we also knew that Drupal core, out of the box, was more robust than any of its previous versions.

After our initial review, we knew that our requirement for slideshow and content tabs functionality could not be addressed with a contributed module at that time. Database uml This is where the DIY from this post title comes in. Data recovery ntfs We decided that we would implement our own slideshow and content tabs in the theme layer.


We had actually taken a similar approach on Drupal 7 sites in the past — when a higher level of customization and configuration was needed but not available in a contributed module’s settings. Database error While our approach would be conceptually the same, Drupal 8’s new theme layer and theme libraries would give us an improved set of tools to work with. Database functions Theme libraries

What really makes this all possible is the introduction of theme libraries in Drupal 8’s new theme layer. Top 10 data recovery Theme libraries are managed through the theme’s yml files.

Here the theme is loading a single theme library, global . Database job titles Because this library is being included in THEME.info.yml , it will be loaded globally. Data recovery linux live cd Further definition for the library needs to be defined in THEME.libraries.yml . S pombe database THEME.libraries.yml global:

The global theme library is now being further defined to include a collection of CSS and JS files. Database usa There is also a second theme library being defined, slick. Data recovery pro license key However, because it has not been included in THEME.info.yml , it will not be loaded until we specifically call it. Data recovery on android This helps us keep the page load lighter when these libraries are not needed. Icare data recovery 94fbr We will continue with this a little further down.

As previously mentioned we could do this in Drupal 7 but it did require a custom module that would use a hook like hook_node_view_alter to determine when certain CSS and JS would be loaded. Image database Creating your own slideshow

On the Scanse.io website, the slideshow showcases a collection of images and videos and also uses a centre focused display. Database web application The centre focused display makes a single slide item active but also shows a preview of the previous and next slides.

Slick , humbly dubbed the last carousel you’ll ever need, has quickly become our favorite slideshow library. Database graphic It has countless configuration options, including our favorite: the ability to set different configuration by breakpoint. In databases a category of data is called a There is also a configuration setting available for the center focus display we use on the Scanse website. Database wordpress The HTML Markup

The first step taken to implement the slideshow was to generate the markup we needed. Note 2 data recovery For this site, we used the Paragraphs module – but we won’t dive too deeply into that implementation here. Tally erp 9 data recovery We also could have used a view or a multi-value field to achieve the same thing. Database erd Ultimately, how we use Drupal to output this content doesn’t matter. Database google docs In the end, we want our markup to look something like this:

Here we come back to the slick theme library that we introduced a little while back. Database 5500 When using a contributed module, the assets that make that module work are typically pulled in when you download and install the module. Data recovery kit When we implement a theme library, we download the files and define the assets in our THEME.libraries.yml file. Database meaning THEME.libraries.yml global:

We download slick.min.js and slick.css ( actually, pull slick.css into our Sass structure ) and add them directly to our theme. Gale database Because slick requires JQuery, we also add that as a dependency. Data recovery pc JQuery is included in Drupal core, but it is only loaded if it is a defined dependency.

Like we reviewed before, we define these files separate from the global library because this allows us to load the these assets only as needed.

Lastly, we create a new slick.config.js to capture our configuration. Data recovery easeus You can learn more about the available configuration on the slick website. Top 10 data recovery software slick.config.js (function ($, Drupal, window, document) {

Small screen display implemented through slick’s responsive settings. Database oracle We use this to show significantly less of the previous and next slides as the screen gets smaller.

At this stage, we have the markup and configuration in place. Data recovery services reviews We still need to bring it together. Database 12c new features Our slick configuration looks for the .js-slick-single-item-center class so we need to apply that to our markup. Database lyrics We also need to ensure our theme library loads when it is needed. Database 360 Without slick.min.js , no slideshow will generate.

While we use Paragraphs to generate this display, we are specifically using a multi-valued field to bring in references to the multiple videos. Database architect salary This is the Twig template we use to bring it all together. Database administrator job description field–field-slideshow-slides.twig.html {# Create classes array #}

Through this template we apply the .js-slick-single-item-center class and attach THEME/slick . Data recovery app When Drupal loads this template, it will load the slick theme library because we have attached the library. R database connection This includes slick.config.js where we tell slick to initiate when it finds the .js-slick-single-item-center class. Database weak entity With all of that in place, we have our custom slideshow implemented though our theme. Data recovery vancouver Conclusion

While starting a new Drupal 8 site without the full support of the contributed module space may feel risky, new theme development practices like theme libraries helps mitigate this risk. Level 3 data recovery We can implement smart and efficient front-end components without having to rely on contributed modules or dip in custom code.

Note: In my next post, I’ll show how we built on the power of theme libraries provided in Drupal 8. Database blob I’ll continue to showcase examples from Scanse.io, and share another functionality we implemented with theme libraries — content tabs.

banner