Square images from portrait

[Gazley]

Hi there,

I'm looking to render some square images that are based on portrait originals. When the image is selected, I'll display it in portrait mode but when the images are in a "summary" mode, I want them square. What would be the best way to generate a square image from a portrait original? FYI, I would ideally prefer these images to based on IMG tags and not background images.

Cheers!

[abdus]

15 minutes ago, Gazley said:

When the image is selected, I'll display it in portrait mode but when the images are in a "summary" mode, I want them square

How do you determine the $mode? What do you mean by selecting image?

Also, where will you display images? On page edit screen? Frontend?

Would a hook work for you?

<?php namespace ProcessWire;
// /site/ready.php

wire()->addHookMethod('Pageimage::mode', function (HookEvent $e) {
    $img = $e->object;
    $mode = $e->arguments(0)
    $size = $e->arguments(1) ?? 400;


    if ($mode === 'summary') {
        $e->return = $img->size($size, $size)->url; // 400x400 image
    } else {
        $e->return = $img->width($size)->url; // 400x600 (or longer) image
    }
});

// In your templates
?>
<img src="<?= $page->images->first->mode('summary') ?>" />
<img src="<?= $page->images->first->mode('summary', 600) ?>" />

 

[Gazley]

Hi @abdus ,

I mean that if a user clicks on the square image, I'll render it in a lightbox as a full portrait image (hence using the word "mode" which I can see now is a little confusing!).

By this, you'll now understand that I am talking about the square image being rendered in the front end of the system. Furthermore, I want to create a square image taking a crop from the center of the image, and if possible, trying to focus the crop around the main face in the original image.

Many thanks for your input!

 

 

[abdus]

Hmm, most lightboxes use <a> with an <img> inside. Href for <a> points to portrait image, and src of the image points to square image.

For instance: baguetteBox uses following scheme for responsive images (for non-responsive, remove data-at-# attributes)

<a href="img/2-1.jpg"
    data-at-450="img/thumbs/2-1.jpg"
    data-at-800="img/small/2-1.jpg"
    data-at-1366="img/medium/2-1.jpg"
    data-at-1920="img/big/2-1.jpg">
        <img src="img/thumbs/2-1.jpg">
</a>

This can be achieved with a code like this. You can modify hook to get rendered markup as well.

<?php
$image = $page->images->first;
$square = $image->size(400, 400); // cropped around center
$portrait = $image->width(600)->url; // non-cropped
$portrait2x = $image->width(1200)->url;

$markup = "<a href='$portrait' data-at-1200='$portrait2x'><img src='$square' /></a>";
echo $markup;

You can specify different crop location as a third argument to size() method

https://processwire.com/api/ref/pageimage/size/

[Gazley]

Hey, @abdus - that's awesome information! Thank you very much for highlighting the size method and the hooking approach too. I'll get a solution from what you have pointed out to me. Cheers!