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
|
|
|
} |