Blog items tagged with "file-manager"

Using the new elFinder File Manager

Version 2.3.0 includes a new modern File Manager which (in the long run) will make it much easier to manage and work with uploaded files.  In general, elFinder follows an 'operating system' paradigm, so it should be fairly logical to begin using, but it is much different than the old Exponent File Manager.elFinder File Manager

Some of the (new) elFinder features include:

  • True file folders for easier file organization
  • Drag and Drop file upload and moving (CAUTION: while you can move a file, it may break any references within WYSIWYG text since they are embedded as hard reference links instead of as an expFile object)
  • File cut/copy/paste
  • Single 'pane' file management and upload, instead of the old separate file uploader
  • Command toolbar to access most actions directly
  • ​Item option (context) menus
  • 'Touch' enabled to work with mobile devices
  • Integrated file archive creation and extraction (not available on windows servers)
  • Icon and details folder views

To enable the new elFinder file manager, open ''Configure Website' from the Exponent menu.  Then select the 'File Manger' tab and select 'elFinder' as the system file manager.  For the time being, the elFinder file manager is only an option and not the default file manager.

How to use these new features:

  1. Basic Window Layout
    • As with most modern file mangers there are three basic areas or panes in the elFinder window
      • Toolbar - is located at the top of the window
      • Folder Tree Pane - is located to the left side of the window.  The folder hierarchy can be collapse or expanded and the pane width may be adjusted
      • File Pane - this is the largest area of the window which displays all the file in the current folder or those matching a search request
    • elFinder also uses context menus which appear on folders, files, or the File Pane background
  2. File Uploads
    • ​​The easiest way to upload files into the file manager is to simply drag them from your PC desktop/file manager and drop them on/into the folder you choose.
    • You may also click on the 'Select files to upload' toolbar button, or choose the 'Upload files' context menu item from the file pane.  This will present a window to drag/drop files, to paste a file, or open a file select dialog to choose the files to upload.
  3. File Selection
    • The easiest way to select a file when the file manager is opened from within an editor or edit item dialog, is to simply double-click the file.
    • You may also click on the 'Select files' toolbar button, or choose 'Select' from the context menu for the file(s)
    • You may select more than one file by using the control/shift method or a drag box.
  4. File Operations/Management
    • You may cut, copy, paste, duplicate, rename, delete, or preview a file using the appropriate toolbar button or context menu item
    • You can display the files in the file pane as either large icons or a detailed list
    • You can sort the displayed files by name, size, kind, and date, in ascending or descending order
  5. Image Editing
    • elFinder includes integrated image resizing, cropping, and rotation using the 'Resize & Rotate' command
    • For more advanced editing, we now use an online service called Pixlr to provide full graphics editing features.  
    • As is the case with all commands, you can use the toolbar button or the context menu which will present you with a dialog to select either the full-blown Pixlr editor or Pixlr Express which has fewer features.
  6. Exponent File Management
    • The options to change file sharing, image title, image 'alt' title are now found in the 'Info' dialog of the file which can be displayed via toolbar or context menu
    • The 'sharing' status is changed instantly, but the 'title' and 'alt title' require you click on the 'update' button for the change to take place
    • You'll also see additional details such as file type, size, dimensions, file owner, etc...
    • There are also details about the file/folder found in the 'status' bar at the bottom of the window
    • There is also a 'Preview' command available to display/play images, videos, & mp3 files
  7. File Search
    • There is a built-in search feature using the input box in the toolbar.  Simply enter the phrase, press 'enter' and all the files in the system matching that phrase will be displayed, regardless of their folder location.
    • Click on the 'x' button or select a folder in the folder tree pane to clear the search.
  8. Transfer (back) to the Insert/Modify Link Dialog
    • If you are inserting a 'link' to a page into an editor instead of a link to a file, you can switch to the dialog with a list of pages available, the option to select a module on a page, or to switch back to the file manager.  This button is found on the toolbar to allow you to switch back to the Insert/Modify Link window.  It is located next to the toolbar 'Help' button.

