Enhanced Media Sidebar
Check out the mini-reviews on the right sidebar. I'm pretty excited about them. I upgraded to Movable Type 4.1 (from 4.01) for one reason: to be able to use the MTAssetDescription tag. This tag allows me to make comments about each Amazon media item that I plug into the sidebar.
I was pleasantly surprised when I finished the installation because
- The whole works didn't crash like last time.
- The Media Manager plugin I had painstakingly installed and tinkered with just two months ago is now fully functional and seems to be automatically included with the MT4.1 package.
- Spell checking is enabled, even in my asset descriptions.
If you are interested in Movable Type and template code for using Amazon assets, read on. If not, then just enjoy my witty and insightful mini-reviews.
I created some widgets and copied a sampling of code from Byrne Reese but it was a little buggy. I messed with the sizes to get the Amazon images to display correctly. I also added the asset labels and descriptions.
The first sidebar widget is called Current Listening.
<h3 class="widget-header">Current Listening</h3>
<div class="widget-content">
<p><MTAssets lastn="2" tags="listening">
<a class="asset-image" href="<$MTAssetURL$>">
<div style="height: 75px; width: 75px; padding: 5px; background-repeat: no-repeat; background-position: center center; background-image: url(<$MTAssetThumbnailURL width="75"$>)"></div></a>
<p><a href="<$MTAssetURL$>"><MTAssetLabel></a></p>
<p><MTAssetDescription></p>
</MTAssets>
</p>
</div>
The next sections are for my "Current Reading", "Current Audiobook", and "Just Read" but I grouped them together into one widget. I probably should have broken up the rest into separate widgets to keep it all neat. But hey, it works! Notice the images are sized differently.
<div class="widget-links widget">
<h3 class="widget-header">Current Reading</h3>
<div class="widget-content">
<p><MTAssets lastn="1" tags="reading">
<a class="asset-image" href="<$MTAssetURL$>">
<div style="height: 110px; width: 75px; padding: 5px; background-repeat: no-repeat; background-position: center center; background-image: url(<$MTAssetThumbnailURL width="75"$>)">
</div></a>
<p><a href="<$MTAssetURL$>"><MTAssetLabel></a></p>
<p><MTAssetDescription></p>
</MTAssets></p>
</div>
<h3 class="widget-header">Current Audiobook</h3>
<div class="widget-content">
<p><MTAssets lastn="1" tags="audiobook">
<a class="asset-image" href="<$MTAssetURL$>"><div style="height: 110px; width: 75px; padding: 5px; background-repeat: no-repeat; background-position: center center; background-image: url(<$MTAssetThumbnailURL width="75"$>)"></div></a>
<p><a href="<$MTAssetURL$>"><MTAssetLabel></a></p>
<p><MTAssetDescription></p>
</MTAssets></p>
</div>
<h3 class="widget-header">Just Finished</h3>
<div class="widget-content">
<p><MTAssets lastn="3" tags="read">
<a class="asset-image" href="<$MTAssetURL$>">
<div style="height: 110px; width: 75px; padding: 5px; background-repeat: no-repeat; background-position: center center; background-image: url(<$MTAssetThumbnailURL width="75"$>)">
</div></a>
<p><a href="<$MTAssetURL$>"><MTAssetLabel></a></p>
<p><MTAssetDescription></p>
</MTAssets></p>
</div></div>
I hope that helps anyone trying to do something similar.
By the way, if you're still using MT4.01, make your life easier and upgrade to MT4.1 now.
Leave a comment