Skip to content

Commit 397d96c

Browse files
Claudio-EmmoloClaudio-Emmolo
committed
Gallery, flex layout
1 parent ea16c72 commit 397d96c

File tree

3 files changed

+55
-56
lines changed

3 files changed

+55
-56
lines changed

‎README.md

+19-19
Original file line numberDiff line numberDiff line change
@@ -157,25 +157,25 @@ This will add an ID to every heading (h2, h3, h4 etc...) in your source.
157157

158158
Here is the list of the available parsers:
159159

160-
| Shortcode | Description | Parameters | Example |
161-
|----------------|-------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------|
162-
| `[twitter] ` | Get a Twitter card | `url` | `[twitter url="https://twitter.com/elonmusk/status/1585841080431321088"]` |
163-
| `[youtube]` | Get a Youtube (light) player | `url` | `[youtube url="https://www.youtube.com/watch?v=9bZkp7q19f0"]` |
164-
| `[spotify]` | Get a Spotify player | `url` or `uri` | `[spotify url="https://open.spotify.com/track/2TpxZ7JUBn3uw46aR7qd6V"]` |
165-
| `[faq]` | Create a `<details>` tag with embedded content | `title` | `[faq title="What is the answer to the ultimate question?"]42[/faq]` |
166-
| `[spoiler]` | Create a `<details>` tag with embedded content | `title` | `[spoiler title="Spoiler"]This is hidden content[/spoiler]` |
167-
| `[facebook]` | Get a Facebook card | `url` | `[facebook url="https://www.facebook.com/elonmusk/posts/10157744420210129"]` |
168-
| `[instagram]` | Get a Instagram card | `url` | `[instagram url="https://www.instagram.com/p/CApQfIjBGxC/"]` |
169-
| `[image]` | Create an image with `Image::class` model | `id`, `caption` (optional) | `[image id="123"]` |
170-
| `[gallery]` | Create a gallery image with `Image::class` model | `title`, `images` | Single or multiple images: `[gallery title="Gallery title here" images="1"]` or `[gallery title="Gallery title here" images="1,2,3"]` |
171-
| `[photo]` | Create a gallery image with `[Nova Media Hub](https://github.com/outl1ne/nova-media-hub)` model | `didascalia` `effect`(optional) `link`(optional) `shape`(optional) | Single or multiple images: `[photo didascalia="Gallery title here" id="1,2,3"] Effect [photo id="1,2,3" effect="carousel" link="https://..." shape="default |rounded"]` |
172-
| `[leggianche]` | Create a Read more div, based on `Article` or `Post` model | `id` | `[leggianche id="1"]` |
173-
| `[distico]` | Create a side text block, based on `Article` or `Post` model | `id` | `[distico id="1"]` |
174-
| `[button]` | Create a button that links to an URL | `link`, `label`, `level (optional)` | `[button link="https://www.google.com" label="Google" level="primary/secondary"]` |
175-
| `[tmdb]` | Create a TMDB card | `type`, `id` | `[tmdb type="movie/tv" id="123"]` |
176-
| `[widgetbay]` | Create a Widgetbay iframe | `id (optional)`, `link (optional)`, `forceLink (optional)`, `title (optional)` | `[widgetbay id="1"]` `[widgetbay title="Product Title" link="https://www.amazon.it/product?tag="41515&subtag="5151"..."]` |
177-
| `[index]` | Create an automatic index based on Heading (h2, h3, h4 etc...) | none | `[index]` |
178-
| `[trivia]` | Create a trivia | `id` | `[trivia id="1"]` |
160+
| Shortcode | Description | Parameters | Example |
161+
|----------------|-------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
162+
| `[twitter] ` | Get a Twitter card | `url` | `[twitter url="https://twitter.com/elonmusk/status/1585841080431321088"]` |
163+
| `[youtube]` | Get a Youtube (light) player | `url` | `[youtube url="https://www.youtube.com/watch?v=9bZkp7q19f0"]` |
164+
| `[spotify]` | Get a Spotify player | `url` or `uri` | `[spotify url="https://open.spotify.com/track/2TpxZ7JUBn3uw46aR7qd6V"]` |
165+
| `[faq]` | Create a `<details>` tag with embedded content | `title` | `[faq title="What is the answer to the ultimate question?"]42[/faq]` |
166+
| `[spoiler]` | Create a `<details>` tag with embedded content | `title` | `[spoiler title="Spoiler"]This is hidden content[/spoiler]` |
167+
| `[facebook]` | Get a Facebook card | `url` | `[facebook url="https://www.facebook.com/elonmusk/posts/10157744420210129"]` |
168+
| `[instagram]` | Get a Instagram card | `url` | `[instagram url="https://www.instagram.com/p/CApQfIjBGxC/"]` |
169+
| `[image]` | Create an image with `Image::class` model | `id`, `caption` (optional) | `[image id="123"]` |
170+
| `[gallery]` | Create a gallery image with `Image::class` model | `title`, `images` | Single or multiple images: `[gallery title="Gallery title here" images="1"]` or `[gallery title="Gallery title here" images="1,2,3"]` |
171+
| `[photo]` | Create a gallery image with `[Nova Media Hub](https://github.com/outl1ne/nova-media-hub)` model | `didascalia` `effect`(optional) `link`(optional) `shape`(optional) | Single or multiple images: `[photo didascalia="Gallery title here" id="1,2,3"] Effect [photo id="1,2,3" effect="carousel - juxtapose - gallery-flex" link="https://..." shape="default |rounded"]` |
172+
| `[leggianche]` | Create a Read more div, based on `Article` or `Post` model | `id` | `[leggianche id="1"]` |
173+
| `[distico]` | Create a side text block, based on `Article` or `Post` model | `id` | `[distico id="1"]` |
174+
| `[button]` | Create a button that links to an URL | `link`, `label`, `level (optional)` | `[button link="https://www.google.com" label="Google" level="primary/secondary"]` |
175+
| `[tmdb]` | Create a TMDB card | `type`, `id` | `[tmdb type="movie/tv" id="123"]` |
176+
| `[widgetbay]` | Create a Widgetbay iframe | `id (optional)`, `link (optional)`, `forceLink (optional)`, `title (optional)` | `[widgetbay id="1"]` `[widgetbay title="Product Title" link="https://www.amazon.it/product?tag="41515&subtag="5151"..."]` |
177+
| `[index]` | Create an automatic index based on Heading (h2, h3, h4 etc...) | none | `[index]` |
178+
| `[trivia]` | Create a trivia | `id` | `[trivia id="1"]` |
179179

