1. Go to this page and download the library: Download outerweb/image-library library. Choose the download type require.
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
outerweb / image-library example snippets
namespace App\Providers;
use Outerweb\ImageLibrary\Entities\AspectRatio;
use Outerweb\ImageLibrary\Entities\ImageContext;
use Outerweb\ImageLibrary\Enums\Breakpoint;
use Outerweb\ImageLibrary\Providers\ImageLibraryServiceProvider as BaseServiceProvider;
use Override;
class ImageLibraryServiceProvider extends BaseServiceProvider
{
#[Override]
public function imageContexts(): array
{
return [
// Profile picture - square aspect ratio, single image
ImageContext::make('profile_picture')
->label(fn (): string => __('Profile Picture'))
->aspectRatio(AspectRatio::make(1, 1))
->allowsMultiple(false),
// Gallery images - 16:9 aspect ratio, multiple images allowed
ImageContext::make('gallery')
->label(fn (): string => __('Gallery'))
->aspectRatio(AspectRatio::make(16, 9))
->allowsMultiple(true),
// Thumbnail - square with responsive sizing
ImageContext::make('thumbnail')
->label(fn (): string => __('Thumbnail'))
->aspectRatio(AspectRatio::make(1, 1))
->maxWidth([
Breakpoint::Small->value => 150,
Breakpoint::Medium->value => 200,
Breakpoint::Large->value => 250,
])
->allowsMultiple(false),
// Image that does not use breakpoints
ImageContext::make('no_breakpoints')
->label(fn (): string => __('No Breakpoints'))
->useBreakpoints(false)
];
}
}
// Single aspect ratio for all breakpoints
ImageContext::make('thumbnail')
->aspectRatio(AspectRatio::make(1, 1));
// Different aspect ratios per breakpoint
ImageContext::make('thumbnail')
->aspectRatio([
Breakpoint::Small->value => AspectRatio::make(1, 1),
Breakpoint::Medium->value => AspectRatio::make(4, 3),
Breakpoint::Large->value => AspectRatio::make(16, 9),
Breakpoint::ExtraLarge->value => AspectRatio::make(16, 9),
Breakpoint::DoubleExtraLarge->value => AspectRatio::make(2, 1),
]);
// Per breakpoint
ImageContext::make('thumbnail')
->aspectRatioForBreakpoint(Breakpoint::Small, AspectRatio::make(1, 1))
// From a Breakpoint and up
ImageContext::make('thumbnail')
->aspectRatioFromBreakpoint(Breakpoint::Medium, AspectRatio::make(16, 9))
// Up till a Breakpoint
ImageContext::make('thumbnail')
->aspectRatioUpToBreakpoint(Breakpoint::Large, AspectRatio::make(4, 3))
// Between two Breakpoints
ImageContext::make('thumbnail')
->aspectRatioBetweenBreakpoints(Breakpoint::Small, Breakpoint::Large, AspectRatio::make(1, 1));
// Single minimum width for all breakpoints
ImageContext::make('thumbnail')
->minWidth(150)
// Different minimum widths per breakpoint
ImageContext::make('thumbnail')
->minWidth([
Breakpoint::Small->value => 100,
Breakpoint::Medium->value => 150,
Breakpoint::Large->value => 200,
Breakpoint::ExtraLarge->value => 250,
Breakpoint::DoubleExtraLarge->value => 300,
]);
// Per breakpoint
ImageContext::make('thumbnail')
->minWidthForBreakpoint(Breakpoint::Small, 100);
// From a Breakpoint and up
ImageContext::make('thumbnail')
->minWidthFromBreakpoint(Breakpoint::Medium, 150);
// Up till a Breakpoint
ImageContext::make('thumbnail')
->minWidthUpToBreakpoint(Breakpoint::Large, 200);
// Between two Breakpoints
ImageContext::make('thumbnail')
->minWidthBetweenBreakpoints(Breakpoint::Small, Breakpoint::Large, 150);
// Single maximum width for all breakpoints
ImageContext::make('thumbnail')
->maxWidth(250);
// Different maximum widths per breakpoint
ImageContext::make('thumbnail')
->maxWidth([
Breakpoint::Small->value => 150,
Breakpoint::Medium->value => 200,
Breakpoint::Large->value => 250,
Breakpoint::ExtraLarge->value => 300,
Breakpoint::DoubleExtraLarge->value => 350,
]);
// Per breakpoint
ImageContext::make('thumbnail')
->maxWidthForBreakpoint(Breakpoint::Small, 150);
// From a Breakpoint and up
ImageContext::make('thumbnail')
->maxWidthFromBreakpoint(Breakpoint::Medium, 200);
// Up till a Breakpoint
ImageContext::make('thumbnail')
->maxWidthUpToBreakpoint(Breakpoint::Large, 250);
// Between two Breakpoints
ImageContext::make('thumbnail')
->maxWidthBetweenBreakpoints(Breakpoint::Small, Breakpoint::Large, 200);
// Single crop position for all breakpoints
ImageContext::make('thumbnail')
->cropPosition(CropPosition::Center);
// Different crop positions per breakpoint
ImageContext::make('thumbnail')
->cropPosition([
Breakpoint::Small->value => CropPosition::Top,
Breakpoint::Medium->value => CropPosition::Center,
Breakpoint::Large->value => CropPosition::Bottom,
Breakpoint::ExtraLarge->value => CropPosition::Center,
Breakpoint::DoubleExtraLarge->value => CropPosition::Center,
]);
// Per breakpoint
ImageContext::make('thumbnail')
->cropPositionForBreakpoint(Breakpoint::Small, CropPosition::Top);
// From a Breakpoint and up
ImageContext::make('thumbnail')
->cropPositionFromBreakpoint(Breakpoint::Medium, CropPosition::Center);
// Up till a Breakpoint
ImageContext::make('thumbnail')
->cropPositionUpToBreakpoint(Breakpoint::Large, CropPosition::Bottom);
// Between two Breakpoints
ImageContext::make('thumbnail')
->cropPositionBetweenBreakpoints(Breakpoint::Small, Breakpoint::Large, CropPosition::Center);
// Single blur value for all breakpoints
ImageContext::make('thumbnail')
->blur(10);
// Different blur values per breakpoint
ImageContext::make('thumbnail')
->blur([
Breakpoint::Small->value => 5,
Breakpoint::Medium->value => 10,
Breakpoint::Large->value => 15,
Breakpoint::ExtraLarge->value => 20,
Breakpoint::DoubleExtraLarge->value => 25,
]);
// Per breakpoint
ImageContext::make('thumbnail')
->blurForBreakpoint(Breakpoint::Small, 5);
// From a Breakpoint and up
ImageContext::make('thumbnail')
->blurFromBreakpoint(Breakpoint::Medium, 10);
// Up till a Breakpoint
ImageContext::make('thumbnail')
->blurUpToBreakpoint(Breakpoint::Large, 15);
// Between two Breakpoints
ImageContext::make('thumbnail')
->blurBetweenBreakpoints(Breakpoint::Small, Breakpoint::Large, 10);
// Single greyscale value for all breakpoints
ImageContext::make('thumbnail')
->greyscale(true); // or even ->grayscale(true)
// Different greyscale values per breakpoint
ImageContext::make('thumbnail')
->greyscale([
Breakpoint::Small->value => false,
Breakpoint::Medium->value => true,
Breakpoint::Large->value => false,
Breakpoint::ExtraLarge->value => true,
Breakpoint::DoubleExtraLarge->value => false,
]);
// Per breakpoint
ImageContext::make('thumbnail')
->greyscaleForBreakpoint(Breakpoint::Small, false); // or even ->grayscaleForBreakpoint(Breakpoint::Small, false);
// From a Breakpoint and up
ImageContext::make('thumbnail')
->greyscaleFromBreakpoint(Breakpoint::Medium, true); // or even ->grayscaleFromBreakpoint(Breakpoint::Medium, true);
// Up till a Breakpoint
ImageContext::make('thumbnail')
->greyscaleUpToBreakpoint(Breakpoint::Large, false); // or even ->grayscaleUpToBreakpoint(Breakpoint::Large, false);
// Between two Breakpoints
ImageContext::make('thumbnail')
->greyscaleBetweenBreakpoints(Breakpoint::Small, Breakpoint::Large, true); // or even ->grayscaleBetweenBreakpoints(Breakpoint::Small, Breakpoint::Large, true);
// Single sepia value for all breakpoints
ImageContext::make('thumbnail')
->sepia(true);
// Different sepia values per breakpoint
ImageContext::make('thumbnail')
->sepia([
Breakpoint::Small->value => false,
Breakpoint::Medium->value => true,
Breakpoint::Large->value => false,
Breakpoint::ExtraLarge->value => true,
Breakpoint::DoubleExtraLarge->value => false,
]);
// Per breakpoint
ImageContext::make('thumbnail')
->sepiaForBreakpoint(Breakpoint::Small, false);
// From a Breakpoint and up
ImageContext::make('thumbnail')
->sepiaFromBreakpoint(Breakpoint::Medium, true);
// Up till a Breakpoint
ImageContext::make('thumbnail')
->sepiaUpToBreakpoint(Breakpoint::Large, false);
// Between two Breakpoints
ImageContext::make('thumbnail')
->sepiaBetweenBreakpoints(Breakpoint::Small, Breakpoint::Large, true);
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
use Outerweb\ImageLibrary\Traits\HasImages;
class Product extends Model
{
use HasImages;
// Your model code...
}
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\MorphOne;
use Illuminate\Database\Eloquent\Relations\MorphMany;
use Outerweb\ImageLibrary\Models\Image;
use Outerweb\ImageLibrary\Traits\HasImages;
class Article extends Model
{
use HasImages;
/**
* Single featured image relationship
*/
public function featuredImage(): MorphOne
{
return $this->morphOne(Image::class, 'model')
->where('context', 'featured');
}
/**
* Multiple gallery images relationship
*/
public function galleryImages(): MorphMany
{
return $this->morphMany(Image::class, 'model')
->where('context', 'gallery');
}
/**
* Images for a specific layout block (useful for page builders)
*/
public function getLayoutBlockImages(int $blockId): MorphMany
{
return $this->images()
->whereJsonContains('custom_properties->layout_block_id', $blockId);
}
}
namespace App\Enums;
use Illuminate\Support\Str;
use Outerweb\ImageLibrary\Contracts\ConfiguresBreakpoints;
enum CustomBreakpoint: string implements ConfiguresBreakpoints
{
case Mobile = 'mobile';
case Tablet = 'tablet';
case Desktop = 'desktop';
case UltraWide = 'ultrawide';
public static function sortedCases(): array
{
return collect(self::cases())
->sort(fn ($a, $b) => $a->getMinWidth() <=> $b->getMinWidth())
->all();
}
public function getLabel(): string
{
return match ($this) {
self::Mobile => 'Mobile',
self::Tablet => 'Tablet',
self::Desktop => 'Desktop',
self::UltraWide => 'Ultra Wide',
};
}
public function getMinWidth(): int
{
return match ($this) {
self::Mobile => 320,
self::Tablet => 768,
self::Desktop => 1200,
self::UltraWide => 1920,
};
}
public function getMaxWidth(): ?int
{
$index = array_search($this, self::sortedCases(), true);
$next = self::sortedCases()[$index + 1] ?? null;
return $next ? $next->getMinWidth() - 1 : null;
}
public function getSlug(): string
{
return Str::of($this->value)
->lower()
->slug()
->toString();
}
}
use Outerweb\ImageLibrary\Facades\ImageLibrary;
// Basic upload using default settings
$sourceImage = ImageLibrary::upload($request->file('image'));
// The SourceImage is now stored and optimized, ready to be attached to models
// Upload to specific disk
$sourceImage = ImageLibrary::upload($request->file('image'), [
'disk' => 's3',
]);
// Upload with custom properties and metadata
$sourceImage = ImageLibrary::upload($request->file('image'), [
'disk' => 's3',
'custom_properties' => [
'photographer' => 'John Doe',
'license' => 'Creative Commons',
'shoot_date' => '2024-01-15',
'camera_model' => 'Canon EOS R5'
],
]);
// Upload the source image
$sourceImage = ImageLibrary::upload($request->file('image'));
// Get your model
$product = Product::find(1);
// Attach with a context
$image = $product->attachImage($sourceImage, [
'context' => 'thumbnail'
]);
// The image is now attached and will be processed according to the context configuration