diff --git a/README.md b/README.md
index 9c4d4dad97664fdd2f03b310265961271a5e1714..ef47d41cc6159a326558a09d44edbe5aa4bde678 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,13 @@
7. Create a poster image and upload the image in the FileField field created in
step #4.
+## Poster images from a separate field
+
+It is possible to display images uploaded to an image field as the video
+poster image. After you added an image field to your content type, edit the
+display settings of the Video.js field and specify the image field in the
+"Poster image field" setting.
+
## Installation with the Video module
If you are using the Video module, you can't configure the player at the
diff --git a/includes/videojs.theme.inc b/includes/videojs.theme.inc
index 41fbedeec06d6aac11dde4a25ea16377aa044300..b0100cc7ef3c801b424f62e94efd8608c2af6cce 100644
--- a/includes/videojs.theme.inc
+++ b/includes/videojs.theme.inc
@@ -40,7 +40,7 @@ function videojs_preprocess_videojs(&$vars) {
if (!isset($codecs[$item['filemime']])) {
// check for image file and add in it as poster
if (strncmp($item['filemime'], 'image/', 6) === 0) {
- $vars['poster'] = file_create_url($item['uri']);
+ $vars['poster'] = $item['uri'];
}
// Skip unplayable items.
@@ -51,6 +51,16 @@ function videojs_preprocess_videojs(&$vars) {
$vars['items'][] = $item;
}
+
+ // Turn the poster image URI into a URL
+ if (!empty($vars['poster'])) {
+ if (empty($vars['posterimage_style'])) {
+ $vars['poster'] = file_create_url($vars['poster']);
+ }
+ else {
+ $vars['poster'] = image_style_url($vars['posterimage_style'], $vars['poster']);
+ }
+ }
}
/**
diff --git a/videojs.module b/videojs.module
index 90c8e073e6d697974fde61fbf023d07c80e11713..98074eeff2fd9e632c60d92c6c349ddb01940956 100644
--- a/videojs.module
+++ b/videojs.module
@@ -31,7 +31,7 @@ function videojs_menu() {
function videojs_theme() {
return array(
'videojs' => array(
- 'variables' => array('items' => NULL, 'player_id' => NULL, 'attributes' => NULL, 'entity' => NULL, 'entity_type' => NULL),
+ 'variables' => array('items' => NULL, 'player_id' => NULL, 'attributes' => NULL, 'entity' => NULL, 'entity_type' => NULL, 'posterimage_style' => NULL),
'template' => 'theme/videojs',
'file' => 'includes/videojs.theme.inc',
),
@@ -65,6 +65,8 @@ function videojs_field_formatter_info() {
'settings' => array(
'width' => NULL,
'height' => NULL,
+ 'posterimage_field' => NULL,
+ 'posterimage_style' => NULL,
),
),
);
@@ -117,6 +119,14 @@ function videojs_field_formatter_view($entity_type, $entity, $field, $instance,
$attributes['height'] = intval($settings['height']);
}
+ // Add the poster image
+ if (!empty($settings['posterimage_field']) && !empty($entity->{$settings['posterimage_field']})) {
+ $images = field_get_items($entity_type, $entity, $settings['posterimage_field']);
+ if (!empty($images)) {
+ array_unshift($items, array_shift($images));
+ }
+ }
+
list($id, $vid, $bundle) = entity_extract_ids($entity_type, $entity);
return array(
array(
@@ -127,8 +137,9 @@ function videojs_field_formatter_view($entity_type, $entity, $field, $instance,
'#entity' => $entity,
'#entity_type' => $entity_type,
'#attributes' => $attributes,
- ),
- );
+ '#posterimage_style' => !empty($settings['posterimage_style']) ? $settings['posterimage_style'] : NULL,
+ ),
+ );
}
/**
@@ -137,26 +148,61 @@ function videojs_field_formatter_view($entity_type, $entity, $field, $instance,
function videojs_field_formatter_settings_form($field, $instance, $view_mode, $form, &$form_state) {
$display = $instance['display'][$view_mode];
$settings = $display['settings'];
+ $image_styles = image_style_options(FALSE);
- return array(
+ $otherinstances = field_info_instances($instance['entity_type'], $instance['bundle']);
+ $imagefields = array();
+
+ foreach ($otherinstances as $otherinstance) {
+ $otherfield = field_info_field_by_id($otherinstance['field_id']);
+ if ($otherfield['type'] == 'image') {
+ $imagefields[$otherinstance['field_name']] = $otherinstance['label'];
+ }
+ }
+
+ $form = array(
'#element_validate' => array('videojs_field_formatter_settings_form_validate'),
- 'width' => array(
- '#type' => 'textfield',
- '#title' => t('Width'),
- '#default_value' => $settings['width'],
- '#size' => 6,
- '#maxlength' => 5,
- '#element_validate' => array('element_validate_integer_positive'),
- ),
- 'height' => array(
- '#type' => 'textfield',
- '#title' => t('Height'),
- '#default_value' => $settings['height'],
- '#size' => 6,
- '#maxlength' => 5,
- '#element_validate' => array('element_validate_integer_positive'),
- ),
);
+
+ $form['width'] = array(
+ '#type' => 'textfield',
+ '#title' => t('Width'),
+ '#default_value' => $settings['width'],
+ '#size' => 6,
+ '#maxlength' => 5,
+ '#element_validate' => array('element_validate_integer_positive'),
+ );
+ $form['height'] = array(
+ '#type' => 'textfield',
+ '#title' => t('Height'),
+ '#default_value' => $settings['height'],
+ '#size' => 6,
+ '#maxlength' => 5,
+ '#element_validate' => array('element_validate_integer_positive'),
+ );
+
+ if (!empty($imagefields)) {
+ $form['posterimage_field'] = array(
+ '#type' => 'select',
+ '#title' => t('Poster image field'),
+ '#default_value' => $settings['posterimage_field'],
+ '#options' => $imagefields,
+ '#description' => t('If an image is uploaded to the field above it will be used as the poster image.'),
+ '#empty_value' => NULL,
+ '#empty_option' => t('- None -'),
+ );
+ }
+
+ $form['posterimage_style'] = array(
+ '#title' => t('Poster image style'),
+ '#type' => 'select',
+ '#default_value' => $settings['posterimage_style'],
+ '#empty_option' => t('None (original image)'),
+ '#description' => t('The original video thumbnail will be displayed. Otherwise, you can add a custom image style at !settings.', array('!settings' => l(t('media image styles'), 'admin/config/media/image-styles'))),
+ '#options' => $image_styles,
+ );
+
+ return $form;
}
function videojs_field_formatter_settings_form_validate($form, $form_state) {
@@ -175,10 +221,29 @@ function videojs_field_formatter_settings_form_validate($form, $form_state) {
function videojs_field_formatter_settings_summary($field, $instance, $view_mode) {
$display = $instance['display'][$view_mode];
$settings = $display['settings'];
+ $image_styles = image_style_options(FALSE);
- return t('Player dimensions: @widthxheight', array(
+ $output = t('Player dimensions: @widthxheight', array(
'@widthxheight' => !empty($settings['width']) && !empty($settings['height']) ? $settings['width'] . 'x' . $settings['height'] : t('default'),
));
+
+ if (!empty($settings['posterimage_field'])) {
+ $imageinstance = field_info_instance($instance['entity_type'], $settings['posterimage_field'], $instance['bundle']);
+ if ($imageinstance != NULL) {
+ $output .= '
';
+ $output .= t('Poster image field') . ': ' . check_plain($imageinstance['label']);
+ }
+ }
+
+ $output .= '
';
+ if (isset($image_styles[$settings['posterimage_style']])) {
+ $output .= t('Poster image style') . ': ' . check_plain($image_styles[$settings['posterimage_style']]);
+ }
+ else {
+ $output .= t('Poster image style') . ': ' . t('None');
+ }
+
+ return $output;
}
/**