README

Pass in box sizes and get back sizes and coordinates for a nice justified layout like that seen all over Flickr. The explore page is a great example. Here's another example using the fullWidthBreakoutRowCadence option on Flickr's album page.

It converts this (simplified):

[0.5, 1.5, 1, 1.8, 0.4, 0.7, 0.9, 1.1, 1.7, 2, 2.1]

Into this (simplified):

{
    "containerHeight": 1269,
    "widowCount": 0,
    "boxes": [
        {
            "aspectRatio": 0.5,
            "top": 10,
            "width": 170,
            "height": 340,
            "left": 10
        },
        {
            "aspectRatio": 1.5,
            "top": 10,
            "width": 510,
            "height": 340,
            "left": 190
        },
        ...
    ]
}

Which gives you everything you need to make something like this:

Why?

Instead of relying on another JS dependency to apply those computations on the client side, this allows us to do them on server side (assuming we know the intended width of the container).

It does come with the constraint that reformating the window may have uninteded effect.

Install

composer require lychee-org/php-flickr-justified-layout

Easy Usage

use LycheeOrg\PhpFlickrJustifiedLayout\Contracts\AspectRatio;
use LycheeOrg\PhpFlickrJustifiedLayout\Contracts\WidthHeight;
use LycheeOrg\PhpFlickrJustifiedLayout\LayoutConfig;
use LycheeOrg\PhpFlickrJustifiedLayout\LayoutJustify;

/** @var Collection<AspectRatio>|Collection<WidthHeight> $in */
$in;
$layoutJustify = new LayoutJustify();
$config = new LayoutConfig();

$geometry = $layoutJustify->compute($in, $config);

Objects passed to the compute method must implement the AspectRatio or WidthHeight interface.

Configuration

See Config Object:

public function __construct(
    int $containerWidth = 1060,
    int|LeftRightTopBottom $containerPadding = 10,
    int|HorizontalVertical $boxSpacing = 10,
    int $targetRowHeight = 320,
    float $targetRowHeightTolerance = 0.25,
    false|int $maxNumRows = false,
    false|float $forceAspectRatio = false,
    bool $showWidows = true,
    false|int $fullWidthBreakoutRowCadence = false,
    string $widowLayoutStyle = 'left',
){...}

Open Source Community Support

We would like to thank Jetbrains for supporting us with their Open Source Development - Community Support program.