iviparagraphs v1.0.6

ivislider

"IviParagraphs" is a service for easy creation of Drupal paragraphs

Description

• IviParagraphs is a responsive and lightweight collection of customizable Drupal paragraphs.
• No jQuery is required.
• Accepts info in json format.
• You can change css settings very quickly

Package Managers

NPM

npm install iviparagraphs

#####Usage

Just import Class (for example in the js code that you bundle later with webpack):

import IviParagraphs from './iviparagraphs/IviParagraphs';

Add scss to webpack:

 'iviparagraphs': [
            'PATH/iviparagraphs/style.scss'
        ],

Import Drupal paragraphs with appropriate fields

Let`s start!

import IviParagraphs from './iviparagraphs/IviParagraphs';
let paragraphs = new IviParagraphs();
paragraphs.init();

Customize the panel if you want to:

import IviParagraphs from './iviparagraphs/IviParagraphs';
let paragraphs = new IviParagraphs(
    {
        horImage: {
            height: 0.4,
            marginBottom: 5,
            marginTop: 5
        },
        text: {
            span: true,
            spanstyle1: 'blueline',
            spanstyle2: '',
            spanstyle3: 'doubleline',
            marginTop: 5,
            marginBottom: 5,
            style1: {
                main: {
                    backgroundColor: '#70847b',
                    color: '#132836',
                    padding: {
                        responsive: {
                            0: '40px 0',
                            1023: '60px 0',
                            1200: '120px 0'
                        }
                    }
                },
                words: {
                    padding: '0 10px',
                    width: '100%',
                    maxWidth: '800px',
                    display: 'inline-block',
                    marginBottom: '40px',
                    marginTop: {
                        responsive: {
                            0: '20px',
                            1200: '40px'
                        }
                    }
                },
                title: {
                    marginBottom: '20px',
                },
                subtitle: {
                    padding: '0 20px',
                    marginBottom: {
                        responsive: {
                            0: '20px',
                            1200: '40px'
                        }
                    }
                },
                subtitleClass: 'h4',
                titleClass: 'h3',
                textClass: 'high-text',
                linkClass: 'about__btn'
            },
            style2: {

            }

        },
        fsImage: {
            style: {
                title: {
                    color: '#fff',
                }
            }

        }
    }
);
paragraphs.init();

JSON

By address 'rest/api/par/horimg/%' should be accessible JSON: (where % is fid of image)

$file = file_load($fid);
        $uri = $file->uri;

        $img = [];
        $img[] = file_create_url($uri);

        drupal_json_output(array_values($img));

Site Header

If you want to count header height the header must have ID = "header"

Settings

Horizontal image (paragraphs.horImage)

Text (paragraphs.text)

(accepts 3 styles, one of them - with img bg)

Full-size image (paragraphs.fsimage)

Video (paragraphs.videoPar)

Gallery (paragraphs.gallery)

Gallery first style (paragraphs.gallery.style1)

Text and Image (paragraphs.textAndImage)

(accepts 4 styles, one of them - with img bg)

Two texts (paragraphs.twotexts)

(accepts 4 styles, one of them - with img bg)

Three parts (paragraphs.threeparts)

(accepts 4 styles, one of them - with img bg. The width of parts is 33.333%)

Vertical image (paragraphs.vertimg)

(1 style)

Horizontal single image (paragraphs.horsingleimg)

(1 style)

Browser support

IviParagraphs works on IE8+ in addition to other modern browsers such as Chrome, Firefox, and Safari.

License

Copyright (c) 2018 tstudio

Licensed under the MIT license.