our blog

How To, Version “Non-Geek Speak”: Adding Media Objects in ExpressionEngine

Adding Media Objects in Expression Engine

A few weeks back our front-end developer, John Johnson (a.k.a. JJ), wrote the wonderfully geeky blog post “How To: Add Media Objects to the Body of Your ExpressionEngine Entries.” If you read it and understood it, kudos! You must be a web developer. If you’re like me – someone who uses ExpressionEngine to update my website’s content – then read on.

Back story: For many years, Terrostar relied on a content management system (CMS) that was developed here, in house. It was simple and fast and we knew it inside and out. Because we owned it, we could customize it any way we wanted to. But even with all of its perks, it had a major drawback – adding media objects to the body of your page was a PAIN! (BTW, media objects are pictures, logos, videos, or embedded HTML like a Google map.)

For example, in the old system, if you wanted to add a photo to a page, the image had to be resized and optimized before it could be uploaded to your website. This means you would have to open your picture in an image editor like Photoshop or Microsoft Picture Editor, resize the image to specific dimensions, and then save a low resolution version of that image somewhere on your computer. Next, you would open the CMS, browse to the page where you want the image placed, and then upload your edited image. From there you would have to align the image and then add padding around the image so your text wouldn’t butt up against it. Oh my.

Even more complicated was the process of adding a whole group of photos or graphics to a page. Here’s an example from a client of ours, The Quad Cities Marathon. In the old CMS, each and every logo on this page had to be resized to a consistent width. Then, the admin had to build a table with no borders and cell padding. Each logo would be inserted into a table cell. What?

This painful process wasn’t the only reason we switched to ExpressionEngine, but it contributed! Since then, my FAVORITE feature of ExpressionEngine is JJ’s media objects embed tool. Here’s how it works.

When I’m editing a page, just below the Body text area, I have the option to choose a Body Figure Type – Image, Video or Embed. In this example, I’ll choose Image. This creates a little table with four columns – Text Editor Code, Image File, Align, and Image Grid. In the Image File column I add my image files; as many as I want with no need to resize or optimize beforehand (JJ has taken care of that for me). In the Align column, I choose Full, Left, or Right. In other words, do I want my picture to take up the width of the page or be aligned to the left or right on the page? No need to add padding around the picture either (JJ took care of that too). In the Image Grid column, I choose No Grid/One Column (if it’s just one picture), Two Column, Three Column, or Four Column. When I’m done, I copy the code in the Text Editor Code column and paste it in the body of my page and submit! Phew!

Here’s what that looks like in the CMS.

Here’s how my webpage looks.

We like to joke that it’s “so easy a baby could do it.” But, seriously…it’s easy.

Don’t take my word for it. Recently, we launched a new website for one of our favorite clients – The Family Museum. They had years of experience with our old CMS and are now using ExpressionEngine. So, I asked Elly Gerdts, their website admin, what she thought of this feature.

“ExpressionEngine makes adding photos to our website so much easier. The interface is much more user-friendly, and I find myself adding and changing photos more frequently than before. Our old CMS was a bit cumbersome, and I only added or changed photos when I needed to. Now I change photos and images more frequently, and with online experiences becoming more and more visual, this is a great change for my website.”

She even went on to say…

“ExpressionEngine has changed how I approach my website strategy. I now have more control over almost every aspect of my website. Before, I was so restricted on what I could change, that I didn’t change much. Now I can easily make adjustments on a daily basis, and this comes in handy since our programming changes regularly. Since I update the website more frequently, visitors have more reasons to revisit the site.”

Thanks, Elly! We love it too.