Blogs by date "February 2013"

Using Graphics and Files in Exponent

Though Exponent is designed to be 'easy to use' and 'flexible', sometimes the overlap of features between modules can make it  seem a bit complex.  Most modules allow you to display text and graphics, however each module is different in how content is displayed (how it appears to the user and acts as a web page) or administered.(managing and updating the content such as editing).  In this article I'll attempt to show the various features and limitations available to help you determine which is right for your particlular application.

The easiest method to display content on a page is to use a 'text' module. In fact you can mimic the content of most of other modules using a single text module if you're willing to do a lot of work to manually manage it.  In it's default state a text module item simply has a title and WYSIWYG (what you see is what you get) content.  However, you can optionally add file attachments using the module configuration settings 'Files' tab.  First let's look at how we can use graphics and files in the WYSIWYG content.

The WYSIWYG editor allows you to insert insert graphics and links in the content.  To insert a graphic into the text, click on the 'Image' icon (looks like a landscape picture).  In the 'Image Properties' dialog which appears, the 'Image Info' tab determines which graphic will be used and how it will appear in the text.  You can either type in the url to the graphic, or use the 'Browse Server' button to open the File Manager.  Once you've selected a graphic, the File Manager will close itself and the graphic will appear in the 'Preview' pane of the Image Properties dialog.  You can adjust the graphics appearance by using the settings to the left of the Preview and evaluate the results in the Preview pane.

The WYSIWYG editor Image Properties dialog also allows you to assign a link to the graphic when it is clicked.  Using the 'Link' tab you can enter a url to be sent to, or use the 'Browse Server' button to bring up the 'Insert/Modify Link' Manager.  This window allows you to easily select from any of the pages on the site in either the 'hierarchy' or as a 'standalone page' which returns you to the Image Properties dialog.  You may also link to a specific module on a page by using the 'Click Here to Link to Content' link in the top center.  This will bring up a copy of the web site, but you'll notice that all the 'chrome' menu bars now have replace the module menu with 'module type - Link to This Module'.  Browse to the desired page and click on the 'module type - Link to This Module' to select it and be returned to the 'Insert/Modify Link' Manager, where you can click the 'OK' button to return to the Image Properties dialog.  Or you may link to a file by clicking on the 'Switch to File Manager' link in the upper right corner of the 'Insert/Modify Link' Manager.  You may also select how the 'link' opens when clicked by selecting a 'Target' in the 'Links' tab of the Image Properties dialog.  Click OK, to place the image in the text.  You may manage existing graphics by dragging them around, or right-click to bring up a menu to change link or graphic settings.  As you can see, there is a limited amount of flexibility even at this point.  

However, let's say you want to associate graphics with the content, not necessarily embed them within it.  You can attach files to the text item  by turning this feature on using the 'Files' tab in the module Configuration Settings dialog.  This will activate an area below the WYWSIWYG editor to select and attach up to 10 files.  You can delete or rearrange the attached files using this same area.  The default setting on the 'Files' tab is 'This module does not use files' however you can attach files by selecting one of four display styles: Downloadable Files, Gallery, Showcase, Slideshow:

All four display styles allow you to set the Display Box.  You can adjust the 'box' placement (above, left, right, or below the content), its width, and its margin.  Exponent does its best to display the attached files within the display box and wraps the item content around it.  Any thumbnails will wrap within the display box, so if you do not set a display box width, you'll see a column of thumbnails.

  • Downloadable Files displays a list of all attached files as names with links to download the file.    For the Downloadable Files, you may also set the Title above the list.
  • Gallery is used to display one or more graphics with an optional 'lightbox' display.  You may select to only display the primary or first image on a listing or showall view, with all images displayed on an item or show view.  You can set the size of the thumbnails and their placement in relation to the primary image.
  • Showcase is used to display one or more graphics with a larger version of the current/selected graphic.  This also can be set to only display the pimary image on a listing page.  You can also set the action to display the thumbnail in the larger graphic by either a click or hover.
  • Slideshow is used to display a set of graphics as a slideshow.  And in v2.2+ you may optionally display the slide title and/or slideshow controls.

This has been a preliminary introduction to files and graphics in Exponent.  I plan to write another article to pick up on some module specific features dealing with files and graphics.

About the author

Dave Leffler
Exponent CMS Developer