Features of 4.3: Entry Asset Manager

On Monday, Beau posted about our effort to update the docs for MT 4.3. Today I'm coming to you with information on one of our new features — the entry asset manager.

An Easier Way

Up until now, the only way to associate an image with an entry was to place it in the entry body. Upon save, Movable Type would write that association to the database. In order to do this, there a form tag was placed around the image (that was stripped out when you published), which was confusing to many. In 4.3, we decided to make this relationship clearer and easier to manage.

As you can see to your right, every image associated with this entry is listed in a new sidebar widget on the edit entry page. Hovering over the image shows you a thumbnail. Clicking on 'Add New' in the widget only adds the image to the list, not the entry body. This means you can now use the mt:EntryAssets tag to access assets without inserting them into the entry body.

Of course, you can still add images to the entry body, but now they won't have that ugly form tag. Not only is this easier for beginners, but it has the side effect of greatly improved performance of the rich text editor (RTE) in modern browsers. Resizing and moving photos inside the RTE is now a breeze in browsers like Firefox.

So What Can I Do With It? Slideshows!

Oftentimes you want to create a slideshow inside of an entry, but that would mean pasting all of the code in the entry body. Template experts could handle it, but it was nearly impossible to explain this process to a client. Now a writer just needs to write their post, select the photos they want to use in the asset manager, and click save. They do the writing, and the developer does the developing.

After the jump, I've provided some Javascript that will create a very simple slideshow. It's not using any new tags, but it's an example of how you can cleanly separate code and content.

Slideshow Code

This code is not polished (nor is it meant to be), but it illustrates the functionality clearly. For production, you'd make a true Javascript function for all of this — or, even better, build it in about 1/4 of the number of lines using jQuery — and provide some CSS styles.

To start, just above your entry body, place the following line of html:

<div id="entry-gallery"></div>

Then, anywhere below that, add the following block of Javascript. It will create an array of your entry assets, then build out the HTML elements using the DOM. Finally, there is a function that will make the previous and next links load a new image in the img tag (and loop to the front or back, when necessary).

<script type="text/javascript">

var entryAssets = new Array(<mt:EntryAssets>'<mt:AssetThumbnailURL width="500">'<mt:Unless name="__last__">,</mt:Unless></mt:EntryAssets>);

if ( entryAssets.length != 0) {
    var entrySlideshow = document.getElementById('entry-gallery');
    var imgIndex = 0

    function viewImage(direc) {
        if (direc == 'next') imgIndex++;
        if (direc == 'prev') imgIndex--;
        if (imgIndex >= entryAssets.length) imgIndex = 0;
        if (imgIndex < 0 ) imgIndex = (entryAssets.length - 1);
        slideshowImage.setAttribute('src',entryAssets[imgIndex]);
        return false;
    }

    var slideshowImage = document.createElement('img');
    slideshowImage.setAttribute('src',entryAssets[imgIndex]);
    slideshowImage.setAttribute('alt','Slideshow Image');
    entrySlideshow.appendChild(slideshowImage);

    var slideshowNav = document.createElement('p');

    var slideshowPrev = document.createElement('a');
    slideshowPrev.setAttribute('id','slideshow-prev');
    slideshowPrev.innerHTML = '&laquo; Previous';
    slideshowPrev.setAttribute('href','#');
    slideshowPrev.setAttribute('onclick','viewImage("prev")');
    slideshowNav.appendChild(slideshowPrev);

    var slideshowNext = document.createElement('a');
    slideshowNext.setAttribute('id','slideshow-next');
    slideshowNext.setAttribute('href','#');
    slideshowNext.innerHTML = 'Next &raquo;';
    slideshowNext.setAttribute('onclick','viewImage("next")');
    slideshowNav.appendChild(slideshowNext);

    entrySlideshow.appendChild(slideshowNav);
}       

</script>

If you'd like to try this out, you'll need to download the latest beta or wait until the general release. Feel free to post your own versions of slideshow code in the comments! It's always great to see examples of how people are using the features of Movable Type.