Overall, we think you'll be pleased with the new elFinder File Manager and find it much simpler to use.

 

About the author

Dave Leffler
Exponent CMS Developer

SEO Friendly Features of Exponent CMS

I've worked with Exponent CMS in a variety of roles since 2007, from being merely a user/customer of OIC Group, Inc., to becoming a project manager for OIC Group, and now as a SEO consultant for my own business in Atlanta.

While Exponent CMS doesn't have the community following of Wordpress, Joomla, Drupal, etc., I've had experience with all of these top CMS platforms, but Exponent is always the one I come back to.

In terms of SEO friendliness, Wordpress has several plugins that work quite well for optimizing websites, but what I love about Exponent CMS is that the markup is highly flexible and all of the SEO tools needed for to optimize your website are built in – no plugins necessary.

Over the last several weeks, I've been working with the lead developers on the Exponent CMS project – Phillip Ball and David Leffler – on enhancements to the CMS that make Exponent even more SEO friendly than it already was. In the coming weeks, we'll be adding even more features that I personally believe will make Exponent the most search engine friendly CMS platform in the open source marketplace.

So, aside from being able to control basic Meta Data on a page by page basis, what are some of the other built-in SEO friendly features of Exponent CMS?

Router Maps

When you're working with a CMS that allows for dynamic content publication and display, you're going to run into problems with long, nasty URL strings that include parameters for views, actions and sources that aren't friendly for either users or search engines.

Such is the case with most of the dynamic content modules within Exponent CMS such as news, portfolio, blog, ecommerce, etc. Luckily for SEO enthusiasts such as myself, Exponent has built in an awesome feature called Router Maps that allows you to clean up that nasty URL strings with a cleaner, more search engine friendly version of the URL.

For example, the dynamic blog module URL below is performing the “Show All By Tag” action, where a user can view every blog post that is labeled with that specific tag. The Exponent CMS site will dynamically pull up and display each of these posts, which is essential functionality for a blog, but as you can see the URL isn't exactly user friendly:

Dynamic Exponent CMS URL String

By configuring the Router Map function in your Exponent theme folder with the appropriate rule, you can change that nasty URL to a cleaner one such as this:

Exponent CMS Clean Router Mapped URL

Flexible URL Structures

Since SEF (Search Engine Friendly) URLs were integrated into Exponent in 2007, they've evolved to become more and more flexible for SEOs.

The benefit of SEF URLs, aside from being easy for users to read, is that SEOs can craft custom optimized URLs with keyword inclusion to make their clients' websites more friendly for organic search.

Exponent allows administrators to assign a variety of URL extensions to their SEF URL field such as .html, .php, .htm, etc., based on their preference.

Historically, all pages within Exponent CMS would display URLs at the root level.

Exponent CMS URLs

Recently though in Exponent's 2.2.0 stable release, the SEF URL field has become even more flexible. The system now allows for nested URL structures that are preferred by some SEO consultants that allow URLs to look like this:

Exponent CMS Enhanced Nested URL Structures

The flexibility of how SEOs can execute their URLs within our system makes Exponent a very powerful platform for websites focused on SEO and search engine placement.

Rel=Canonical URLs

Another new feature added in the 2.2.0 stable release is support for Rel=Canonical URLs on a page by page basis.

For SEOs dealing with large websites that have potential duplicate content issues (having the same exact content appearing in multiple places on your website, or if your site is receiving syndicated content), the Rel=Canonical tag configuration allows SEOs the ability to easily assign credit to a preferred source URL in the event that duplicate content needs to be avoided.

Exponent CMS Rel Canonical URLs

Rel=Canonical tag fields have been integrated throughout the system in the page manager configurations, and in specific dynamic module types such as Exponent's news, portfolio, blog, and ecommerce modules.

File Manager Image Meta Data

The final feature that makes Exponent CMS a SEO friendly CMS that I'll discuss in this post is related to Exponent's file manager and attachable files functionality.

Certain modules within the system utilize “attachable files” functionality to display images in certain views/layouts.

