Digital Asset Management for all your ProcessWire media

Accessing Media Manager Objects Properties

Accessing and outputting the contents of Media Manager fields in your template is quite simple. The fields are accessed like many other ProcessWire fields. As discussed in the topic on Media Manager Objects, the fields return an array of type MediaManagerArray (a WireArray) that need to be looped through to output each media within. Since it is a WireArray, it means that you also have at your disposal all the powerful methods inherent in WireArrays. Each item in a MediaManagerArray is an object of type MediaManager.

Below are a number of examples for accessing and outputting the contents of Media Manager field. Before proceeding, please make sure that you have looked at the previous topic where we explain the properties of Media Manager Objects.

Although the examples assume that the Media Manager field is on the page currently being viewed, i.e. $page, you can of course use $pages to find other pages with Media Manager fields and output their content.

Examples

Media Manager field with mixed media types.

Assuming you have a have a Media Manager field named resources, you can traverse it, for instance, using foreach as shown below. In the example, we loop through the Media Manager field and output each media item's title, description and tags.


<?php

  $out = "";
  // loop through Media Manager field
  // output each media items title, description and tags
  foreach ($page->resources as $resource) {
    $out .=
      "<h3>{$resource->title}</h3>" .
      "<p>Description: {$resource->media->description}</p>" .
      "<p>Tags: {$resource->media->tags}</p>";
  }

  echo $out;

Directly echoing a Media Manager field.

It is possible to directly echo out a Media Manager field. Media Manager has a a toString() method that will format and render the field contents into a basic HTML string. The output will look similar to this:


<img alt="Long Train Rocky Mountain" src="/site/assets/files/5048/long_train_-_rocky_mountain-v2.jpg" style="width:400px;height:auto;margin:10px;" title="Long Train Rocky Mountain">
<p><a href="/site/assets/files/5040/checklist_install.pdf">Checklist Install</a></p>
<p><a href="/site/assets/files/5062/end_of_year_report.xlsx">End Of Year Report</a></p>
<div class="mm_render_video_player">
  <span>Norm Of The North</span>
  <video controls="" height="240" preload="metadata" width="320">
    <source src="/site/assets/files/5060/norm_of_the_north.mp4" type="video/mp4">Your browser does not support the video tag.
  </video>
</div>
<div class="mm_render_audio_player">
  <span>Jonathan Butler Heal Our Land</span>
  <audio controls="" preload="metadata">
    <source src="/site/assets/files/5064/jonathan_butler_-_heal_our_land.mp3" type="audio/mpeg">Your browser does not support the audio element.
  </audio>
</div>

Traversing a Media Manager field using WireArray::each().

Here we create a simple ordered list of items in a Media Manager field named resources by traversing it using WireArray::each().


<?php

  $out = "<ol>";
  // generate a list of media items
  $out .= $page->resources->each(function($resource) {
    return "<li><a href='{$resource->media->url}'>$resource->title</a></li>";
  });
  $out .= "</ol>";

  echo $out;

Imploding a Media Manager field property using WireArray::implode().

This example is similar to the one above where we use WireArray::each(). Here we use WireArray::implode() to render markup of the titles of media in a Media Manager field named resources.


<?php

  // render all the titles of media in the Media Manager field
  // each separated by a <br>, for each media
  $out = $page->resources->implode('<br>', 'title');
  echo $out;

Exploding a Media Manager field using WireArray::explode().

In this example we return a plain PHP array containing selected properties (id, title and typeLabel) for each MediaManager object within a Media Manager field named resources.


<?php

  // return plain array containing id, title and typeLabel of each media in the Media Manager field
  $mediaArray = $page->resources->explode(array('id','title','typeLabel'));
  echo "<pre>";
  print_r($mediaArray);
  echo "</pre>";

Finding media within a Media Manager field using an in-memory selector.

Using ProcessWire in-memory selectors, we can fetch the exact media we want from a Media Manager field. In the following example, the variable names are necessarily verbose in an attempt for clarity. We are interested in the extra images within the images field named media_manager_image which is attached to the Media Manager template media-manager-image. As explained in earlier topics, it is possible to add other fields to this template as well as add extra images to the field by editing the media item either directly in the media Library or when added to a Media Manager inputfield.

First, we find the media we want. The Media Manager field on the page is named resources. In this case, we only want the image media from a Media Manager field with mixed types media. We use the property typeLabel for our search. This is a MediaManager object property. Your selector can be more complicated than this depending on your requirements. If there are MediaManager objects of type image in the MediaManagerArray, the selector returns a MediaManagerArray object with only image media.

Secondly, if the selector returned results, we loop through it. Since the images field media_manager_image can contain multiple images, we also loop through it inside our first loop to grab all the images within. Within the Media Manager object we have access to the field via its property mediaField. We use WireArray::each() for both loops. We build our markup as we loop through.

Finally, we echo out the markup.


<?php

  $out = "";
  // we use in-memory selector to find ONLY image media in this media manager field
  // we use the Media Manager Object property 'typeLabel'
  $imagesMediaManagerArray = $page->resources->find("typeLabel=image");
  if($imagesMediaManagerArray->count) {
    $out = $imagesMediaManagerArray->each(function($imageMediaManagerObject) {
      $imagesMarkup = "<h3>{$imageMediaManagerObject->title}</h3>";
      // the mediaField property returns the whole media_manager_image images field in the template media-manager-image
      // for images, this is a multi image field, so we loop through it as well
      $imagesMarkup .= $imageMediaManagerObject->mediaField->each(function($image) {
        // image is Pageimage object
        // return a thumb for each image in the field media_manager_image
        $thumb = $image->width(150);
        if($thumb) return "<img src='$thumb->url'>";
      });
      // the final output
      return $imagesMarkup;
    });
  }

  echo $out;

As mentioned above, you have at your disposal all of the public methods availabled in WireArray.