|
1
|
|
|
<?php |
|
2
|
|
|
|
|
3
|
|
|
|
|
4
|
|
|
namespace App\Services\Snippets; |
|
5
|
|
|
|
|
6
|
|
|
/* |
|
7
|
|
|
This class show a Masonry (Pinterest like) responsive gallery. |
|
8
|
|
|
|
|
9
|
|
|
Example of snippet that evoke the plugin: |
|
10
|
|
|
{# gallery name=[pere] hover_animate=[true] #} |
|
11
|
|
|
|
|
12
|
|
|
The snippet can be placed in any blog post. |
|
13
|
|
|
|
|
14
|
|
|
The gallery is using this javascript plugin: |
|
15
|
|
|
// https://www.npmjs.com/package/justifiedGallery |
|
16
|
|
|
// http://miromannino.github.io/Justified-Gallery/ |
|
17
|
|
|
// Options: http://miromannino.github.io/Justified-Gallery/options-and-events/ |
|
18
|
|
|
*/ |
|
19
|
|
|
|
|
20
|
|
|
use App\Helpers\Helper; |
|
21
|
|
|
use App\Models\Post; |
|
22
|
|
|
|
|
23
|
|
|
class GalleryMasonryService |
|
24
|
|
|
{ |
|
25
|
|
|
|
|
26
|
|
|
/** |
|
27
|
|
|
* Substitute gallery snippets with the related HTML |
|
28
|
|
|
* |
|
29
|
|
|
* @param string $postBody |
|
30
|
|
|
* @param \App\Models\Post $post |
|
31
|
|
|
* |
|
32
|
1 |
|
* @return string |
|
33
|
|
|
*/ |
|
34
|
|
|
public function snippetsToHTML(string $postBody, Post $post): string |
|
35
|
|
|
{ |
|
36
|
1 |
|
// Find snippet occurrences |
|
37
|
|
|
//$ptn = '/{# +gallery +(name|width)=\[(.*)\] +(name|width)=\[(.*)\] +(name|width)=\[(.*)\] +#}/'; |
|
38
|
1 |
|
$ptn = '/{# +gallery +(name|hover_animate)=\[(.*)\] +(name|hover_animate)=\[(.*)\] +#}/'; |
|
39
|
|
|
|
|
40
|
|
|
if (preg_match_all($ptn, $postBody, $matches)) { |
|
41
|
|
|
// Transform the matches array in a way that can be used |
|
42
|
|
|
$matches = Helper::turnArray($matches); |
|
43
|
|
|
|
|
44
|
|
|
foreach ($matches as $key => $single_gallery_matches) { |
|
45
|
|
|
$parameters = $this->getParameters($single_gallery_matches); |
|
46
|
|
|
|
|
47
|
|
|
if (self::postHasGallery($post, $parameters['gallery_name'])) { |
|
|
|
|
|
|
48
|
|
|
$images = $this->createImagesArray($post, $parameters['gallery_name']); |
|
49
|
|
|
$galleryHtml = $this->prepareGalleryHtml($images, $parameters['hover_animate']); |
|
50
|
|
|
} else { |
|
51
|
|
|
$galleryHtml = "<div class='p-4 bg-yellow-200' role='alert'>A gallery with this name not available for this element</div>"; |
|
52
|
|
|
} |
|
53
|
|
|
|
|
54
|
|
|
$galleryHtml .= "</div>"; |
|
55
|
|
|
|
|
56
|
|
|
// Replace the TOKEN found in the article with the generatd gallery HTML |
|
57
|
|
|
$postBody = str_replace($parameters['token'], $galleryHtml, $postBody); |
|
58
|
|
|
} |
|
59
|
|
|
} else { |
|
60
|
1 |
|
$postBody = $postBody; |
|
61
|
|
|
} |
|
62
|
|
|
|
|
63
|
1 |
|
return $postBody; |
|
64
|
|
|
} |
|
65
|
|
|
|
|
66
|
|
|
/** |
|
67
|
|
|
* Returns the plugin parameters. |
|
68
|
|
|
* |
|
69
|
|
|
* @param array $matches |
|
70
|
|
|
* |
|
71
|
|
|
* @return array $ret |
|
72
|
|
|
*/ |
|
73
|
|
|
public function getParameters(array $matches): array |
|
74
|
|
|
{ |
|
75
|
|
|
$ret = []; |
|
76
|
|
|
//ray($matches); |
|
77
|
|
|
|
|
78
|
|
|
// Get activation string parameters (from article) |
|
79
|
|
|
$ret['token'] = $matches[0]; |
|
80
|
|
|
|
|
81
|
|
|
$ret['gallery_name'] = $matches[2]; |
|
82
|
|
|
$ret['hover_animate'] = filter_var($matches[4], FILTER_VALIDATE_BOOLEAN); |
|
83
|
|
|
|
|
84
|
|
|
//ray($ret); |
|
85
|
|
|
return $ret; |
|
86
|
|
|
} |
|
87
|
|
|
|
|
88
|
|
|
/** |
|
89
|
|
|
* Returns true if the post has the specified gallery. |
|
90
|
|
|
* |
|
91
|
|
|
* @param \App\Models\Post $post |
|
92
|
|
|
* @param string $galleryName |
|
93
|
|
|
* |
|
94
|
|
|
* @return bool $ret |
|
95
|
|
|
*/ |
|
96
|
|
|
public function postHasGallery(Post $post, string $galleryName): bool |
|
97
|
|
|
{ |
|
98
|
|
|
if (in_array($galleryName, self::getGalleryNames($post))) { |
|
|
|
|
|
|
99
|
|
|
return true; |
|
100
|
|
|
} |
|
101
|
|
|
return false; |
|
102
|
|
|
} |
|
103
|
|
|
|
|
104
|
|
|
/** |
|
105
|
|
|
* Return the array with the gallery names. |
|
106
|
|
|
* The gallery names are set as an image property. |
|
107
|
|
|
* |
|
108
|
|
|
* @param \App\Models\Post $post |
|
109
|
|
|
* |
|
110
|
|
|
* @return array |
|
111
|
|
|
*/ |
|
112
|
|
|
public function getGalleryNames(Post $post): array |
|
113
|
|
|
{ |
|
114
|
|
|
$galleries = []; |
|
115
|
|
|
foreach ($post->getMedia('images') as $image) { |
|
116
|
|
|
$galleries[$image->getCustomProperty('image_gallery')] = $image->getCustomProperty('image_gallery'); |
|
117
|
|
|
} |
|
118
|
|
|
return array_values($galleries); |
|
119
|
|
|
} |
|
120
|
|
|
|
|
121
|
|
|
/** |
|
122
|
|
|
* Return the array with the gallery images. |
|
123
|
|
|
* |
|
124
|
|
|
* @param \App\Models\Post $post |
|
125
|
|
|
* @param string $galleryName |
|
126
|
|
|
* |
|
127
|
|
|
* @return array |
|
128
|
|
|
*/ |
|
129
|
|
|
public function getGalleryImages(Post $post, string $galleryName): array |
|
130
|
|
|
{ |
|
131
|
|
|
$galleryImages = []; |
|
132
|
|
|
foreach ($post->getMedia('images') as $image) { |
|
133
|
|
|
if ($image->getCustomProperty('image_gallery') == $galleryName) { |
|
134
|
|
|
$galleryImages[] = $image; |
|
135
|
|
|
} |
|
136
|
|
|
} |
|
137
|
|
|
return $galleryImages; |
|
138
|
|
|
} |
|
139
|
|
|
|
|
140
|
|
|
|
|
141
|
|
|
/** |
|
142
|
|
|
* Create images array. |
|
143
|
|
|
* |
|
144
|
|
|
* @param \App\Models\Post $post |
|
145
|
|
|
* @param string $galleryName |
|
146
|
|
|
* |
|
147
|
|
|
* @return array $ret array with the images datas |
|
148
|
|
|
*/ |
|
149
|
|
|
public function createImagesArray(Post $post, string $galleryName): array |
|
150
|
|
|
{ |
|
151
|
|
|
$images = self::getGalleryImages($post, $galleryName); |
|
|
|
|
|
|
152
|
|
|
|
|
153
|
|
|
// Order by image name |
|
154
|
|
|
//sort($image_files); |
|
155
|
|
|
|
|
156
|
|
|
$ret = []; |
|
157
|
|
|
|
|
158
|
|
|
foreach ($images as $k => $image) { |
|
159
|
|
|
$ret[$k]['file_path'] = $image->getUrl(); |
|
160
|
|
|
$ret[$k]['thumb_path'] = $image->getUrl('thumb'); |
|
161
|
|
|
|
|
162
|
|
|
$ret[$k]['description'] = $image->getCustomProperty('image_description'); |
|
163
|
|
|
$ret[$k]['video_link'] = $image->getCustomProperty('image_video_url'); |
|
164
|
|
|
$ret[$k]['caption'] = $image->getCustomProperty('image_caption'); |
|
165
|
|
|
} |
|
166
|
|
|
|
|
167
|
|
|
return $ret; |
|
168
|
|
|
} |
|
169
|
|
|
|
|
170
|
|
|
/** |
|
171
|
|
|
* Prepare the gallery HTML. |
|
172
|
|
|
* |
|
173
|
|
|
* @param array $images |
|
174
|
|
|
* @param bool $hoverAnimate |
|
175
|
|
|
* |
|
176
|
|
|
* @return string $ret |
|
177
|
|
|
*/ |
|
178
|
|
|
public function prepareGalleryHtml(array $images, bool $hoverAnimate): string |
|
179
|
|
|
{ |
|
180
|
|
|
// Animate item on hover |
|
181
|
|
|
$itemClass = ($hoverAnimate) ? 'transform transition hover:scale-110 motion-reduce:transform-none duration-500' : ''; |
|
182
|
|
|
|
|
183
|
|
|
// Create Grid—A—Licious grid (id=devices) and print images |
|
184
|
|
|
$ret = "<div class='lifeGallery'>"; |
|
185
|
|
|
|
|
186
|
|
|
foreach ($images as $k => $image) { |
|
187
|
|
|
// Get item link |
|
188
|
|
|
$imageLink = ($image['video_link'] == null) ? $image['file_path'] : $image['video_link']; |
|
189
|
|
|
$videoPlayIcon = ($image['video_link'] == null) ? '' : "<svg class='absolute w-14 fill-current text-white inset-center opacity-80' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M371.7 238l-176-107c-15.8-8.8-35.7 2.5-35.7 21v208c0 18.4 19.8 29.8 35.7 21l176-101c16.4-9.1 16.4-32.8 0-42zM504 256C504 119 393 8 256 8S8 119 8 256s111 248 248 248 248-111 248-248zm-448 0c0-110.5 89.5-200 200-200s200 89.5 200 200-89.5 200-200 200S56 366.5 56 256z'/></svg>"; |
|
190
|
|
|
|
|
191
|
|
|
$ret .= "<div class='item " . $itemClass . "'>"; |
|
192
|
|
|
$ret .= "<a href='" . $imageLink . "' data-fancybox='images' data-caption='" . $image['description'] . "'>"; |
|
193
|
|
|
$ret .= "<img src='" . asset($image['thumb_path']) . "' />"; |
|
194
|
|
|
$ret .= $videoPlayIcon; |
|
195
|
|
|
$ret .= "</a>"; |
|
196
|
|
|
if ($image['caption']) { |
|
197
|
|
|
$ret .= "<div class='jg-caption'>" . $image['caption'] . "</div>"; |
|
198
|
|
|
} |
|
199
|
|
|
$ret .= "</div>"; |
|
200
|
|
|
} |
|
201
|
|
|
|
|
202
|
|
|
$ret .= '</div>'; |
|
203
|
|
|
|
|
204
|
|
|
return $ret; |
|
205
|
|
|
} |
|
206
|
|
|
|
|
207
|
|
|
} |