For example, Exponent's ecommerce, blog, portfolio, and news modules use attachable image files to display images related to that product/portfolio piece/post:

Exponent CMS Attachable Files

The SEO friendly feature related to this functionality is how the image is optimized for organic search engine value.

Rather than simply inserting image files into the WYSIWYG editor for display on the website as you would using a text module, you can assign your Image Alt Text and Image Title tags for attachable files within Exponent CMS' file manager.

Exponent CMS File Manager Image Meta Data

So as you've optimized your attachable file, your image Alt text and Title tags will show up in the HTML markup just as if you had inserted your image into a WYSIWYG editor and optimized the image that way:

Exponent CMS Attachable Files Image Meta Data

Future Exponent CMS SEO Friendly Feature Enhancements

As the CMS continues to evolve, I've made it my personal mission to ensure that we work in every SEO friendly feature possible into Exponent CMS.

In future releases, we'll be working on such enhancements as allowing administrators to configure “No Index, No Follow” type robots tags on a page and post level.

We also plan to enhance the Exponent CMS tagging system so administrators will be able to assign unique SEO friendly meta data on a tag by tag basis, as well as add link title attributes to the Exponent CMS link manager module configuration.

If one thing is for certain as we continue to make Exponent CMS more and more Search Engine Friendly, it's that our system is incredibly powerful and its future is very bright.

About the author

Atlanta SEO Consultant Chris J. EverettChris Everett is a contributor to the Exponent CMS project.

Chris is a search engine marketing consultant based in Atlanta, Georgia, and he's the founder of the Captivate Search Marketing SEO Company.

To learn more about the SEO friendly features of Exponent CMS, feel free to connect with Chris on Google+.

Tips: Resize Your Images Before Uploading to Your Exponent CMS Website

As a general rule of thumb, any images that will be placed into text modules should be resized using an external image editing program such as Microsoft Picture Manager or Picasa before it is uploaded to the Exponent CMS File Manager.

Resizing your images to the exact pixel dimensions that they will appear on the website helps:

  • Reduce the amount of time it takes to upload the image to the File Manager
  • Optimize loading time for the page the image(s) is on
  • Control the amount of disk space and bandwidth that is being used by the website

Example Image that Needs Resized

The image below is a prime example of an image that should have been resized before it was uploaded to the File Manager and inserted into the text module. The image looks slightly distorted and hangs over the side nearly into the next content module beside it.

By right clicking on the image and selecting “View Image” the image will open up in a new tab and show the actual size of the image.

As you can see in the image above, is the actual size of the image is substantially larger (1085px wide by 695 px tall in reality) than how it appears in the text box that is only 273px wide. This image should have been resized to 273px wide by 185px tall.

Resizing Images

To properly resize the image you must first open it up in your picture editing software. For the purposes of this Blog Tip, I'm using Microsoft Picture Manager.

Once you've opened the image in Picture Manager, select the “Edit Picture” button at the top of the editor.

After you've selected “Edit Pictures,” on the right side you can select to “Resize” the image.

Once you select "Resize" on the right hand column, you have the option to type in the new pixel dimension size that you want for the image, or you can reduce the image size by percentage until you reach the dimensions that fit the space that your image will be placed in.

Once your image has reached the desired size, you can choose to save over the existing image or save a new smaller version of the image.

Once you've re-saved your image to the size it needs to be on the website, you can then upload it to the Exponent CMS File Manager and place it onto the site. Read more on uploading files to the Exponent CMS File Manager.

As you can see below, the new resized image is crisper and no longer hangs outside of the boundaries of the text module. Read more on Inserting Images into Text Modules.

This is the proper way to manage images on your Exponent CMS website!

Tutorials: How to Insert an Image into an Exponent CMS Text Module

To insert an image from the Exponent CMS File Manager into a Text module, you must first click the edit icon on the text module to begin editing the module.

Exponent CMS Text Editor

Once you've clicked the edit icon, you will be directed to Exponent's text editor:

Exponent CMS Text Editor

To insert an image into a text module, you must first place your cursor before the sentence in which you want the photo to flow.

