Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<?php
/**
* Implements hook_field_formatter_info().
*/
function bg_image_formatter_field_formatter_info() {
$formatters = array(
'bg_image_formatter' => array(
'label' => t('Background image'),
'field types' => array('image', 'imagefield_crop'),
'settings' => array(
'image_style' => '',
'css_settings' => array(
'bg_image_selector' => 'body',
'bg_image_color' => '#FFFFFF',
'bg_image_x' => 'left',
'bg_image_y' => 'top',
'bg_image_attachment' => 'scroll',
'bg_image_repeat' => 'no-repeat',
'bg_image_background_size' => '',
'bg_image_background_size_ie8' => 0,
'bg_image_media_query' => 'all',
'bg_image_important' => 1
)
),
),
);
return $formatters;
}
/**
* Implements hook_field_formatter_settings_form().
*/
function bg_image_formatter_field_formatter_settings_form($field, $instance, $view_mode, $form, &$form_state) {
$display = $instance['display'][$view_mode];
$settings = $display['settings'];
// Options for repeating the image
$repeat_options = bg_image_css_repeat_options();
$image_styles = image_style_options();
$element['image_style'] = array(
'#title' => t('Image style'),
'#type' => 'select',
'#default_value' => $settings['image_style'],
'#empty_option' => t('None (original image)'),
'#options' => $image_styles,
);
// Fieldset for css settings
$element['css_settings'] = array(
'#type' => 'fieldset',
'#title' => t('Default CSS Settings'),
'#description' => t('Default CSS settings for outputting the background property. These settings will be concatenated to form a complete css statement that uses the "background" property. For more information on the css background property see http://www.w3schools.com/css/css_background.asp"'),
);
// The selector for the background property
$element['css_settings']['bg_image_selector'] = array(
'#type' => 'textfield',
'#title' => t('Selector'),
'#description' => t('A valid CSS selector that will be used to apply the background image.'),
'#default_value' => $settings['css_settings']['bg_image_selector'],
);
// The selector for the background property
$element['css_settings']['bg_image_color'] = array(
'#type' => 'textfield',
'#title' => t('Color'),
'#description' => t('The background color formatted as any valid css color format (e.g. hex, rgb, text, hsl) [<a href="http://www.w3schools.com/css/pr_background-color.asp">css property: background-color</a>]'),
'#default_value' => $settings['css_settings']['bg_image_color'],
);
// The selector for the background property
$element['css_settings']['bg_image_x'] = array(
'#type' => 'textfield',
'#title' => t('Horizontal Alignment'),
'#description' => t('The horizontal alignment of the background image formatted as any valid css alignment. [<a href="http://www.w3schools.com/css/pr_background-position.asp">css property: background-position</a>]'),
'#default_value' => $settings['css_settings']['bg_image_x'],
);
// The selector for the background property
$element['css_settings']['bg_image_y'] = array(
'#type' => 'textfield',
'#title' => t('Vertical Alignment'),
'#description' => t('The vertical alignment of the background image formatted as any valid css alignment. [<a href="http://www.w3schools.com/css/pr_background-position.asp">css property: background-position</a>]'),
'#default_value' => $settings['css_settings']['bg_image_y'],
);
// The selector for the background property
$element['css_settings']['bg_image_attachment'] = array(
'#type' => 'radios',
'#title' => t('Background Attachment'),
'#description' => t('The attachment setting for the background image. [<a href="http://www.w3schools.com/css/pr_background-attachment.asp">css property: background-attachment</a>]'),
'#options' => array('scroll' => 'Scroll', 'fixed' => 'Fixed'),
'#default_value' => $settings['css_settings']['bg_image_attachment'],
);
// The background-repeat property
$element['css_settings']['bg_image_repeat'] = array(
'#type' => 'radios',
'#title' => t('Background Repeat'),
'#description' => t('Define the repeat settings for the background image. [<a href="http://www.w3schools.com/css/pr_background-repeat.asp">css property: background-repeat</a>]'),
'#options' => $repeat_options,
'#default_value' => $settings['css_settings']['bg_image_repeat'],
);
// The background-size property
$element['css_settings']['bg_image_background_size'] = array(
'#type' => 'textfield',
'#title' => t('Background Size'),
'#description' => t('The size of the background (NOTE: CSS3 only. Useful for responsive designs) [<a href="http://www.w3schools.com/cssref/css3_pr_background-size.asp">css property: background-size</a>]'),
'#default_value' => $settings['css_settings']['bg_image_background_size'],
);
// background-size:cover suppor for IE8
$element['css_settings']['bg_image_background_size_ie8'] = array(
'#type' => 'checkbox',
'#title' => t('Add background-size:cover support for ie8'),
'#description' => t('The background-size css property is only supported on browsers that support CSS3. However, there is a workaround for IE using Internet Explorer\'s built-in filters (http://msdn.microsoft.com/en-us/library/ms532969%28v=vs.85%29.aspx). Check this box to add the filters to the css. Sometimes it works well, sometimes it doesn\'t. Use at your own risk'),
'#default_value' => $settings['css_settings']['bg_image_background_size_ie8'],
);
// The media query specifics
$element['css_settings']['bg_image_media_query'] = array(
'#type' => 'textfield',
'#title' => t('Media Query'),
'#description' => t('Apply this background image css using a media query. CSS3 Only. Useful for responsive designs. example: only screen and (min-width:481px) and (max-width:768px) [<a href="http://www.w3.org/TR/css3-mediaqueries/">Read about media queries</a>]'),
'#default_value' => $settings['css_settings']['bg_image_media_query'],
);
$element['css_settings']['bg_image_important'] = array(
'#type' => 'checkbox',
'#title' => t('Add "!important" to the background property.'),
'#description' => t('This can be helpful to override any existing background image or color properties added by the theme.'),
'#default_value' => $settings['css_settings']['bg_image_important'],
);
return $element;
}
/**
* Implements hook_field_formatter_settings_summary().
*/
function bg_image_formatter_field_formatter_settings_summary($field, $instance, $view_mode) {
$display = $instance['display'][$view_mode];
$settings = $display['settings'];
$summary = array();
$image_styles = image_style_options(FALSE);
// Unset possible 'No defined styles' option.
unset($image_styles['']);
// Styles could be lost because of enabled/disabled modules that defines
// their styles in code.
if (isset($image_styles[$settings['image_style']])) {
$summary[] = t('URL for image style: @style', array('@style' => $image_styles[$settings['image_style']]));
}
else {
$summary[] = t('Original image URL');
}
return implode('<br />', $summary);
}
/**
* Implements hook_field_formatter_view().
*/
function bg_image_formatter_field_formatter_view($entity_type, $entity, $field, $instance, $langcode, $items, $display) {
$element = array();
$settings = $display['settings'];
$css_settings = $settings['css_settings'];
switch ($display['type']) {
case 'bg_image_formatter':
foreach ($items as $delta => $item) {
$context = array('entity_type' => $entity_type, 'entity' => $entity, 'item' => $item);
// Let other module alter the CSS settings by implementing the hook:
// hook_bg_image_formatter_css_settings_alter().
drupal_alter('bg_image_formatter_css_settings', $css_settings, $context);
bg_image_add_background_image($item['uri'], $css_settings);