PHP code example of outerweb / image-library

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)
        ];
    }
}

ImageContext::make('thumbnail')
    ->label(fn() => __('Thumbnail'))

ImageContext::make('thumbnail')
    ->label(fn(ImageContext $context) => __('Image Context: :context', ['context' => $context->key]))

ImageContext::make('gallery')
    ->allowsMultiple(true);

ImageContext::make('thumbnail')
    ->generateWebP(false);

ImageContext::make('thumbnail')
    ->useBreakpoints(false);

ImageContext::make('thumbnail')
    ->generateResponsiveVersions(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();
    }
}

'enums' => [
    'breakpoint' => App\Enums\CustomBreakpoint::class,
],

'use_breakpoints' => false,

ImageContext::make('thumbnail')
    ->useBreakpoints(false);

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

// Attach with multilingual alt text
$image = $product->attachImage($sourceImage, [
    'context' => 'featured_image',
    'alt_text' => [
        'en' => 'Taylor Otwell driving his lamborghini',
        'nl' => 'Taylor Otwell rijdt in zijn lamborghini',
    ]
]);

// Attach with custom properties and metadata
$image = $product->attachImage($sourceImage, [
    'context' => 'gallery',
    'custom_properties' => [
        'photographer' => 'Jane Smith',
        'copyright' => '© 2024 Company Name',
        'location' => 'Swiss Alps',
        'camera_settings' => [
            'aperture' => 'f/2.8',
            'shutter_speed' => '1/500s',
            'iso' => 200
        ]
    ],
    'alt_text' => [
        'en' => 'Mountain landscape photography'
    ]
]);

$image = $product->attachImage($sourceImage, [
    'context' => 'featured'
], 'featuredImage');

// Get all images
$images = $product->images;

// Query images by context
$thumbnails = $product->images()
    ->where('context', 'thumbnail')
    ->get();

// Query images with specific custom properties
$landscapeImages = $product->images()
    ->where('context', 'gallery')
    ->whereJsonContains('custom_properties->layout_builder_block_id', $blockId)
    ->get();
bash
php artisan image-library:install
bash
php artisan image-library:generate
bash
php artisan image-library:generate {id}
bash
php artisan image-library:generate {id1} {id2} {id3}