Exponent CMS Text Editor

Once you've selected where in the text you want the image to flow, you can then go and select the image you want by clicking on the Insert/Edit Image button in the text editor tool bar.

Exponent CMS Insert/Edit Image Button

Once you've clicked the Insert/Edit Image button, you will be prompted with an Insert/Edit Image dialogue box. To select the image you want to insert into the module, you must then click the “Browse Server” button.

Exponent CMS Insert Image Configuration

After you click the “Browse Server” Button, the Exponent CMS File Manager will open, allowing you to navigate to the image you want to insert (Read more information on how to upload new files to the Exponent CMS File Manager):

Exponent CMS File Manager

To select the image you wish to insert into the text module, you must find the image in the File Manager and then click on the Green arrow next to the image underneath the “Actions” Column of the File Manager:

Exponent CMS Insert Image Configuration

After you've selected your image, the Exponent CMS File Manager will automatically close and your image will be inserted into the Insert/Edit Image dialogue box where you can select positioning, linking and padding for your image as well as giving your image an Alternative text title:

Exponent CMS Insert Image Configuration

The Image properties dialogue box also has two tabs called "Links" and "Advanced" where you have other image configuration options. If you want to embed a link into the image, click on the "Link" tab. Here you can define the URL you'd like to link to and also determine whether that link should open up into a new window.

Exponent CMS Insert Image Configuration

On the Advanced tab, you have the option to type in a pre-determined CSS style class for your image such as "border" if there has been a CSS style sheet created that puts a border around your images. Here you can also add an Advisory title for the search engines to let them know what the image is that's being displayed.

Once you've finished configuring your image, click the “OK” button. You will now see the image pop into your text editor in the position you've defined:

Exponent CMS Text Editor

After you've clicked save, you're all done! Your image has successfully been inserted into the module and will appear on the page:

Exponent CMS Image Editing

Tutorials: How To Upload Files to the Exponent CMS File Manager

The first in our series of my How To tutorials for Site Administrators starts with the process of how to upload files to the file manager on an Exponent CMS website.

To get started, the Exponent CMS administrative tool bar at the top of the page has a tab called “Files”

If you click on “Files” you have two options. If you want to immediately upload files to the file server, you can select “Upload Files”. The other option is to select the “File Manager” button which allows you to view all the files on the file server in the File Manager.

Exponent CMS Admin Tool Bar Upload Files

If you've selected to view all of the files and clicked the “File Manager” option, you can see a paginated listing of all the files on your site's file server.

The Exponent file manager gives you the option of being able to search for a particular file based on keywords. For example, if you are looking for a particular file on the server and you know that it has the word “presentation” in it then you can type in “presentation” into the search box and the file manager will filter all files that have the word “presentation” in the file name or in the Meta Title or Alt Text Title of the file.

Exponent CMS File Manager Searc Filter Results

If you want to upload new files to the file server, there is a button in the upper right hand corner of the File Manager that says “Upload Files” ... You can also access the “Upload Files” page by selecting “Upload Files from the administration tool bar as well.

Upload Files to Exponent CMS File Manager

Once you've selected “Upload Files” you must select the files from your computer that you wish to upload to the file server. To do this click on the “Select Files” button in the upper right corner of the “Upload Files” page.

Select Files to Upload to Exponent CMS File Manager

Once you've clicked on the “Select Files” button you will be given a dialogue box to navigate to the files you want to upload on your computer's Desktop. From there, you can select as many files as you want to upload. In the Exponent CMS 2.0 codeline, you're no longer limited to uploading just one file at a time! Click “Open” once you're done selecting your files.

Select Files From Desktop

Once you've selected your files, you will now see them listed in the files queue to be uploaded. To finish uploading the files, now click on “Upload Files” in the upper right hand corner.

Exponent CMS File Manager Uploader

Once your files are done uploading, all of the bars underneath “Upload progress” will be red.

Finished Uploading Files

And now you know how to upload new images, PDFs and word documents to your Exponent CMS website!