Integration of scripting into Drupal 8

Rating
tags

There are forms, displays, image galleries,... that are written in pure HTML, CSS and Javascript code. Sometimes they are so nice that you want to use them in your Drupal site. Of course...one can not use the field structure from Drupal for these cases.

Let us take an example.. Swiper has nice image galleries... Using their code, you need to replace the image URL with your URL's. For every image this is different..

Screen000480.png
Screen000481.png

A print of the result. (prints don't swipe...)

Screen000482.png

You must replace the code for every node you want to make. Possible but difficult for the shop holder for whom you made a Drupal site..

Is it possible to use fields in combination with code pages?

Yes... you can make a content type with fields (image, imagesize,...) and then make a PHP page to replace the variables. Not everyone works with PHP.. I made it possible without using PHP, using the token filter module. (https://www.drupal.org/project/token_filter) With this filter you can use field variables in your code field.

An example.. A content type with a body (code page, full html), image fields (multiple) and a numeric field for the image size.

Screen000483.png

Look at the code. Between square brackets you see the token variables (replacing the name op the uploaded image). Look also at the different images and their number..

Screen000484.png

One can use this in CSS code as well. I set the size of the image from the value of the field.


Screen000485.png

That is it. Hide the body field in your content type input form. You had set it default with all the code in it. In reverse you hide the image and other fields, except the body in the display mode. Add some CSS and/or javacript to set it responsive.

Now a user can add images en set the imagesize. The code takes over. Just enjoy the gallery.

Disadvantages.. shore..I made a format for adding 10 pictures. Less than 10, results in empty spaces. Without PHP it is not flexible.. You can avoid this problem, making some paragraph types for eg 5, 7, 10 images.

Please try it out on http://project1.drupal8school.be/nl/node/add/swiper_coverflow_integratie

I even switched from Swiper Coverflow (big screen) to Swiper Cube (small screen). (Please refresh when you try this out resizing the browserscreen.)

A print from th PC screen

Screen000479.png

A print from the smartphone display.
Screen000478.png

Integrating nice scripting and Drupal Fields, using a simple token filter module..It is magic. One can use views to display the images also...