Digital Asset Management for all your ProcessWire media

Output to the Front-end

Media Manager fields

Accessing and outputting the contents of the Media Manager field(s) in your template is quite simple. The fields are accessed like many other ProcessWire fields. The fields return an array of type MediaManagerArray (a WireArray) that need to be looped 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.

The MediaManager Object

Each MediaManager object has the below 5 basic properties. Please note that the property media is itself a ProcessWire object.

Saved (database) properties

These 2 properties are saved with each MediaManager object:

  1. id: page ID of the page where the media lives (hidden in admin and not important to know about)
  2. type: integer denoting media type (1=audio; 2=document; 3=image [for variations this will be 3x, where x is the number of the variation of an original image]; 4=video)

Runtime

The following 3 properties are generated at  runtime, i.e. when a Media Manager field is accessed.

  1. typeLabel: User-friendly string denoting media type. These are audio, document, image, video.
  2. media: A ProcessWire Image (for image media) OR File (for audio, document and video media) Object including all their properties including ext, filesizeStr, height, width, description, tags, filename, basename, etc.
  3. title: Title of the media (please note that this is the title of the hidden admin page where the media actually lives. It may or may not be the same as the name of the media file itself. This can be used as a user-friendly name for your media.

Media Manager API: Examples

Assuming you created a field of type MediaManager called media, you can loop through it for a given page as shown below.

<?php

$media = $page->media;// returns a MediaManagerArray. Needs to be looped through

foreach ($media as $m) {
    echo $m->id;// e.g. 1234 (hidden page in /admin/media-manager/media-parent/)
    echo $m->type;// e.g. 3 (a media of type image) OR 1 (a media of type audio)
    echo $m->typeLabel;// e.g. 'document' (i.e. type would be 2)
    echo $m->title;// e.g. 'My Nice Trip' (whose media file could be my-nice-trip.mp4)
    /*
        @note: 
        - $m->media returns an object;
                   either a ProcessWire Image (for image media) or File object (for audio, document and video media)
        - This means you have access to all the properties of that object,
                   e.g. ext, tags, description, url, filename, basename, width, height,
                        modified, created, filesize, filesizeStr, etc
                        as well as associated methods, e.g. size()
    */ 
    
    echo $m->media->tags;
}

// only output images
foreach ($media as $m) {
    if($m->typeLabel =='image') {
        echo "<img src='" . $m->media->size(100,75)->url . "'><br>";
    }
    
}

// There's also a toString() method so you can do:
echo $page->media;

/*
All your media will be output wrapped in appropriate HTML tags, i.e.:

    audio: <audio></audio>;
    document: <a></a>;
    image: <img>;
    video: <video></video>;

*/