Thumbnail of contact image?

Question

Our organization is a choir with around 60 people. We've been adding contact photos (using CiviCRM's built-in Contact Image feature) and I've made a roster page where we can see everyone's name & photos, but some of the images are pretty huge (in MB, not necessarily height/width) so the page with images seems to bog down browsers.

I noticed all the image URLs look like https://myhost.org/civicrm/contact/imagefile?photo=blah.jpeg, indicating that this is some kind of dynamic API? Is there documentation somewhere for it? Is it capable of resizing to thumbnails or something? When I do it with just CSS resizing on the fly, it seems like not a great solution.

I'm generating the roster list using something like this:

  $api->Contact->Get([
    'group' => $group_list,
    'sequential' => 1,
    'rowCount' => 10000,
    'return' => 'custom_4,display_name,email,phone,street_address,city,state_province,postal_code,id,image_URL',
    'sort' => 'custom_4,last_name,first_name'
  ]);

  $images = array_map( function($c) {
    return $c->image_URL ? sprintf('<img src="%s" style="width: 100px" alt="Profile image" />', $c->image_URL) : '';
  }, $api->values);

and I'm not sure whether there's any additional info in the API pertaining to the images either.

I'd love it if I could modify that URL to something like https://myhost.org/civicrm/contact/imagefile?photo=blah.jpeg&maxwidth=100 or something, is anything like that possible?

Answer 1

Try the Image Resize Extension:

This extension adds image resize capability to CiviCRM for Contact and Custom Field images. The extension handles resizing of all types of images and will put the images into the cache directory.

Also, an alternative to writing your own roster page from scratch is SearchKit which has this exact feature: you can create a Search Display of type "Grid", choose the number of columns for your grid and the size of each image in the grid.