-
Notifications
You must be signed in to change notification settings - Fork 85
/
hooks.php
184 lines (160 loc) · 6.37 KB
/
hooks.php
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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<?php
/**
* Hook callbacks used for Image Placeholders.
*
* @package dominant-color-images
*
* @since 1.0.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
/**
* Add the dominant color metadata to the attachment.
*
* @since 1.0.0
*
* @param array $metadata The attachment metadata.
* @param int $attachment_id The attachment ID.
* @return array $metadata The attachment metadata.
*/
function dominant_color_metadata( $metadata, $attachment_id ) {
$dominant_color_data = dominant_color_get_dominant_color_data( $attachment_id );
if ( ! is_wp_error( $dominant_color_data ) ) {
if ( isset( $dominant_color_data['dominant_color'] ) ) {
$metadata['dominant_color'] = $dominant_color_data['dominant_color'];
}
if ( isset( $dominant_color_data['has_transparency'] ) ) {
$metadata['has_transparency'] = $dominant_color_data['has_transparency'];
}
}
return $metadata;
}
add_filter( 'wp_generate_attachment_metadata', 'dominant_color_metadata', 10, 2 );
/**
* Filters various image attributes to add the dominant color to the image.
*
* @since 1.0.0
*
* @param array $attr Attributes for the image markup.
* @param object $attachment Image attachment post.
* @return mixed $attr Attributes for the image markup.
*/
function dominant_color_update_attachment_image_attributes( $attr, $attachment ) {
$image_meta = wp_get_attachment_metadata( $attachment->ID );
if ( ! is_array( $image_meta ) ) {
return $attr;
}
if ( isset( $image_meta['has_transparency'] ) ) {
$attr['data-has-transparency'] = $image_meta['has_transparency'] ? 'true' : 'false';
$class = $image_meta['has_transparency'] ? 'has-transparency' : 'not-transparent';
if ( empty( $attr['class'] ) ) {
$attr['class'] = $class;
} else {
$attr['class'] .= ' ' . $class;
}
}
if ( ! empty( $image_meta['dominant_color'] ) ) {
$attr['data-dominant-color'] = esc_attr( $image_meta['dominant_color'] );
$style_attribute = empty( $attr['style'] ) ? '' : $attr['style'];
$attr['style'] = '--dominant-color: #' . esc_attr( $image_meta['dominant_color'] ) . ';' . $style_attribute;
}
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'dominant_color_update_attachment_image_attributes', 10, 2 );
/**
* Filter image tags in content to add the dominant color to the image.
*
* @since 1.0.0
*
* @param string $filtered_image The filtered image.
* @param string $context The context of the image.
* @param int $attachment_id The attachment ID.
* @return string image tag
*/
function dominant_color_img_tag_add_dominant_color( $filtered_image, $context, $attachment_id ) {
// Only apply this in `the_content` for now, since otherwise it can result in duplicate runs due to a problem with full site editing logic.
if ( 'the_content' !== $context ) {
return $filtered_image;
}
// Only apply the dominant color to images that have a src attribute that
// starts with a double quote, ensuring escaped JSON is also excluded.
if ( ! str_contains( $filtered_image, ' src="' ) ) {
return $filtered_image;
}
// Ensure to not run the logic below in case relevant attributes are already present.
if ( str_contains( $filtered_image, ' data-dominant-color="' ) || str_contains( $filtered_image, ' data-has-transparency="' ) ) {
return $filtered_image;
}
$image_meta = wp_get_attachment_metadata( $attachment_id );
if ( ! is_array( $image_meta ) ) {
return $filtered_image;
}
/**
* Filters whether dominant color is added to the image.
*
* You can set this to false in order disable adding the dominant color to the image.
*
* @since 1.0.0
*
* @param bool $add_dominant_color Whether to add the dominant color to the image. default true.
* @param int $attachment_id The image attachment ID.
* @param array $image_meta The image meta data all ready set.
* @param string $filtered_image The filtered image. html including img tag
* @param string $context The context of the image.
*/
$check = apply_filters( 'dominant_color_img_tag_add_dominant_color', true, $attachment_id, $image_meta, $filtered_image, $context );
if ( ! $check ) {
return $filtered_image;
}
$data = '';
$extra_class = '';
if ( ! empty( $image_meta['dominant_color'] ) ) {
$data .= sprintf( 'data-dominant-color="%s" ', esc_attr( $image_meta['dominant_color'] ) );
if ( str_contains( $filtered_image, ' style="' ) ) {
$filtered_image = str_replace( ' style="', ' style="--dominant-color: #' . esc_attr( $image_meta['dominant_color'] ) . '; ', $filtered_image );
} else {
$filtered_image = str_replace( '<img ', '<img style="--dominant-color: #' . esc_attr( $image_meta['dominant_color'] ) . ';" ', $filtered_image );
}
}
if ( isset( $image_meta['has_transparency'] ) ) {
$transparency = $image_meta['has_transparency'] ? 'true' : 'false';
$data .= sprintf( 'data-has-transparency="%s" ', $transparency );
$extra_class = $image_meta['has_transparency'] ? 'has-transparency' : 'not-transparent';
}
if ( ! empty( $data ) ) {
$filtered_image = str_replace( '<img ', '<img ' . $data, $filtered_image );
}
if ( ! empty( $extra_class ) ) {
$filtered_image = str_replace( ' class="', ' class="' . $extra_class . ' ', $filtered_image );
}
return $filtered_image;
}
add_filter( 'wp_content_img_tag', 'dominant_color_img_tag_add_dominant_color', 20, 3 );
/**
* Add CSS needed for to show the dominant color as an image background.
*
* @since 1.0.0
*/
function dominant_color_add_inline_style() {
$handle = 'dominant-color-styles';
// PHPCS ignore reason: Version not used since this handle is only registered for adding an inline style.
// phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion
wp_register_style( $handle, false );
wp_enqueue_style( $handle );
$custom_css = 'img[data-dominant-color]:not(.has-transparency) { background-color: var(--dominant-color); }';
wp_add_inline_style( $handle, $custom_css );
}
add_filter( 'wp_enqueue_scripts', 'dominant_color_add_inline_style' );
/**
* Displays the HTML generator tag for the Image Placeholders plugin.
*
* See {@see 'wp_head'}.
*
* @since 1.0.0
*/
function dominant_color_render_generator() {
// Use the plugin slug as it is immutable.
echo '<meta name="generator" content="dominant-color-images ' . esc_attr( DOMINANT_COLOR_IMAGES_VERSION ) . '">' . "\n";
}
add_action( 'wp_head', 'dominant_color_render_generator' );