You are here

function my_module_render_slick_detail in Slick Carousel 7.2

Detailed sample #2.

The example is showing a customized views-view-unformatted--ticker.tpl.php. Practically any content-related .tpl.php file where you have data to print. Do preprocess, or here a direct .tpl.php manipulation for quick illustration.

The goal is to create a vertical newsticker, or tweets, with pure text only. First, create an unformatted Views block, says 'Ticker' containing ~ 10 titles, or any data for the contents -- using EFQ, or static array will do.

File

./slick.api.php, line 78
Hooks and API provided by the Slick module.

Code

function my_module_render_slick_detail() {

  // 1.
  // Optional $settings, can be removed.
  // Provides HTML settings with optionset name and ID, none of JS related.
  // To add JS key:value pairs, use #options at theme_slick() below instead.
  // If you provide ID, be sure unique per instance as it is cached.
  // Leave empty to be provided by the module.
  $id = 'slick-ticker';
  $settings = array(
    // Optional optionset name, otherwise fallback to default.
    'optionset' => 'blog',
    // Optional skin name fetched from hook_slick_skins_info(), otherwise none.
    // The supported keys: skin, skin_thumbnail, skin_arrows, skin_dots.
    'skin' => 'fullwidth',
    // ID can be used for lightbox group, cache ID, the asnavfor, etc.
    // Do not supply attributes to be provided by the module instead.
    'id' => $id,
  );

  // 3.
  // Obligatory $items, as otherwise empty slick.
  // Prepare $items contents, note the 'slide' key is to hold the actual slide
  // which can be pure and simple text, or any image/media file.
  // Meaning $rows can be text only, or image/audio/video, or a combination
  // of both.
  // To add caption/overlay, use 'caption' key with the supported sub-keys:
  // title, alt, link, overlay, editor, or data for complex content.
  // Sanitize each sub-key content accordingly.
  // @see template_preprocess_slick_item() for more info.
  $items = $rows = array();
  foreach ($rows as $key => $row) {
    $items[] = array(
      'slide' => $row,
      // Optional caption contains: editor, overlay, title, alt, data, link.
      // If the above slide is an image, to add text caption, use:
      // 'caption' => array('title' => 'some-caption data'),
      // Optional slide settings to manipulate layout, can be removed.
      // Individual slide supports some useful settings like layout, classes,
      // etc.
      // Meaning each slide can have different layout, or classes.
      // @see slick_layouts()
      // @see slick_fields README.txt for layout, or sub-modules implementation.
      'settings' => array(
        // Optionally adds a custom layout, can be a static uniform value, or
        // dynamic one based on the relevant field value.
        // @see slick_fields README.txt for the supported layout keys.
        'layout' => 'bottom',
        // Optionally adds a custom class, can be a static uniform class, or
        // dynamic one based on the relevant field value.
        'slide_classes' => 'slide--custom-class--' . $key,
      ),
    );
  }

  // 4.
  // Optional assets loader if using slick_build(), yet required for renderable.
  // An empty array should suffice for the most basic slick with no skin at all.
  // @see slick_attach().
  // @see slick_fields/slick_views for the real world samples.
  $attach = array();

  // To add skins, use the $settings variable mentioned above, with supported
  // keys: skin, skin_thumbnail, skin_arrows, skin_dots.
  $attachments = slick_attach($attach, $settings);

  // Add more attachments using regular library keys just as freely:
  $attachments['css'] += array(
    MYTHEME_PATH . '/css/zoom.css' => array(
      'weight' => 9,
    ),
  );
  $attachments['js'] += array(
    MYTHEME_PATH . '/js/zoom.min.js' => array(
      'weight' => 0,
    ),
  );

  // 5.
  // Optional specific JS options, to re-use one optionset, can be removed.
  // Play with speed and options to achieve desired result.
  // @see slick_get_options()
  $options = array(
    'arrows' => FALSE,
    'autoplay' => TRUE,
    'vertical' => TRUE,
    'draggable' => FALSE,
  );

  // 6.A.
  // Build the slick, note key 0 just to mark the thumbnail asNavFor with key 1.
  $slick[0] = array(
    '#theme' => 'slick',
    '#items' => $items,
    // The following 3 lines are optional, if needed, and can be removed.
    '#options' => $options,
    '#settings' => $settings,
    '#attached' => $attachments,
  );

  // Optionally build an asNavFor with $slick[1], and both should be passed to
  // theme_slick_wrapper(), otherwise a single theme_slick() will do.
  // See slick_fields, or slick_views sub-modules for asNavFor samples.
  // ATM, we only have one slick and all is set, so render the Slick.
  print render($slick);

  // 6.B.
  // Optional Cache option, can be removed.
  // Or recommended, use slick_build() to cache the slick instance easily.
  // If it is a hardly updated content, such as profile videos, logo carousels,
  // or more permanent home slideshows, select "Persistent", otherwise time.
  // Cache the slick for 1 hour and fetch fresh contents when the time reached.
  // If stale cache is not cleared, slick will keep fetching fresh contents.
  $settings['cache'] = 3600;

  // Or cache the slick and keep stale contents till the next cron runs.
  $settings['cache'] = 'persistent';

  // Optionally add a custom unique cache ID.
  $settings['cid'] = 'my-extra-unique-id';

  // Build the slick with the arguments as described above:
  $slick = slick_build($items, $options, $settings, $attachments);

  // The following should also work for defaults as the only required is $items:
  $slick = slick_build($items);

  // All is set, render the Slick.
  print render($slick);
}