addHookMethod example for Pageimage(s)

[szabesz]

Hi PW fanatics

In this post I share two of my addHookMethods for those interested. As you surely already know (if not, time to take a look at it) the Wire::addHookMethod() and the Wire::addHookProperty() API methods can be used to "breath some extra OOP" into your projects.

Using addHookMethods and addHookProperty are alternatives to "Using custom page types in ProcessWire".

The methods I want to share: basically the idea here is to get the URL pointing to images uploaded in the admin without writing much code in the template files. With methods like these below, it does not matter what Formatted value is set to the images, because some predefined defaults are used in all circumstances.

#1 Example
template file code:

<?php $img_src = $latest_article->siteFeaturedImage(); ?>
<img src="<?= $img_src ?>" alt="<?= $page->title ?>">

addHookMethod goes into /site/init.php

<?php 
/* Returns URL of the original Pageimage of Article.
 * Image field's value can be either null (default missing image), Pageimage or Pageimages.
 * 
 * @return string 
 */
$wire->addHookMethod('Page::siteFeaturedImage', function($event) {
	$page = $event->object;
	if ($page->template != "article") {
		throw new WireException("Page::siteFeaturedImage() only works on 'Pages of article template', Page ID=$page is not such!");
	}
	$article_featured = $page->getUnformatted('article_featured'); //always a Pageimages array
	if (count($article_featured)) {
		$img_url = $article_featured->first()->url;
	} else {
		$img_url = urls()->templates . "assets/img/missing-article_image.jpg"; //we show this when image is not available
	}
	$event->return = $img_url;
});
?>

#2 Example
template file code:

<?php $img600_src = $page->siteProductImageMaxSize(600, 600, ['rotate' => 180]); ?>
<img src="<?= $img600_src ?>" alt="<?= $page->title ?>">

addHookMethod goes into /site/init.php

<?php 
/* Generates image variations for Product images. Returns URL of Pageimage.
 * Image field's value can be either null (default missing image), Pageimage or Pageimages.
 * 
 * @param int arguments[0] Max allowed width
 * @param int arguments[1] Max allowed height
 * @param array arguments[2] See `Pageimage::size()` method for options
 * @return string 
 */
$wire->addHookMethod('Page::siteProductImageMaxSize', function($event) {
	$page = $event->object;
	if ($page->template != "product") {
		throw new WireException("Page::siteProductImageMaxSize() only works on 'Pages of product template', Page ID=$page is not such!");
	}
	$width = isset($event->arguments[0]) ? $event->arguments[0] : 48; //default width
	$height = isset($event->arguments[1]) ? $event->arguments[1] : 48; //default height
	$options = isset($event->arguments[2]) ? $event->arguments[2] : $options = array(); //default empty options
	$product_image = $page->getUnformatted('product_image'); //always a Pageimages array
	if (count($product_image)) {
		$img_url = $product_image->first()->maxSize($width, $height, $options)->url;
	} else {
		$img_url = urls()->templates . "assets/img/product-missing-image.jpg"; //we show this when image is not available
	}
	$event->return = $img_url;
});
?>

BTW, you can find more examples here:

• How can I add a new method via a hook?
• Working with custom utility hooks
• Adding array_chunk support to WireArray
• addHookProperty() versus addHookMethod()

Have a nice weekend!

Edited July 22, 2017 by szabesz
code updated, thanks Robin

[Robin S]

Nice tutorial, thanks!

You could simplify the methods a little by making sure you always get the Images field as a Pageimages array, e.g.

$wire->addHookMethod('Page::siteFeaturedImage', function($event) {
    $page = $event->object;
    if ($page->template != "article") {
        throw new WireException("Page::siteFeaturedImage() only works on 'Pages of article template', Page ID=$page is not such!");
    }
    $article_featured = $page->getUnformatted('article_featured'); // always a Pageimages array
    if (count($article_featured)) {
        $img_url = $article_featured->first()->url;
    } else {
        $img_url = urls()->templates . "assets/img/missing-article_image.jpg"; //we show this when image is not available
    }
    $event->return = $img_url;
});

 

[szabesz]

7 hours ago, Robin S said:

by making sure you always get the Images field as a Pageimages array

Aha, yes! Thank you! I keep forgetting that we have unformatted values too. I updated both methods in my original post.
Cheers,

[Anna]

Thank you! This is very useful because I'm not a php expert. Welcome everyone!

[szabesz]

Additional tip related to displaying placeholder images:

Above I just hard coded a placeholder image to be shown which might be all what someone needs. However, there are times when we want to let the editors change that picture or we just want it to show up in the admin too. In that case we can use ProcessWire's "Default value (when empty)" setting:

[Alpine418]

On 8/29/2017 at 9:25 PM, szabesz said:

Additional tip related to displaying placeholder images:

Above I just hard coded a placeholder image to be shown which might be all what someone needs. However, there are times when we want to let the editors change that picture or we just want it to show up in the admin too. In that case we can use ProcessWire's "Default value (when empty)" setting:

Strange. There are no default value settings anymore in PW 3.0.181.

Does anybody have the same issue?

[LAPS]

On 7/19/2021 at 12:38 PM, rjgamer said:

Strange. There are no default value settings anymore in PW 3.0.181.

Does anybody have the same issue?

Here I've the same issue using PW 3.0.200:
no ProcessWire's "Default value (when empty)" setting shown (Admin > Setup > Fields > Edit Field > Tab "Advanced").

[Robin S]

3 hours ago, LAPS said:

no ProcessWire's "Default value (when empty)" setting shown

The setting is now called "Page containing default/fallback value for this field"