Jump to content

Square images from portrait


Gazley
 Share

Recommended Posts

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! :)

Link to comment
Share on other sites

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) ?>" />

 

  • Like 2
Link to comment
Share on other sites

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! :)

 

 

Link to comment
Share on other sites

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/

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...