Drupal Technical

[Drupal] Steps to install and configure Readmore Js via the theme in Drupal

Jimmy.sebastian | | 1 min read

This article covers how to the Install and configure Readmore Js via the theme. Readmore is a lightweight and Responsive jQuery plugin that automatically generates a Read More link for users to click and read the rest of the content.

Download and copy the Readmore.js into the anew folder names js under your theme folder from
https://github.com/jedfoster/Readmore.js/blob/master/readmore.jsThe path of reademore.js will be theme_folder/js/readmore.js

create custom.js file in js folder and add the following codes.

(function ($) {
  Drupal.behaviors.custom_Read_More = {
    attach:function(context, settings) {
      $("#div-id here").readmore({
        speed: 100,
        collapsedHeight: 200,
        heightMargin: 16,
        moreLink: 'Read More',
        lessLink: 'Close',
        embedCSS: true,
        blockCSS: 'display: block; width: 100%;',
        startOpen: false,
        // callbacks
        beforeToggle: function(){},
        afterToggle: function(){}
      });
    }
  }
})(jQuery);

Open template.php file from your theme folder and add the following codes.

/**
 * Implements hook_preprocess_page().
 */
  function theme_name_preprocess_page(&$vars) {
    drupal_add_js(drupal_get_path('theme', 'theme_name') . '/js/readmore.js');
    drupal_add_js(drupal_get_path('theme', 'theme_name') . '/js/custom.js');
    $vars['scripts'] = drupal_get_js();
  }

Do you need any Drupal theming support or need any services, connect with us.

 

 

Related Topics