Photos in EE Two

In the previous tutorial I covered using the photo uploading option in the control panel for adding images to your articles. Here I cover other methods of doing so. Perhaps a better term would be file uploader because you are not limited to pictures alone.

Gallery Extended

While covered somewhat in Publish From a Template, the Gallery Extended module needs more written on it alone. A major addition to any site, it now has a tab in the control panel to upload images to the gallery using the gallery preset image sizing for thumbs and medium size images. It then relates those images to your entry.

The module also has it’s own control panel. There one can edit photos much like in the gallery, with the bonus option of being able to list photos by weblog entries for editing. One of the advantages on this module is onle click uploading and resizing, making it super simple for users, even in a template outside the control panel.

One can upload any number of images wanted. This is the easiest and simplest way to add Gallery images to posts, or even make Gallery Weblogs. Available from Solspace.com.
Gallery Extended entry code in template:

{exp:gallery_extended:entries gallery_name=“Your Gallery” type=“weblog” dynamic=“on” related_id=”{entry_id}” orderby=“entry_date” sort=“asc”}
<img src=”{thumb_url}” width=”{t_width}” height=”{t_height}” alt=”{title}” />
{/exp:gallery_extended:entries}

It will repeat for the number of images uploaded for the entry.

Adding To Articles

As many extensions use code in the templates, one wants to know how to be able to include these in various places in the flow of text.

To start we need the plugin Allow EE Code . This allows adding EE tags to our entries.

{exp:allow_eecode }
{body}
{/exp:allow_eecode}

1) Use the Allow EE code in entries plugin.
2) Use Default HTML buttons to add the code with offset=“x” and limit=“1” etc right into the entry.

example button:
Tag name Image 3

Opening tag:
{exp:gallery_extended:entries gallery_name=“gallery” type=“weblog”
related_id=”{entry_id}” limit=“1” offset=“2”}
Closing tag:
<img src=”{thumb_url}” width=”{t_width}” height=”{t_height}” alt=”{title}” />
{/exp:gallery_extended:entries}

The above creates an html button in entries which adds the third photo into an entry with one click. Add any number, changing offset, and one can include photos very easily into text.

Example article using above:

<div class=“left”>
{exp:gallery_extended:entries gallery_name=“gallery” type=“weblog”
related_id=”{entry_id}” limit=“1” offset=“2”} <img src=”{thumb_url}” width=”{t_width}”
height=”{t_height}” alt=”{title}” />
{/exp:gallery_extended:entries}</div> Here I added the third image uploaded by
simply clicking on the second button above in Default HTML Buttons.

Gallery Extended + allow EEcode + HTML formatting buttons = 1 click resize and add photos anywhere in an entry.

Edit Links

Here I used the code for the gallery medium image popup, (see page bottom), and added edit links for the image - opens image in gallery editing, and the article - opens cp to edit entry.

File Browser:

The capabilities of the File Browser in expression engine is little understood. It has far more potential than most realize. Below these are covered more.

One of the first options is to set a number of upload directories which will help in keeping your images organized, and easier to find! Here I am using an example from a clients site BKDesign is doing. Note the main image directory is named a-images. This is only a system name, not a directory name, the actual folder is /images. The reason for this is that the list is alphabetical and we want the main image folder to show by default for selecting and uploading images.

This screenshot, used in the tutorial on uploading photos, also shows another option below the File Upload. File Browser. What this does is allow browsing through all files in the upload directories, of which there can be many, and many different kinds. This is included in EE.

If one wanted, you could make the directory of your iamge gallery an upload folder as well, allowing selecting images from the gallery. One can also select multiple images here..

Here I have selected an image and click on “View image” to check it’s the one wanted. Next one would “Insert link” which would insert the html for an image link into the body field. notice on the left the image names are organized by folder.

Here I am in one of the image directories and have selected a photo. At the bottom you can see “View Image” which I have clicked on here and it is showing the thumbnail of the selected image. One can then choose to place it into any field selected. The other two options are, insert link and insert url.

I used EE for a long time before this dawned on me. Here I made my photo Gallery image folder an upload directory. This allows one to select images right from the gallery to include. One can also select multiple images (ctrl select on pc).

The “insert link” will write the code for an image and place it in the selected field, and if it is a file will write the code for a download link.
Examples:

Image file, insert link:

mp3 file, insert link:
OuterLimitz-30.mp3

MP3 file, Insert URL:
http://www.bkdesign.ca/files/OuterLimitz-30.mp3

The first creates a download link or shows the image, the second inserts the path and filename only.

A podcaster for example could do both with a video or audio file, first inserting the url and filename into a custom field which creates the player right on the page and plays the file, the second time while still there inserts link into another field which makes the download link, and also adds it to the rss podcasting file. All automatically.

This is a very powerful tool that needs to be learned and taken advantage of.
Note: Insert URL was added in version 1.5.2. For more on this see the article Custom Fields in ExpressionEngine

File Manager:

The File Manager Module is an add-on module developed for EE which allows you to:
View the files in any of your directories.
Batch delete files.
Batch upload any number files.
Resize images (if they are too large).
Create or delete directories on the server.
Restrict access according to Upload Destination/Member Group rights.
Shows copy and paste info to include any file in articles.
View or edit files on the server.

This is a very often misunderstood module. When adding a directory on your server to this mod, it pulls in every file in that directory and makes it editable!.

I seen that xml files weren’t editable, but it was a simple matter to add them to the editable files list.
(mcp.file_manager.php - line 34 -add xml to editable files).

One place I often use this is to add the site design to an outside program, not to mention an easy and simple way to edit any file on the server.

You can see the options here. For anyone doing a lot of file work this is a handy add-on to EE.

Here is the “View Files” area where I have selected a directory. At the top is the file info. Files other than media can be edited here as well, it will have Edit for those. Images can be viewed as shown above.

At the bottom right is delete and “Show copy and paste Info”.
Select the file(s) or image(s) wanted. I have selected several images and below is the result after.

Next is a window with the link to the image or file can be copied. Going to your article you can paste in where wanted and you are done. I added an image below.

available here at loweblog.com.