How exactly does one "Using hooks, any module can provide new skins to the configurable controls."

I have my own images I would like to use but would like to hook this module into using my own skin.

Comments

David Stosik’s picture

Hi.
You need to implement hook_vscc_skin_info() (see vscc.module for an example), then declare (in hook_theme() ) and implement a theme function theme_vscc_element_[skin machine name]() (you can have a look at theme_vscc_element_black_icons() in theme/vscc.theme.inc).
Basically, if you just want to declare new images, you need following code :


/* Let's say you skin is called round_icons, and your module is called custom. */

/**
 * Implements hook_vscc_skin_info().
 */
function custom_vscc_skin_info() {
  return array(
    'round_icons' => array(
      'name' => t('Rounded icons'),
    )
  );
}

/**
 * Implements hook_theme().
 */
function custom_theme($existing, $type, $theme, $path) {
  return array(
    'vscc_element_round_icons' => array(
      'variables' => array('element' => NULL, 'vss_id' => NULL, 'view' => NULL, 'settings' => array(), 'location' => NULL, 'rows' => array()),
    ),
  );
}

/**
 * Generates one "rounded icon" button for Views Slideshow Configurable Controls.
 * $vars['element'] has values 'previous', 'next', 'pause', 'resume'
 * Returns the HTML code for the asked element.
 */
function theme_vscc_element_round_icons($vars) {
  // Feel free to customize this.
  $image_vars = array(
    'path' => drupal_get_path('module', 'custom') . '/images/' . $vars['element'] . '.png',
    'alt' => t($vars['element']),
    'title' => t($vars['element']),
  );
  return theme('image', $image_vars);
}

Feel free to ask more questions if needed.
Regards,
David

capellic’s picture

I found the instructions in #1 a bit difficult to follow, so here's how I got it done:

1. Create a custom module

Your custom module needs two functions. In the first one, change the function name so that "yourmodulename" is replaced with your module name and change "youriconsname" to whatever you want it to be. Also change "Your icons" to the name of your icon set, this will be how you identify it on the Views configuration screen.

/**
 * Implements hook_vscc_skin_info().
 */
function yourmodulename_vscc_skin_info() {
	return array(
		'youriconsname_icons' => array(
			'name' => t('Your icons'),
		)
	);
}

Replace "yourmodulename" with the name of your module as you did for the first function and also chnage the name of the array key so that "youriconsname_icons" matches the array key defined in the function above. No other changes are necessary.

/**
 * Implements hook_theme().
 */
function yourmodulename_theme($existing, $type, $theme, $path) {
	return array(
		'vscc_element_youriconsname_icons' => array(
			'variables' => array('element' => NULL, 'vss_id' => NULL, 'view' => NULL, 'settings' => array(), 'location' => NULL, 'rows' => array()),
		),
	);
}

2. Create a theme function and upload your images

The VSCC module will automatically look for the various icons (previous, next, pause, resume) and this function essentially tells the module where to look for them. You will need to change the name of the function to match your theme and also update the name of the function to include your icon set name. Update the path so that it looks to your theme's base bath. Note that I've created a sub-directory within my theme's images directory to keep things organized. Place your images in this directory with the following names:

  1. previous.png
  2. next.png
  3. pause.png
  4. resume.png
function yourtheme_vscc_element_youriconsname_icons($vars) {
	$image_vars = array(
		'path' => drupal_get_path('theme', 'yourtheme') . '/images/vscc/' . $vars['element'] . '.png',
		'alt' => t($vars['element']),
		'title' => t($vars['element']),
	);
	return theme('image', $image_vars);
}

3. Turn on the module and clear cache

4. Edit your View to use your new icon set

David Stosik’s picture

Status: Active » Fixed

Thanks.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

lsolesen’s picture

Component: Code » Documentation
Category: support » task
Status: Closed (fixed) » Active

Could any of you update the documentation found here: http://drupal.org/node/909020 --> on how to create a Drupal 7 skin?

And maybe also how to change the controls here: http://drupal.org/node/1023904

lsolesen’s picture

Component: Documentation » Code
Category: task » support
Status: Active » Closed (fixed)

Ah, wrong project. Sorry.

thewrush’s picture

Thanks David and capellic.

thewrush’s picture

Where do I place the code?

- template.php
or
- theme-settings.php

One other question: Why does it have to have a custom module name? Why can't it just use vscc_vscc_skin_info()?

<?php
/**
 * Implements hook_vscc_skin_info().
 */
function yourmodulename_vscc_skin_info() {
    return array(
        'youriconsname_icons' => array(
            'name' => t('Your icons'),
        )
    );
}
?>