Skip to content

Commit

Permalink
Showing 2 changed files with 75 additions and 8 deletions.
20 changes: 18 additions & 2 deletions resources/views/components/img.blade.php
Original file line number Diff line number Diff line change
@@ -1,7 +1,23 @@
@props([
'conversion' => null,
'responsive' => true,
'loading' => 'lazy',
'media',
])
<img {!! $attributes !!} src="{{ $media->getUrl($conversion) }}"
@if ($responsive) srcset="{{ $media->getSrcset()->join(', ') }}" @endif>

<img {!! $attributes !!} src="{{ $media->getUrl($conversion) }}" loading="{{ $loading }}"
height="{{ $media->getHeight($conversion) }}" width="{{ $media->getWidth($conversion) }}"
alt="{{ $media->getName($conversion) }}"
@if ($responsive) srcset="{{ $media->getSrcset($conversion)->join(', ') }}"
x-data="{
sizes: '1px',
resize() {
this.$nextTick(() => {
setTimeout(() => {
size = this.$el.getBoundingClientRect().width ?? 1;
this.sizes = Math.ceil(size / window.innerWidth * 100) + 'vw';
}, 50);
});
}
}"
x-intersect.once="resize" x-bind:sizes="sizes" @endif>
63 changes: 57 additions & 6 deletions src/Models/Media.php
Original file line number Diff line number Diff line change
@@ -64,7 +64,8 @@ class Media extends Model
public static function booted()
{
static::deleted(function (Media $media) {
$media->generated_conversions
$media
->generated_conversions
->each(fn (GeneratedConversion $generatedConversion) => $generatedConversion->delete());
$media->deleteDirectory();
});
@@ -154,6 +155,51 @@ public function getUrl(?string $conversion = null): ?string
return null;
}

public function getWidth(?string $conversion = null): ?int
{
if ($conversion) {
return $this->getGeneratedConversion($conversion)?->width;
}

return $this->width;
}

public function getHeight(?string $conversion = null): ?int
{
if ($conversion) {
return $this->getGeneratedConversion($conversion)?->height;
}

return $this->height;
}

public function getName(?string $conversion = null): ?string
{
if ($conversion) {
return $this->getGeneratedConversion($conversion)?->name;
}

return $this->name;
}

public function getSize(?string $conversion = null): ?int
{
if ($conversion) {
return $this->getGeneratedConversion($conversion)?->size;
}

return $this->size;
}

public function getAspectRatio(?string $conversion = null): ?float
{
if ($conversion) {
return $this->getGeneratedConversion($conversion)?->aspect_ratio;
}

return $this->aspect_ratio;
}

/**
* Retreive the temporary url of a conversion or nested conversion
* Ex: $media->getUrl('poster.480p')
@@ -391,20 +437,25 @@ public function deleteGeneratedConversions(): static
return $this;
}

public function getResponsiveImages(): Collection
public function getResponsiveImages(?string $conversion = null): Collection
{
return collect(ResponsiveImagesConversionsPreset::$widths)
->map(fn (int $width) => $this->getGeneratedConversion($width))
->when($conversion,
fn (Collection $collection) => $collection->map(fn (int $width) => $this->getGeneratedConversion("{$conversion}.{$width}")),
fn (Collection $collection) => $collection->map(fn (int $width) => $this->getGeneratedConversion($width)),
)
->filter();
}

/**
* Exemple: elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w
*/
public function getSrcset(): Collection
public function getSrcset(?string $conversion = null): Collection
{
return $this->getResponsiveImages()
->map(fn (GeneratedConversion $generatedConversion) => $generatedConversion->getUrl().' '.$generatedConversion->width.'w');
return $this
->getResponsiveImages($conversion)
->filter(fn (GeneratedConversion $generatedConversion) => $generatedConversion->getUrl())
->map(fn (GeneratedConversion $generatedConversion) => "{$generatedConversion->getUrl()} {$generatedConversion->width}w");
}

/**

0 comments on commit d076809

Please sign in to comment.