Not a developer? Go to MovableType.com

News

Features of 4.3: Entry Asset Manager

By Matt Jacobs
Posted July 22, 2009, in News.

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

entry-asset-manager-1.pngUp 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.

Back

12 Comments

Stephen

Stephen on July 23, 2009, 5:48 a.m. Reply

Could an entry asset also be used as an entry thumbnail for archive pages? For example, I would like to display a small image with each entry on an archive page, but not have that small image appear within the main entry page. Are there methods within the EntryAssets tag to select specific assets?

Matt Jacobs

Matt Jacobs on July 23, 2009, 6:46 a.m. Reply

Absolutely. I would add just the one photo to each entry via the asset manager, then put a block of code like this in my entry template (untested):

<mt:If name="archive_template">
    <mt:EntryAssets limit="1">
        <img src="<$mt:AssetThumbnailURL width="100"$>" 
        alt="<$mt:AssetLabel$>" 
        style="float: left; margin: 0 5px 5px 0" />
    </mt:EntryAssets>
</mt:If>
Matt Carey

Matt Carey on July 23, 2009, 8:18 a.m. Reply

YES!

Thank you for this! To get around this we have either ended up having LOTS of image custom fields on an entry form, or making each image for a slideshow an entry.

Going to be a real timesaver.

Ozgur Kayhan

Ozgur Kayhan on July 30, 2009, 6:08 a.m. Reply

I think it is not working with .png image files properly. Previously i used a similar approach which is inserting images to extended entry field without displaying the image in the entry.

After I upgraded to MT4.3 I am neither able to do that method nor use entry assets for .png files. Are there any solutions for this?

Tom Keating

Tom Keating on July 30, 2009, 6:53 a.m. Reply

This is great news, however the Asset Manager is still missing one critical piece.

There is NO GLOBAL asset search. We have a few bloggers and we often use corporate logos for companies we write about in the blog entry. Example microsoft-logo.jpg, cisco-logo.jpg, netflix-logo.jpg, etc. But the problem is one user’s uploaded logos CAN’T be shared with other users. When you go to insert an image, it only searches your blog. So each blogger has with their own copy of microsoft-logo.jpg. What a waste of time each blogger uploading when it already exists on the server. It uses disk space too, though disk space is cheap. Still, I’m more concerned about productivity.

I figured out the frame URL that gets launched when trying to Insert Image in a New Entry. It looks like this:

http://yourdomain.com/mt/mt.cgi?_mode=listassets&type=asset&editfield=null&blogid=4&dialogview=1&filter=class&filter_val=image

Notice the blog_id=4?

If you can it to blog_id=0 it displays ALL blog asset images. Now I’m getting somewhere…

e.g.: http://yourdomain.com/mt/mt.cgi?_mode=listassets&type=asset&editfield=null&blogid=0&dialogview=1&filter=class&filter_val=image

Try the above link and substitute your MT domain name and you’ll see all images.

This FULL listing of all Image Assets is similar to if you go into System Overview and Manage Assets, it uses blog_id=0. I think it may also use {null} in some places.

I know /mt/tmpl/cms/dialog/assetlist.tmpl is used to generate the list of assets. Tried editing that and setting blogid=0 throughout, but wasn’t successful.

So the problem is I can’t figure out to use this knowledge to be able to change MT to search globally.

It seems like such an obvious feature.

It may require some security. i.e. On a shared MT platform, you may not want to share your images. So might require users to choose whether to share or not to share.

Anyway, I’d like this global asset feature like yesterday and I’m sure others would as well.

Matt Jacobs

Matt Jacobs on July 30, 2009, 7:37 a.m. Reply

Ozgur, I just retested using PNGs and I had no problem using a default install. Do you want to try disabling your plugin and see if that works? If you continue to have problems, please file a bug and we’ll put it in our queue.

lindaannash

lindaannash on August 5, 2009, 4:48 a.m. Reply

We updated our site w/4.3 and I’m struggling with the asset manager - none of my photos are showing up. I can add a photo via rich text no problem, but my I don’t know how to add the cutline to the photo under it that way.

I had a table set up in my entry detail module that pulled in the photo and caption - aligned them to the right of my text. I also had a custom field so that I could select the size of the photo - from 120 to 600.

I’m OK w/adding the photo as rich text, but how do I get the caption under it?

Do none of the asset tags work now? I’ve lost the thumbnail photos on my home page as well as my category listing page.

The other thing we’re struggling with is the facebook commenter - I get all the way to a facebook sign in page and it redirects me to movable type sign in …

adnohr.myopenid.com

adnohr.myopenid.com on December 2, 2009, 2:42 p.m. Reply

I have to second Tom’s request for global assets. I would like to have a single photo gallery and link to it’s photos from within other blogs on my site, and just like Tom described. In my case security is not an issue, so a hack would make me just as happy.

Where can I make an ‘official’ request?

Andrew

Andrew on May 22, 2010, 8:52 a.m. Reply

Although this is late, I would like to third the request for global assets. I am using MT5, and unfortunately assets created at the website level don’t trickle down into the blogs, and obviously assets are not easily shared between blogs.

Dave Aiello

Dave Aiello on June 14, 2010, 2:06 p.m. Reply

The EntryAssets codeblock that Matt Jacobs suggested does work as written

Edmund

Edmund on November 13, 2012, 1:31 a.m. Reply

Should I place the slide code into the entry body or there is another way to have this done?

Lorrie

Lorrie on November 16, 2012, 12:34 a.m. Reply

The image list is a much smarter way of adding images. I like it. How many images can we have in that list. Also, is the list holding all images in the database or there is a different list for every category or entry?

Leave a Comment