szabesz

addHookMethod example for Pageimage(s)

Recommended Posts

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:

Have a nice weekend!

Edited by szabesz
code updated, thanks Robin
  • Like 10

Share this post


Link to post
Share on other sites

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;
});

 

  • Like 4

Share this post


Link to post
Share on other sites
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,

  • Like 4

Share this post


Link to post
Share on other sites

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:

placeholder-image.thumb.jpg.2d3eb16903b24207a5a719b1403b37a2.jpg

  • Like 1

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 Robin S
      Inspired by the "max megapixels" option for the client-side image resizer, I made a simple module that adds target megapixel resizing for Pageimages.
      Image Megapixels
      Adds a method for Pageimages that resizes to a target megapixel value.
      Example use
      You are creating a lightbox gallery of images with different aspect ratios. For the enlargements, rather than setting a fixed maximum width or height you want all the enlargements have the same size in terms of area, allowing a panoramic image to be wider than a square image, for instance.
      The effect of resizing three different aspect ratios by the same megapixel target value can be seen in the screenshot below:

      Installation
      Install the Image Megapixels module.
      API
      // basic usage $pageimage = $pageimage->megapixels(float $megapixels); // usage with all arguments $pageimage = $pageimage->megapixels(float $megapixels, array $options = []); Example:
      foreach($page->images as $image) { echo "<img src='$image->megapixels(0.8)->url' alt='$image->description'>" } If needed you can supply an array of options for Pageimage::size() as a second argument.
       
      https://github.com/Toutouwai/ImageMegapixels
    • By hellomoto
      I was working on this:
      class PWCRM extends WireData implements Module { public static function getModuleInfo() { return array( 'title' => 'Client Relationship Management', 'version' => .001, 'singular' => true, 'autoload' => true ); } public function init() {} public function ready() { $this->pages->addHookBefore('render', $this, 'accessHook'); $this->pages->addHookAfter('render', $this, 'hookAfterPageRender'); } public function accessHook(HookEvent $event) { $page = $this->wire('page'); if (!strpos($page->template->tags, 'crm')) return; if (!$this->wire('user')->hasRole('crm')) $this->wire('session')->redirect($this->wire('config')->urls->login);//throw new Wire404Exception(); } public function hookAfterPageRender(HookEvent $event) { $page = $event->object; echo $page->template->tags; if (!strpos($page->template->tags, 'crm')) return; echo $this->wire('config')->urls->templates; include_once($this->wire('config')->urls->templates.'functions.inc'); $pagehtml = $event->return; $pagehtml = str_replace( '</head>', '<link id="css_crm" rel="stylesheet" href="'.$this->wire('config')->urls->templates.'css/crm.css"> </head>', $pagehtml ); $event->return = $pagehtml; //$event->replace = true; } } I have tried placing the hooks into the init() function, and more... Neither method is effective. The echoes now output, but no redirection (although I have the access settings for the top-level template for this set to render a 404 for underprivileged users, which it does, overriding this, but nonetheless this should work aside from that.
      Then I wrote this up quick:
      <?php namespace ProcessWire; class MaintenanceMode extends WireData implements Module { public static function getModuleInfo() { return array( 'title' => 'Maintenance Mode', 'version' => 1, 'summary' => 'Disables the website frontend for non-superusers.', 'singular' => true, 'autoload' => true, 'permanent' => false ); } public function init() { $this->addHookBefore('Page::render', $this, 'displayDecide'); } public function displayDecide($event) { $page = $event->object; if ($page->template == 'admin' || $this->wire('user')->hasRole('superuser')) return; // replace the method hooked $event->replace = true; $event->return = "Patience please while we undergo some brief maintenance work."; } } which likewise avails nothing. What the hell is my problem here? 
    • By Vinnie
      Hi all, Im trying to fill an options field in all the children of the parent page, after I save it. 
      the options field is configured as multiple select checkboxes. here's the code i have so far:
      $this->addHookAfter('Pages::saved', function($event) { $page = $event->arguments[0]; //set the page if($page->template == 'sport-verenigingen-overzicht') { //get the subcategories from the parent textarea, split on newline $subcats = preg_split('/[\n\r]+/', $page->subcats); //(also tried without imploding and adding the array, also doesnt work) $subcats = implode("|",$subcats); //get the children $children = $page->children(); foreach ($children as $child) { //set the options(sport_categorie is the options field) $child->sport_categorie = $subcats; $child->save('sport_categorie'); } //if i use a normal textfield instead of an optionsfield, //all the children have the correct data e.g: test1|test2|test3 //how to get the values into the options field?? } }); Hope you guys can help! Keep up the good work, I'm loving what you're doing with PW!!
    • By joe_g
      Hi there,
      I'm trying to limit a specific user can only add pages as a child (under) a page created by themselves.  
      The discussion in this thread gets close, it's a working solution on how to only allow editing on pages you created yourself. I'm using this and it works well. But I'm not sure how to modify this for my purposes. 
       
      I'm suspecting I need to do to something like
      $this->addHookBefore("Page::added", $this, 'added');
      then in "added" check if parent is created by the current user. But I'm a bit lost on how exactly to do this.
      thank you! /J
       
    • By abdus
      I'm trying to add a new option to InputfieldTextarea. Depending on that option, I want to change how the input is rendered. I also want to change this option depending on different templates and repeaters, meaning it can have different values for different fieldgroups.
      I hooked into three methods:
      $this->addHookBefore('InputfieldTextarea::render', $this, 'hookInputRender'); $this->addHookAfter('InputfieldTextarea::getConfigInputfields', $this, 'hookInputSettings'); $this->addHookAfter('InputfieldTextarea::getConfigAllowContext', $this, 'hookInputContext'); In hookInputSettings, I build the additional option
      protected function hookInputSettings(HookEvent $e) { /** @var InputfieldTextarea $field */ $wrapper = $e->return; $field = $e->object; /** @var InputfieldSelect $font */ $font = $this->modules->get('InputfieldSelect'); $font->label = $this->_('Font'); $font->name = 'fontFamily'; $font->addOptions(self::fontOptions); $font->attr('value', $field->fontFamily); $wrapper->add($font); $e->return = $wrapper; } It shows up in field settings with no problem

      When I pick an option and save, it even shows up in the database. However, I cannot get the properties of that field in that fieldgroup context. Most other inputfields can get their inputfield settings because are inside a class that extends Inputfield, so $this->myOption works.
      If I hook into FieldtypeTextarea::getConfigInputfields, it works too, because getConfigInputfields method is called with $this as its argument, inside hooks it's possible to access fieldgroup specific settings. But for Inputfield, it's not given any arguments, so hooking Inputfield::getConfigInputfields, you won't be able to get any information about the context.
      // /wire/core/Field.php public function ___getConfigInputfields() { // ... if(!$fieldgroupContext || count($allowContext)) { // ... try { $fieldtypeInputfields = $this->type->getConfigInputfields($this); // ... } // ... } $inputfields = $this->wire(new InputfieldWrapper()); // ... if($inputfield) { if($fieldgroupContext) { $allowContext = array('visibility', 'collapsed', 'columnWidth', 'required', 'requiredIf', 'showIf'); $allowContext = array_merge($allowContext, $inputfield->getConfigAllowContext($this)); } // ... $inputfieldInputfields = $inputfield->getConfigInputfields(); // ... } // ... } So, as a solution I gave it $this as a parameter
      // $inputfieldInputfields = $inputfield->getConfigInputfields(); $inputfieldInputfields = $inputfield->getConfigInputfields($this); Now everything works without any hacks. It works in field settings, templates, repeaters just fine.
      protected function hookInputSettings(HookEvent $e) { // ... $field = $e->arguments(0); // ... $font->attr('value', $field->fontFamily); // WORKS! // ... } I wanted to write this post because it drove me mad last night. I guess the next step is to make a pull request.