180180
### Note for Facebook
181181

‎resources/views/new-gallery.blade.php

+26-29
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,48 @@
11
<div class="w-full">
22
<div class="
3-
grid grid-cols-4 grid-rows-2 not-prose sm:px-0">
3+
{{$flexGallery ? 'flex' : 'grid grid-cols-4 grid-rows-2'}} not-prose sm:px-0">
44
@foreach ($images as $image)
5-
@if ($loop->iteration <= 5)
5+
@if ($loop->iteration <= $imageToDisplay)
66
<a class="
7+
@if(!$flexGallery)
8+
@if($loop->count >= 5)
9+
@if($loop->iteration == 1)
10+
col-span-2 row-span-2
11+
@endif
12+
@endif
713
8-
@if($loop->count >= 5)
9-
@if($loop->iteration == 1)
10-
col-span-2 row-span-2
11-
@endif
12-
@endif
13-
14-
@if($loop->count == 4)
15-
row-span-2
16-
@endif
17-
18-
@if($loop->count == 3)
19-
@if ($loop->iteration == 1)
20-
col-span-2
21-
@endif
22-
row-span-2
23-
@endif
14+
@if($loop->count == 4) row-span-2 @endif
2415
25-
@if($loop->count == 2)
26-
col-span-2 row-span-2
27-
@endif
16+
@if($loop->count == 3)
17+
@if ($loop->iteration == 1)
18+
col-span-2
19+
@endif
20+
row-span-2
21+
@endif
2822
29-
glightbox hover:brightness-110 relative"
23+
@if($loop->count == 2) col-span-2 row-span-2 @endif
24+
@endif
25+
glightbox hover:brightness-110 relative"
3026
href="{{ asset('storage/' . $image->src )}}"
3127
data-glightbox="{{ addslashes($image->title) }}">
32-
<img class="aspect-square relative object-cover w-full h-full cursor-pointer"
33-
src="{{ asset('storage/' . $image->src )}}?height=400"
34-
alt="{{ $image->alt }}"
35-
title="Clicca per vedere l'immagine originale"
28+
<img
29+
class="{{$flexGallery ? '' : 'aspect-square'}} relative object-cover w-full h-full cursor-pointer"
30+
src="{{ asset('storage/' . $image->src )}}?height=400"
31+
alt="{{ $image->alt }}"
32+
title="Clicca per vedere l'immagine originale"
3633
loading="lazy" decoding="async"/>
3734
{{-- Hover Count --}}
38-
@if ($loop->iteration == 5 && $loop->count > 5)
35+
@if ($loop->iteration == $imageToDisplay && $loop->count > $imageToDisplay)
3936
<div
4037
class="absolute inset-0 flex items-center justify-center font-black text-white bg-red-500/50">
41-
+{{ $loop->count - 5 }}
38+
+{{ $loop->count - $imageToDisplay }}
4239
</div>
4340
@endif
4441

