SimonCox.com

Version 7.3

Assets for ExpressionEngine

by Simon Cox
Simon Cox, Author

Topic
Web

Assets for Expression Engine
Assets is a new file management add-on for ExpressionEngine and brings a new way of managing assets in your website. I installed it and built a simple image Gallery.

Installing Pixel & Tonics new Assets add-on

This week Pix­el & Ton­ic have released Assets, a new file man­age­ment add-on for Expres­sio­nEngine. This is an area of con­tent man­age­ment that has been lack­ing in the past but has been improv­ing with EE2 — but Assets takes file man­age­ment to a new level.

The exten­sion installs as most do — files going into the third par­ty fold­ers in the sys­tem fold­er and the themes fold­er and then a quick click on the install link in the Add-ons con­trol pan­el and it’s installed.

In the left pan­el of the add-on inter­face, you can see the fold­er struc­ture — right-click­ing on a fold­er allows you to add sub­fold­ers with a pop­up that allows you to name the sub­fold­er. Assets can be dragged between fold­ers and impor­tant­ly, if your code is using the Assets tags and para­me­ters rather than direct urls, then the paths will change auto­mat­i­cal­ly in your tem­plates allow­ing you to reor­gan­ise your assets quick­ly and easily!

Assets add on showing pop up panel with image details including date, alt text and caption
Assets add on showing pop up panel with image details including date, alt text and caption

I thought I would add an image gallery to the arti­cle pages on this web­site. First I added an Asset entry field into my arti­cles field­set and named it ​‘page­gallery’. Next, I added the HTML (in Coda and using Moun­tee because I love the com­bi­na­tion!). The code sits with­in the ​‘exp:channel:entries’ tags and I set up a descrip­tion list as I want­ed to add cap­tions to each image.

This is the code

{if pagegallery} <h3>Gallery</h3> <dl class="pagegallery"> {pagegallery} <dt><img src="{url}" width="100%" height="100%" alt="{alt_text}" /></dt> <dd>{title} by {author} - {date format="%D, %F %d, %Y"}: {location} {caption}<dd> {/pagegallery} </dl> {/if}

The ​‘if’ state­ment means that the code is used only if the page­gallery has some con­tent. The {page­gallery} tag is the one named in the field set and will loop until all entries are com­plet­ed. The Assets vari­ables are used to pro­vide the cap­tion con­tent and are pulled out of the image meta data.

I could have made this more com­plex with a thumb­nail gallery or carousel to show the images, but for now, I am con­tent with this and exam­ples can be seen below and on the Vin­tage Trac­tors arti­cle.

Assets add on show­ing 4 pic­tures of trac­tors in the assets panel
Assets add on show­ing 4 pic­tures of trac­tors in the assets panel

Assets will, I pre­dict, quick­ly make it into the default set up add-on lists that Expres­sio­nEngine devel­op­ers use — it’s awesome!

And there is more...

4th July 2017
Small update to the look and feel of the gallery piece — added dark back­ground to pop out the images. Meant to do that yes­ter­day but time defeat­ed me!

Jan­u­ary 2018
Some time back Pix­el and Ton­ic decid­ed to focus sole­ly on Craft CMS and so EE Har­bour has tak­en on Assets for Expres­sion Engine.


Comments