Pageimage::render() method

Render markup for this image (optionally using a provided markup template string and/or image size options)

Given template string can contain any of the placeholders, which will be replaced:

  • {url} or {src} Image URL (typically used for src attribute)
  • {httpUrl} File URL with scheme and hostname (alternate for src attribute)
  • {URL} Same as url but with cache busting query string
  • {HTTPURL} Same as httpUrl but with cache busting query string
  • {description} or {alt} Image description (typically used in alt attribute)
  • {tags} File tags (might be useful in class attribute)
  • {width} Width of image
  • {height} Height of image
  • {hidpiWidth} HiDPI width of image
  • {hidpiHeight} HiDPI height of image
  • {ext} File extension
  • {original.name} Replace “name” with any of the properties above to refer to original image. If there is no original image then these just refer back to the current image.

Available since version 3.0.126.

Example

$image = $page->images->first();
if($image) {
  // default output
  echo $image->render();

  // custom output
  echo $image->render("<img class='pw-image' src='{url}' alt='{alt}'>");

  // custom output with options
  echo $image->render("<img src='{url}' alt='{alt}'>", [ 'width' => 300 ]);

  // options can go in first argument if you prefer
  echo $image->render([ 'width' => 300, 'height' => 200 ]);

  // if only width/height are needed, they can also be specified as a string (1st or 2nd arg)
  echo $image->render('300x200');

  // custom output with link to original/full-size and square crop of 300x300 for thumbnail
  echo $image->render([
    'markup' => "<a href='{original.url}'><img src='{url}' alt='{alt}'></a>",
    'width' => 300,
    'height' => 300
  ]);
}

Usage

// basic usage
$string = $pageimage->render();

// usage with all arguments
$string = $pageimage->render($markup = '', $options = []);

Arguments

NameType(s)Description
markup (optional)string, array

Markup template string or optional $options array if you do not want the template string here.

options (optional)array, string

Optionally resize image with these options sent to size() method:

  • width (int): Target width or 0 for current image size (or proportional if height specified).
  • height (int): Target height or 0 for current image size (or proportional if width specified).
  • markup (string): Markup template string (same as $markup argument), or omit for default (same as $markup argument).
  • link (bool): Link image to original size? Though you may prefer to do this with your own $markup (see examples). (default=false)
  • alt (string): Text to use for “alt” attribute (default=text from image description).
  • class (string): Text to use for “class” attribute, if {class} present in markup (default='').
  • Plus any option available to the $options argument on the Pageimage::size() method.
  • If you only need width and/or height, you can specify a width x height string, i.e. 123x456 (use 0 for proportional).

Return value

string


Hooking Pageimage::render(…)

You can add your own hook events that are executed either before or after the Pageimage::render(…) method is executed. Examples of both are included below. A good place for hook code such as this is in your /site/ready.php file.

Hooking before

The 'before' hooks are called immediately before each Pageimage::render(…) method call is executed. This type of hook is especially useful for modifying arguments before they are sent to the method.

$this->addHookBefore('Pageimage::render', function(HookEvent $event) {
  // Get the object the event occurred on, if needed
  $Pageimage = $event->object;

  // Get values of arguments sent to hook (and optionally modify them)
  $markup = $event->arguments(0);
  $options = $event->arguments(1);

  /* Your code here, perhaps modifying arguments */

  // Populate back arguments (if you have modified them)
  $event->arguments(0, $markup);
  $event->arguments(1, $options);
});

Hooking after

The 'after' hooks are called immediately after each Pageimage::render(…) method call is executed. This type of hook is especially useful for modifying the value that was returned by the method call.

$this->addHookAfter('Pageimage::render', function(HookEvent $event) {
  // Get the object the event occurred on, if needed
  $Pageimage = $event->object;

  // An 'after' hook can retrieve and/or modify the return value
  $return = $event->return;

  // Get values of arguments sent to hook (if needed)
  $markup = $event->arguments(0);
  $options = $event->arguments(1);

  /* Your code here, perhaps modifying the return value */

  // Populate back return value, if you have modified it
  $event->return = $return;
});

See Also


Pageimage methods and properties

API reference based on ProcessWire core version 3.0.163

Twitter updates

  • This week we’re proud to announce the newest ProcessWire master version 3.0.164. Relative to the previous master (3.0.148) this version adds a ton of new & useful features and fixes more than 85 issues, with more than 225 commits over 7 months— More
    7 August 2020
  • ProcessWire 3.0.163 resolves more than a dozen issue reports and adds new hooks and configurable module install options, among numerous other updates. In addition, a major update to ProCache (v4.0) has been released— More
    24 July 2020
  • Weekly update for 17 July 2020 and a look at new features coming in next week's version of ProCache— More
    17 July 2020

Newest forum posts

Latest news

  • ProcessWire Weekly #326
    In the 326th issue of ProcessWire Weekly we're going to introduce the latest ProcessWire master version, take a quick look at a brand new third party module called Textformatter Video Markup, and more. Read on!
    Weekly.pw / 8 August 2020
  • ProcessWire 3.0.164 new master version
    This week we’re proud to announce the newest ProcessWire master version 3.0.164. Relative to the previous master version (3.0.148) this version adds a ton of new and useful features and fixes more than 85 issues, with more than 225 commits over a period of 7 months.
    Blog / 7 August 2020
  • Subscribe to weekly ProcessWire news

“We chose ProcessWire because of its excellent architecture, modular extensibility and the internal API. The CMS offers the necessary flexibility and performance for such a complex website like superbude.de. ProcessWire offers options that are only available for larger systems, such as Drupal, and allows a much slimmer development process.” —xport communication GmbH