top of page
  • Simon Cox

Assets for ExpressionEngine

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

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­sionEngine.


Related Posts

See All
bottom of page