4542
</a>
4643

4744
{{-- Hidden images --}}
48-
@else($loop->iteration > 5)
45+
@else
4946
<a href="{{ asset('storage/' . $image->src) }}" class="hidden glightbox"></a>
5047
@endif
5148
@endforeach

‎src/Shortcodes/PhotoShortcode.php

+10-8
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ class PhotoShortcode
66
{
77
public function register($shortcode): string
88
{
9-
if (! class_exists('\Outl1ne\NovaMediaHub\Models\Media')) {
9+
if (!class_exists('\Outl1ne\NovaMediaHub\Models\Media')) {
1010
return '';
1111
}
1212

@@ -23,7 +23,7 @@ public function register($shortcode): string
2323
});
2424

2525
foreach ($images as $key => $image) {
26-
$images[$key]['src'] = $image->path.$image->file_name;
26+
$images[$key]['src'] = $image->path . $image->file_name;
2727
$images[$key]['title'] = $image['data']['title'][0] ?? null;
2828
$images[$key]['alt'] = $image['data']['alt'][0] ?? null;
2929
}
@@ -37,17 +37,19 @@ public function register($shortcode): string
3737
return view('shortcode-plus::juxtapose', compact('images', 'title'))->render();
3838
}
3939

40-
return view('shortcode-plus::new-gallery', compact('images', 'title'))->render();
40+
$flexGallery = $shortcode->effect == 'gallery-flex' ? true : false;
41+
$imageToDisplay = $flexGallery ? 3 : 5;
42+
return view('shortcode-plus::new-gallery', compact('images', 'title', 'flexGallery', 'imageToDisplay'))->render();
4143
}
4244
}
4345

4446
// Single image
4547
$media = \Outl1ne\NovaMediaHub\Models\Media::find($shortcode->id);
46-
if (! $media) {
48+
if (!$media) {
4749
return '';
4850
}
4951

50-
$path = $media->path.$media->file_name;
52+
$path = $media->path . $media->file_name;
5153
$align = $shortcode->align ?? null;
5254
$link = $shortcode->link ? str_replace("'", '%27', $shortcode->link) : null;
5355
$shape = $shortcode->shape ?? null;
@@ -64,7 +66,7 @@ public function register($shortcode): string
6466
if (is_array($credits)) {
6567
$credits = $credits[0];
6668
}
67-
$alt = $media->data['alt'] ?? 'Immagine id '.$shortcode->id;
69+
$alt = $media->data['alt'] ?? 'Immagine id ' . $shortcode->id;
6870
if (is_array($alt)) {
6971
$alt = $alt[0];
7072
}
@@ -93,10 +95,10 @@ public function register($shortcode): string
9395
public static function getImageHeight(string $path, int $width = 0): float|int
9496
{
9597

96-
$localPath = storage_path('app/public/'.$path);
98+
$localPath = storage_path('app/public/' . $path);
9799

98100
// Check if file exists
99-
if (! file_exists($localPath)) {
101+
if (!file_exists($localPath)) {
100102
return 0;
101103
}
102104

0 commit comments

Comments
 (0)