Jump to content

Square images from portrait

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

Share this post

Link to post
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

Share this post

Link to post
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! :)



Share this post

Link to post
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"
        <img src="img/thumbs/2-1.jpg">

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

$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


  • Like 2

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By skeltern
      WebP image support is great and works fine. But once created I've issues to get rid of all API generated WebP variations.
      The backend image field variations "Delete" works and I can remove all variations JPEG plus WebP. Image list is clean but all WebP API variations are still stored in file system (for instance files/12345/84.900x675.webp etc). I can only use ImageSizer with temp 'force' option to request fresh WebP variations or have to delete WebP files from folders. No other way so far. Tested with 2 sites and latest master PW 3.0.165.
      Is there somewhere a "magic button" or config/setup thing to solve my sticky WebP issue?
    • By psy
      I've searched, and maybe missed, the solution. I have a 'normal' images field and uploading images with a file size greater than 10Kb is fine. Any image size smaller results in the never-ending spinner and no upload.
      No min/max width/height set on image uploads in admin, ie just the defaults.
      Any ideas on how to fix?
      PW: 3.0.175
      PHP: 7.3
      Marking it as "Resolved" rather than "Solved" as it auto-magically fixed itself. No idea whether PW, PHP, or just an internet hiccough... All good now 🤞
    • By totoff
      Dear all,
      tomorrow I'll have to introduce some editors on how to upload and edit images in image fields in Processwire. The site in question is quite image rich and I've spent some time to serve the appropriate images via scrcset already cropped for different screen sizes.
      However, the backend offers a lot of possibilities to manipulate images and most of them I'm not familiar with because as a developer I've never spent much thinking on what all the features might be good for … Yet I'm concerned that my editors work on images in the backend may interfere with my optimization strategies in the templates.
      Is there a general rule of thumb what content editors should do or not do with images in order not to break srcset strategies etc.? Maybe there is already a source of information you could point me to?
      Your recommendations are much appreciated!
    • By totoff
      Dear all,
      I'm upgrading an older side with the new custom fields for images feature as of 3.0.142. My image field is set to "Automatic" and holds a bunch of images together with their respective description on each page. New custom fields include "caption" among others and to make my live easier I I'm trying to populate "caption" with the value from the (default) description field. But unfortunately I can't seem to find out how to save the newly set values. This is my code:
      <?php foreach (page()->images as $image) { $image->set('caption', $image->description); bd($image->caption); echo files()->render("markup/views/view-card-image-fancybox.php", array('image'=>$image)); } ?> <?php $page->save(); bd($page->save()); ?> This sets the value as intended (see screenshot) but doesn't save it permanently to the database. What am I doing wrong?

    • By dalibor
      I'm using hook for retrieving data from image metadata (IPTC) after image upload and filling them to some fields. When I choose server-side image resize, everything works well. But when I use client-side resize (which si much faster and client comfortable  - it uses PWImageResizer.js) image metadata are lost during resizing - I have downloaded the file after resize and checked for EXIF, IPTC etc. and they are not present.  Using PW 3.0.165. Tried to look into PWImageResizer.js but uhh it's too javascreepy to me:) 
  • Create New...