[Music]
Lea Alcantara: You are listening to the ExpressionEngine Podcast Episode #66 where we talk about your Galer-EE options. I’m your host, Lea Alcantara, and I’m joined by my fab co-host, Emily Lewis. This episode is sponsored by Mijingo.com. Mijingo makes it easy to learn something new, whether it’s…
[Music]
Lea Alcantara: You are listening to the ExpressionEngine Podcast Episode #66 where we talk about your Galer-EE options. I’m your host, Lea Alcantara, and I’m joined by my fab co-host, Emily Lewis. This episode is sponsored by Mijingo.com. Mijingo makes it easy to learn something new, whether it’s the step-by-step video or a helpful eBook, you can get up to speed quickly with the proven training materials. Universities, businesses and individuals all use Mijingo to learn about ExpressionEngine, Python, Markdown, OmniFocus, Evernote and more. Learn something new today with Mijingo. Go to Mijingo.com to get started. Use the coupon code EEPODCAST to get 10% off for this week only at Mijingo.com.
Emily Lewis: The ExpressionEngine Podcast would also like to thank Pixel & Tonic for being our major sponsor of the year. [Music ends] Hi Lea, happy April. How have you been since our last episode?
Lea Alcantara: Good. I’ve finished my teaching semester, so I have more time to focus on other projects again which I’m sure will make my clients happy. How about you?
Emily Lewis: [Laughs] I’m good. I’ve been thinking a lot about our last episode where we talked about time saving practices.
Lea Alcantara: [Agrees]
Emily Lewis: As it turns out, I think several of the topics we discussed I’m going to include for my talk for the Engine Summit, which is coming up on May 29th.
Lea Alcantara: Pretty cool.
Emily Lewis: You are speaking there, right?
Lea Alcantara: Yeah, yeah. I’m speaking there, too. After I’ve imported 1,400 contacts this year, I thought it would be nice to share some of my learnings on member management.
Emily Lewis: [Laughs] That sounds good. I’m looking forward to it, too. It’s like those online conferences.
Lea Alcantara: Me too.
Emily Lewis: And Environments for Humans puts together some good speakers and good resources and good prices.
Lea Alcantara: Cool.
Emily Lewis: But let’s not waste any more time today delaying out topic, image galleries.
Lea Alcantara: [Agrees]
Emily Lewis: Or as you said, Galler-EE.
Lea Alcantara: [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: Wah wah.
Emily Lewis: [Laughs] Before we dive deep into the topic though, just what are we talking about with image galleries?
Lea Alcantara: I guess what is an image gallery, it’s pretty much a bunch of thumbnail images that links to larger views and/or a slideshow, I would say.
Emily Lewis: Right. And I was thinking about it further. I think that an image gallery, especially when we are talking in context of a content management system like ExpressionEngine, you have your image gallery that’s on the front end that your audience, your website audience, experiences.
Lea Alcantara: [Agrees]
Emily Lewis: But then you may have an image gallery on the back end, how you are actually managing the images, the thumbnails, the descriptions.
Lea Alcantara: [Agrees] And there is more one way to tackle that. So let’s…
Emily Lewis: The beauty of EE. [Laughs]
Lea Alcantara: Yeah, exactly, exactly. I mean, the good thing about EE is that the first part of what you said there, the experience is all up to us.
Emily Lewis: Right.
Lea Alcantara: What the user sees, but the back end and the collection of images, how we handle that is completely up to the developer to figure out what’s best for the client.
Emily Lewis: [Agrees]
Lea Alcantara: So let’s talk about the native way to deal with ExpressionEngine galleries.
Emily Lewis: Right.
Lea Alcantara: For those who want a little bit of a historical perspective, back in EE 1, there was a gallery module attached to ExpressionEngine which is no longer being offered in EE 2. So I think one of the questions that a lot of our viewers might be, or listeners I guess, thinking about is, “Well, I’m from EE 1 and I used a gallery module. How do we port the information to EE 2?” Well, the long and short of that is there is no real easy way yet. In previous episodes, EllisLab has mentioned they are working on it for sure.
Emily Lewis: [Agrees]
Lea Alcantara: But there is no official word for how the porting could happen right now. Currently, what you can do, and what is kind of good about the EE 1 version is the gallery data is all in one table.
Emily Lewis: Oh, that’s nice.
Lea Alcantara: Yeah, so you could just export it. I don’t know the exact words, but I believe it’s like exp_galleries or something like that, and you can just export the table in phpMyAdmin or whatever, or mySQL program you are using, and that’s the easy part, just exporting the data and then we all know where the folders and images are somewhere via FTP, et cetera, it’s how do we import it back to EE 2 where things get a little dicey.
Emily Lewis: [Agrees]
Lea Alcantara: When I first moved one of my clients to EE 2, they definitely had the gallery and we had to get the site up and running right away and back then, because EE 2 was new, there wasn’t many options available except for channel entries so that’s what I did.
Emily Lewis: [Agrees]
Lea Alcantara: I exported the table in phpMyAdmin and then I used DataGrab to import all the pieces of information into channel entries.
Emily Lewis: [Agrees]
Lea Alcantara: Now, while this works, and obviously, I got the gallery up and running, it’s really a user experience nightmare for your client because it meant having to update images one at a time.
Emily Lewis: Oh.
Lea Alcantara: Yeah. Because each entry then, or if I import it as channel entries, right?
Emily Lewis: [Agrees]
Lea Alcantara: And back then there was no easy way, and it’s still kind of dicey to import data into a Matrix table as well.
Emily Lewis: [Agrees]
Lea Alcantara: So that was my only option at the time and so that it works, but it’s pretty cumbersome.
Emily Lewis: [Agrees]
Lea Alcantara: Now, now, if you are mySQL expert, let’s say, which I’m not.
Emily Lewis: [Laughs]
Lea Alcantara: But I know that there are a few of you out there, you could still export the table and nowadays with the variety of third-party add-ons that’s available, if you know how their table and data structure is created, I know a lot of people try to import all the information into that. However, it’s still not an easy process and no third-party developer endorses one official way.
Emily Lewis: [Agrees]
Lea Alcantara: Yeah.
Emily Lewis: If you don’t mind me sort of taking this project you did with this client and asking you a more businessy question.
Lea Alcantara: Sure.
Emily Lewis: considering that you had to do this import and then the manual updates entry by entry, how did you discuss that with the client? I mean, did you have to get their buy-in considering that this was going to such a manual process, or was it something that they just needed this gallery up and that’s what had to happen to get it done?
Lea Alcantara: It was more of the latter. Essentially, I just explain, well, there is the limitations of the technology at this point in time and that in the future, we will probably, and will be porting it to a different way or different add-on, et cetera and so forth. When you stop and think about it like, at least for this particular client, the gallery is a good thing, but it isn’t the main point of the site, right?
Emily Lewis: [Agrees]
Lea Alcantara: So they were willing to sacrifice a little bit of time to be able to do it like one at a time, et cetera and so forth.
Emily Lewis: [Agrees] That make sense.
Lea Alcantara: Yeah.
Emily Lewis: Yeah, I mean, sometimes if that’s the only way to get something done, then that’s what it is.
Lea Alcantara: Yeah, exactly, yeah.
Emily Lewis: So yeah, I never used EE 1’s gallery. In fact, thinking back, I only have a few sites that I developed in EE 1. I think I started in EE 1.6-something, but for those, I didn’t have a need for an image gallery that needed to be managed from ExpressionEngine.
Lea Alcantara: [Agrees]
Emily Lewis: So I have no experience with that gallery functionality, although it would be nice if that did end up in EE 2.
Lea Alcantara: [Agrees]
Emily Lewis: Because I was reading back over the documentation, and it seemed like a fairly nice way of managing images that way.
Lea Alcantara: You mentioned that if you weren’t using EE as a way to manage images back then, what kind of options would you give your client if they as ask for a gallery?
Emily Lewis: Well, at that point, I wasn’t freelance, I was working as an employee and that wasn’t actually anything that was required at the time, so I never had to address that question, except on my blog, I have in my footer I think like six images that I’m pulling from Flickr.
Lea Alcantara: [Agrees]
Emily Lewis: So for my personal blog, and I stress the personal part because I know how to write HTML and I know how to get stuff into my templates without any issues so I didn’t really have to kind of create that customer experience in EE where I needed to use an add-on to bring in my Flickr images and throw up something that a user could potentially pick on.
Lea Alcantara: [Agrees]
Emily Lewis: What I use was just an RSS parser add-on that pulled from Flickr.
Lea Alcantara: [Agrees]
Emily Lewis: And then I used that to get my output for my “photo gallery.”
Lea Alcantara: Was that the default Magpie?
Emily Lewis: It was.
Lea Alcantara: Yeah, yeah, yeah. And I think what you are using there is pretty common because before you decide to manage your photo gallery or image gallery through ExpressionEngine, the first question you ask is, should I manage my gallery through ExpressionEngine primarily?
Emily Lewis: [Agrees]
Lea Alcantara: What I mean by primarily is obviously whether or not you use it to manage your images, the images need to be pulled somehow through ExpressionEngine. But you were mentioning Flicker which I think is a very common option because it’s a pretty prominent photo-sharing website and there are so many different tools to upload photos through there, and I know for sure that a lot of clients are used to Flickr already.
Emily Lewis: [Agrees]
Lea Alcantara: Even before they come to you, they are comfortable with uploading items through there so they might already have some sort of gallery on there.
Emily Lewis: [Agrees]
Lea Alcantara: And if that’s the case, then there is really no point in having EE manage the images itself.
Emily Lewis: Right.
Lea Alcantara: Yeah. And in that case, ExpressionEngine actually has several different ways you can pull from Flickr.
Emily Lewis: [Agrees]
Lea Alcantara: Yeah.
Emily Lewis: I was looking at the one. You gathered some links in preparation for our discussion today and it’s a Flickr add-on.
Lea Alcantara: [Agrees]
Emily Lewis: And just looking at the screenshot there, I don’t see a whole lot of documentation upon initial glance, but that looks like a really nice interface for a customer to work with.
Lea Alcantara: Yeah, for sure, for sure.
Emily Lewis: It pops up like a ModalBox and it has literally an image gallery from your Flickr photo stream and the user just picks visually. There is pagination at the bottom.
Lea Alcantara: Yeah, and I’m looking at their actual site here, and this Flickr add-on is actually pretty feature rich. It’s got Wygwam integration which is insane, I think, which is awesome, especially because if you have installed Wygwam, clients will inevitably want to add images within that field.
Emily Lewis: [Agrees]
Lea Alcantara: And if you have integrated Flickr, et cetera and so forth, than that just makes things just that little bit easier and it’s also Matrix compatible.
Emily Lewis: Nice.
Lea Alcantara: So that kind of addresses the idea of, “Okay, so I’ve decided that we are going to host the images elsewhere and if it’s specifically Flickr, this Flickr add-on by Brett DeWoody or EE Hive is a really good option.
Emily Lewis: Have you used it yourself?
Lea Alcantara: I remember taking a look at it for one of my clients and fiddling around with it. Yes, yeah.
Emily Lewis: [Agrees]
Lea Alcantara: Yeah, but that was a while ago, so I don’t know if he has added more features or anything like that, but it did what it said it needed to do.
Emily Lewis: [Laughs]
Lea Alcantara: So no complaints about that particular add-on. You don’t have to use a Flickr-specific add-on to pull images from Flickr.
Emily Lewis: Right.
Lea Alcantara: Like you mentioned, you were using the Magpie RSS parser.
Emily Lewis: [Agrees]
Lea Alcantara: You could also alternatively use Andrew Weaver’s Feed Parser as well if you like how that particular add-on handles RSS feeds.
Emily Lewis: Yeah, actually, that’s the one, Andrew Weaver’s Feed Parser is what I’ve been using on all my EE 2 sites, and I’ve been very happy with it.
Lea Alcantara: Yeah, and what’s great too is that Andrew actually has anticipated people are going to be using it to pull Flickr-specific images and he gives you an example on how to pull that in his documentation. Additionally, if you are already using this add-on called REST by Phil Sturgeon, you could also use that to pull your information from Flickr as well.
Emily Lewis: [Agrees]
Lea Alcantara: And the reason why I am mentioning all of these is to say the likelihood of you already having installed REST or Feed Parser is…
Emily Lewis: It’s high.
Lea Alcantara: Yes, exactly. So there is really no point in adding another add-on if you don’t need to just because it’s doing a single particular thing. It’s kind of nice and I think more efficient to use the least amount of add-ons you can and maximize the type of features that each add-on has.
Emily Lewis: Right, right.
Lea Alcantara: Yeah.
Emily Lewis: I couldn’t agree with you more, and I think that’s a good point. With that said, I do want to mention that it’s not just working with an RSS feed or an API or even Flickr. There are a couple of add-ons for other social photo-sharing services.
Lea Alcantara: [Agrees]
Emily Lewis: There is one called Pic Puller for Instagram.
Lea Alcantara: Oh, that’s cool, yeah.
Emily Lewis: I’m on an Android phone so I don’t have Instagram yet. I’m just jealous of everyone who has the old school looking photos. [Laughs]
Lea Alcantara: [Laughs] Yeah.
Emily Lewis: So I haven’t used that one, but that is available. There is also one for SmugMug.
Lea Alcantara: [Agrees]
Emily Lewis: And I know a couple of people that use that. I haven’t actually worked with SmugMug myself.
Lea Alcantara: No.
Emily Lewis: And there is one for Google’s Picasa, it’s called EE Picasa Lite.
Lea Alcantara: Cool, cool.
Emily Lewis: So there is a lot out there. I agree wholeheartedly with your point about the REST or the Feed Parser add-ons. If you are already using those, continue to do so and just extend them.
Lea Alcantara: [Agrees]
Emily Lewis: But if you are looking for something that’s service-specific, there are several options from online. Just go to Devot:ee.
Lea Alcantara: Yeah, absolutely, absolutely. And I’d also point out that all these add-ons, they are pretty recent, right?
Emily Lewis: Oh yeah, I guess, they would have to be considering that photo gallery was part of EE 1.
Lea Alcantara: [Agrees] So it’s interesting how the community has responded to the gallery needs of people. I think that because there has been a delay between the EE 1 port to gallery, like a lot of developers have decided, “Let’s just move away from using ExpressionEngine as our main image management and try to pull from all these other sites.” Especially if their clients are already using it, you know?
Emily Lewis: Well, yeah. I was going to say I wonder if that reflects what I’m perceiving to be reality, at least with my clients, is they are really starting to use these sharing sites.
Lea Alcantara: Yeah.
Emily Lewis: Not just for photos, for YouTube, Vimeo. I’m having to tap into these third-party social sharing services because my clients are already there.
Lea Alcantara: [Agrees]
Emily Lewis: They’ve already have an established audience that they are connecting with there.
Lea Alcantara: Yeah.
Emily Lewis: They are already, like you mentioned earlier, understand how to use the tools to manage their content, whether it’s video or photos or whatever.
Lea Alcantara: [Agrees]
Emily Lewis: So I think it just reflects the fact that more clients are getting involved in these sharing sites to start with before they are even contacting you maybe for a website.
Lea Alcantara: Yeah, for sure, for sure. But on the flipside there is that clients also come up to me too. I noticed my one big client likes to keep everything in EE.
Emily Lewis: [Agrees]
Lea Alcantara: Especially because it’s not because they don’t like these other third-party sites, but it’s that they just want one place to manage all their content. That’s the entire point of content management system, right?
Emily Lewis: [Agrees]
Lea Alcantara: So what are the options for building galleries if you have decided to manage the gallery in EE natively.
Emily Lewis: [Agrees] Well, as for me, I have minimal experience with this. What I have done, and I still don’t even know if I followed “best practices” for this…
Lea Alcantara: Sure.
Emily Lewis: But what I did is I created a channel for a certain group of images because the client that I’m thinking of right now, they had two independent photo galleries, at least in terms of how they wanted to manage the content and how the content would end up on the site ultimately.
Lea Alcantara: [Agrees]
Emily Lewis: So I had channel for each and then I had an entry for each photo. The photo published form would have a file select thing and then it would also have a title and a description in all text and whatever other sort of meta about the image was necessary for ultimate display on the site.
Lea Alcantara: [Agrees]
Emily Lewis: That’s what I’ve done. I have no idea if that was the best way because I was reading earlier today that in preparation for this, that’s one way you could go.
Lea Alcantara: Yeah.
Emily Lewis: But you could also have one channel and have each channel entry containing a set of photos for the entire gallery.
Lea Alcantara: Yeah.
Emily Lewis: So what about you?
Lea Alcantara: Well, like I mentioned a little bit earlier here, I created a channel to manage the galleries for my one particular clients. So I did set it up very similarly to yours. I had a file field, I had a caption field and then I had the title. It’s actually very, very sparse and clean that way.
Emily Lewis: [Agrees]
Lea Alcantara: So it wasn’t really hard for them to manage, it’s just time consuming if they have more than one image to deal with, right?
Emily Lewis: Right.
Lea Alcantara: So that’s when the suggestion of the Matrix is involved, and I know that there is a ton of articles actually of people explaining how they’ve created their photo galleries using Pixel & Tonic’s Matrix so they could have several fields where it’s got the title, the file already in the description and everything all in one place, and then they used the actual channel entry almost like a category to consolidate all those images. So that’s one way to make it a lot more efficient. The problem with that is it’s still uploading one image at a time. It’s still uploading one like…
Emily Lewis: You are entering each one at a time.
Lea Alcantara: Yeah, exactly. So it’s not technically one, you are not uploading, I guess, one at a time until you press “Update” or whatever, but you are still having to go to every single row to upload.
Emily Lewis: [Agrees]
Lea Alcantara: Which isn’t too bad, it’s just that you want to have a better user experience, and I think we will talk about that in a second, but generally speaking, if you want to deal with managing files in image galleries natively, that’s essentially the options that are available to you, making multiple channel fields into files and then to captions and et cetera and so forth.
Emily Lewis: [Agrees]
Lea Alcantara: And then you would be using or teaching your client to deal with the file manager section of ExpressionEngine which has been completely revamped since EE 1 for sure.
Emily Lewis: [Agrees]
Lea Alcantara: And it has been constantly evolving and EllisLab has mentioned it’s a priority for them to make sure that it’s up to date…
Emily Lewis: Consistent.
Lea Alcantara: Consistent, the UI is great, and they’ve also acknowledged that obviously the people use it for images so they’ve added a lot of image manipulation options within the file manager so you could crop things through the file manager as well as resize them. What’s cool, and I know that this was a major feature request for a long time is now there is native resizing which you can call using native ExpressionEngine tags.
Emily Lewis: [Agrees]
Lea Alcantara: So previously, people used to have to use a plugin to auto-resize images into thumbnails.
Emily Lewis: Right.
Lea Alcantara: And now ExpressionEngine, it always had that functionality because obviously they had to create a thumbnail in the control panel.
Emily Lewis: [Agrees]
Lea Alcantara: Now, they’ve just allowed or maybe easier for people to use that via tags these days. I personally haven’t use it yet and that’s mostly because I’ve gotten really attached to this add-on called CE Image.
Emily Lewis: Right, you were telling me about that earlier.
Lea Alcantara: Yeah, yeah. So previously, the add-on that I used was called ImageSizer, but it just hasn’t been updated in a long time.
Emily Lewis: [Agrees]
Lea Alcantara: And the CE Image came out, and basically, it’s constantly being updated. We know that this developer, which is Aaron Waldon from Causing Effect, is really active in the ExpressionEngine community.
Emily Lewis: [Agrees]
Lea Alcantara: And he’s added so many other features to manipulate images just with this add-on as well, so it’s essentially the one that I end up using. I don’t even think about the native options, which is kind of bad, I think, because sometimes we have to readdress and think, “Well, how can we just do this without any add-ons, et cetera and so forth?” But you get comfortable with what you know with the functionality of a particular add-ons.
Emily Lewis: Yeah. Well, CE Image as I’m looking at it, it’s not expensive, and like you said, if it’s something you are already familiar with, you know how to train your clients how to use it, then that’s the comfortable to go.
Lea Alcantara: [Agrees]
Emily Lewis: Now, I have used the native resizing.
Lea Alcantara: Oh cool.
Emily Lewis: And I have to say that perhaps I need to read the documentation. I guess, maybe it wasn’t clear to me, but there are some limitations, at least in terms of what my expectations were. You can specify, for example, and maybe like I said, this could have been all about my expectations.
Lea Alcantara: Sure.
Emily Lewis: But let’s say, I need to resize it to a 100 pixels wide because that what’s going to fit in with my template.
Lea Alcantara: Sure, yeah.
Emily Lewis: Well, it doesn’t proportionally resize, so it will reduce the width to a 100 pixels, but then it doesn’t proportionally change the height.
Lea Alcantara: Oh, weird. Yeah, that would be my expectation too that it would. If I made a width of 100, that everything would be proportionally resized too.
Emily Lewis: Right.
Lea Alcantara: Yeah.
Emily Lewis: Now, if you know your clients are always uploading 800 x 450, then you come up with a math that does the resize, the width and the height together, to get that undistorted image.
Lea Alcantara: [Agrees]
Emily Lewis: But I didn’t have that luck and so I ended up having it just to make sure that the client workflow was such that they weren’t throwing images that would resize funky…
Lea Alcantara: Yeah, yeah.
Emily Lewis: With the weird proportion.
Lea Alcantara: Yeah, yeah, for sure.
Emily Lewis: So that’s why I’m glad you mentioned CE Image. I hadn’t been aware of it. I was aware of image resizer and I’m curious because you were telling me that CE Image, from your opinion, is much better supported than the image resize that I had posted to you earlier. Where do you find anything about that? [Laughs]
Lea Alcantara: [Laughs]
Emily Lewis: Are you like staying on their support forums? Like how do you find out that one add-on has sort of fallen off in development and another has sort of taken off? How are you figuring that?
Lea Alcantara: Well, part of it is when you go to Devot:ee, the comments.
Emily Lewis: [Agrees]
Lea Alcantara: And it pretty explain that this hasn’t been supported in a while, or you could just see that the last time this has been updated is 2011, and then when I’m looking at CE Image, it says, “Release date, February 13, 2012.” So the last time Aaron has touched CE Image is this year, so only a couple of months ago versus the other one. So Devot:ee is actually a pretty good resource in just seeing what the dates are.
Emily Lewis: [Agrees]
Lea Alcantara: And seeing the comments and the reviews that just lets you know that. It’s not like there is anything wrong with ImageSizer because it still works, but when it stops working or if you needed extra features, that’s where things start going wonky. I think that’s how I found out about CE Image personally was when I was working on a client, I believe, and I was trying to update something and I guess there was a conflict with ImageSizer. For whatever reason, it just wasn’t working and I was trying to find out what’s going on and blah, blah, blah, and then in the end, doing a little bit more research, it just pointed me to CE Image after the comment saying, “Try CE Image instead of this one.”
Emily Lewis: [Agrees]
Lea Alcantara: So that’s how I found out about that particular add-on and worked on it.
Emily Lewis: Okay, so I need to spend more time on Devot:ee. [Laughs]
Lea Alcantara: [Laughs]
Emily Lewis: Well, for me, I think it’s the same situation that you just described. I’m probably not going to be paying attention to were an add-on has been updated or hasn’t been updated until it comes time that it has caused a problem because I’m updating something else.
Lea Alcantara: Yeah, yeah. And then that’s usually the case when you are starting to do like EE 2 upgrades, right?
Emily Lewis: [Agrees]
Lea Alcantara: Especially if you are especially sensitive about that because if you know that EE 2 is continually updating its hooks and all that fun stuff or rearranging things, I have more confidence when the dates says 2012. [Laughs]
Emily Lewis: [Laughs] Right.
Lea Alcantara: And yeah, usually you don’t notice anything necessarily wrong until you do the upgrade and then suddenly the thumbnail doesn’t work.
Emily Lewis: [Agrees]
Lea Alcantara: And you are trying to figure out why is this thumbnail not working, and there are so many different reasons why. With this particular client, I actually found out it wasn’t the add-on. The add-on was working. The permissions were incorrect with the cache folder to create the thumbnails.
Emily Lewis: [Agrees[
Lea Alcantara: But that only happened because we moved servers, right?
Emily Lewis: Okay.
Lea Alcantara: And so permissions weren’t transferred perfectly with the new server and thus the thumbnails stopped working at that point. But it took me a while for that to be figured out and by that time I just switched to CE Image.
Emily Lewis: [Laughs]
Lea Alcantara: Just because it’s like, “Well, this isn’t working in this for whatever reason despite the permission thing, maybe because they created new folder based on whatever the setup was.” It started working and that’s essentially how I got to use that.
Emily Lewis: [Laughs]
Lea Alcantara: Yeah.
Emily Lewis: So you also have a couple of links to some add-ons. You have one for Image Directory Gallery that you shared with me earlier today. What does this do?
Lea Alcantara: So if you just have a super, super simple gallery, so basically this Image Directory Gallery is you point it to the folder and if it understands that it’s got JPEGs or PNGs or GIFs or whatever there, it will actually just list out all the files.
Emily Lewis: Oh.
Lea Alcantara: Yeah.
Emily Lewis: Just right on the page.
Lea Alcantara: Yeah.
Emily Lewis: The template.
Lea Alcantara: Yeah, yeah, exactly. So it will list out what the file images are, et cetera and so forth, and it’s just like a really super simple way if you don’t have anything complicated to deal with, then I guess if you are also teaching your client to just upload things to file manager.
Emily Lewis: [Agrees]
Lea Alcantara: And let’s say it goes through a particular folder and then you have this Image Directory Gallery, then we could just have it listed or if you just do something to FTP, you just point everything to that gallery and then it will just list all the images in the directory, and if you pair that with something like CE Image, you’ve got a pretty like automated gallery with very, very little bells and whistles.
Emily Lewis: [Agrees]
Lea Alcantara: I think this is best used if you’ve got like very limited user interface needs.
Emily Lewis: [Agrees]
Lea Alcantara: Like if you just want to say quickly double bunch your images and just have something pop up based on your template, based on that directory. It’s pretty straightforward.
Emily Lewis: That’s cool.
Lea Alcantara: Yeah.
Emily Lewis: And you are also mentioning Pixel & Tonic’s Assets for a fancy file management.
Lea Alcantara: Yeah, yeah. So if you decided that ExpressionEngine’s native file management stuff to deal with your gallery isn’t enough simply because it doesn’t have all the bells and whistles in order to alter metadata or information or you just still want a little bit more oomph in your file management, Pixel & Tonic’s Assets, it uses that concept where if you already have it, just like I said with the REST or the Feed Parser add-ons or whatever, then instead of choosing a different add-on that’s just specific for galleries, you might as well try to use Assets to manage your images and gallery files as well.
Emily Lewis: Nice. On that, I have actually not given Assets a try yet, so that might be my first case to use it because I know it would be useful for other things.
Lea Alcantara: [Agrees] For sure, for sure. However, now we’ve like exhausted essentially some of the really easy ways, native ways and third party ways to deal with it, the add-on that I actually do use, and if a client goes up to me now and says, “I need to have an image gallery and I want to manipulate this through ExpressionEngine,” the add-on I use is Channel Images by DevDemon.
Emily Lewis: [Agrees]
Lea Alcantara: Because it is so straightforward and it’s essentially kind of that Matrix concept where you take a channel entry and then you can upload multiple images into that entry.
Emily Lewis: [Agrees]
Lea Alcantara: And Channel Images basically is that and more because instead of having to still kind of manually do one at a time, it takes the logic of user experience for, let’s say, if I want to upload multiple images, you just press the “Choose files.” I forget, like it’s not front of me right now, but like the browse button once and then you could just select all the images at once…
Emily Lewis: And do a batch upload.
Lea Alcantara: Yeah. And then you do a batch association and upload. What’s also great about that particular thing too in comparison to the other ones is that the native options and all these other options that we mentioned are specific to your web host only.
Emily Lewis: [Agrees]
Lea Alcantara: So you can only upload to your web host. What Channel Images does is it also allows you to upload through Amazon S3 which is particularly important for one of my particular clients.
Emily Lewis: Nice.
Lea Alcantara: They want to host all their images, et cetera.
Emily Lewis: On the Cloud.
Lea Alcantara: Yeah, on the cloud, the Amazon S3, and beyond just Amazon S3, they also have options so that it can hook up to Rackspace Cloud as well.
Emily Lewis: Nice.
Lea Alcantara: So yeah, exactly, and there is the categories built in to that one interface and there is also different image auto-create thumbnails. It’s just basically all your gallery options in one field, and yeah.
Emily Lewis: So do you use this with the CE Image?
Lea Alcantara: No, because Channel Images has all the resizing options…
Emily Lewis: The resizing and everything.
Lea Alcantara: And image manipulation options all in one place.
Emily Lewis: Nice.
Lea Alcantara: So if you really, really wanted an all in one solution for galleries, I haven’t found one that’s just so complete as Channel Images.
Emily Lewis: Nice.
Lea Alcantara: And I think Channel Images was one of the first solutions that came out when there wasn’t a solution for EE 2 galleries, and I have to say that when I first heard about it, I was kind of like, I don’t know…
Emily Lewis: Eh?
Lea Alcantara: …“meh” right? [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: Exactly, but obviously, as with every developer that decides to stick around ExpressionEngine community, they have vastly, vastly improved their product.
Emily Lewis: [Agrees]
Lea Alcantara: So one of the things that I had issues with at the beginning, I didn’t like their user interface and that has improved a lot, so now I find it a lot more user friendly. It’s a lot more attractive. It’s easier to explain. I mean, my only critique is that it’s almost too much.
Emily Lewis: Oh.
Lea Alcantara: Do you know what I mean?
Emily Lewis: Like Photoshop. [Laughs]
Lea Alcantara: Yeah, yeah, it’s almost too much. Like so you kind of want to have, when you install it, like maybe a couple of options where at the install, it should ask if you have a basic or an advanced installer or whatever, because sometimes it’s almost feature rich, right?
Emily Lewis: [Agrees]
Lea Alcantara: And that causes some issues maybe with explaining to clients, but sometimes if all the client wants is just one interface to upload and then they can add the title, the caption, and all that fun stuff in one place, I think it’s pretty good.
Emily Lewis: Cool. So I know this sort of puts you on the spot.
Lea Alcantara: [Laughs]
Emily Lewis: And I completely recognize that every project is different.
Lea Alcantara: Sure.
Emily Lewis: And this obviously is not endorsing anything over another, but from what you can see with your clients and the various projects you’ve had that have different image galleries, would Channel Images be like the best solution you would say from the client’s perspective for working with EE and managing images?
Lea Alcantara: Based on the stuff that I researched, yes.
Emily Lewis: Okay.
Lea Alcantara: Yeah, yeah, absolutely. Because just the training itself, after you’ve set it up, it’s just dead simple, right?
Emily Lewis: [Agrees]
Lea Alcantara: And believe me, [Laughs], I have clients who don’t know their left from their right sometimes… [Laughs]
Emily Lewis: Right. You need simple.
Lea Alcantara: Exactly, exactly, and if I was able to train them how to use this, it’s pretty straightforward. Yeah, for at least until someone, “Here is a challenge, listeners,” until someone comes up with something better, I think Channel Images is going to be my go-to solution if I don’t decide to use a third party option for hosting gallery images.
Emily Lewis: Right.
Lea Alcantara: Yeah.
Emily Lewis: Cool. All right, so I think we’ve exhausted at least what we can about using ExpressionEngine to manage the photo galleries. I wanted to talk just a little bit about translating the photo galleries that you are managing in ExpressionEngine to the website.
Lea Alcantara: Yeah.
Emily Lewis: How these photo galleries are being displayed online?
Lea Alcantara: [Agrees]
Emily Lewis: So with ExpressionEngine, one of my favorite things, and I always talk about it, is that I have a hundred percent control of the HTML.
Lea Alcantara: Yes.
Emily Lewis: Which for me is such a big deal, and I just wanted to mention a couple of things or kind of ask you what you generally use in terms of your markup for putting together a photo gallery. Do you rely on what maybe the jQuery plugin that you might use requires, or do you like to hand code it and make the jQuery work to your will?
Lea Alcantara: Interesting question because if I wasn’t using a jQuery script and let’s just say it was just Channel Images rendering my images, I would use an unordered list.
Emily Lewis: [Agrees]
Lea Alcantara: It’s just essentially to me, I think, a gallery is a list of images, ergo an unordered list.
Emily Lewis: [Agrees]
Lea Alcantara: Although I guess technically it could be an ordered list as well like if you can argue that there is some sort of order to these images, but my default go to HTML choices unordered list. But if I am using a jQuery script to do something, I always use what the jQuery script tells me to do in the demo.
Emily Lewis: Yeah. I wish I was like that. [Laughs]
Lea Alcantara: [Laughs]
Emily Lewis: I wasted a lot of time because I’m really not… I still consider myself a beginner when it comes to JavaScript and jQuery.
Lea Alcantara: Yeah, for sure.
Emily Lewis: I wouldn’t say anything more than that, and I’ve spent hours to rewrite jQuery to work with my markup and instead of just “whatever, it’s fine.”
Lea Alcantara: Well, that’s exactly why because I’m not an expert in jQuery.
Emily Lewis: [Agrees]
Lea Alcantara: I’m not an expert in JavaScript, so if this is what the developer has decided should be rendered in order to make it work, I just use the example that they have.
Emily Lewis: And it’s probably the smartest way to go. The more I’m freelancing, the more I’m realizing how much time I wasted as an employee trying to get things done sometimes. Now that I’m the one that’s dealing what pained me… [Laughs]
Lea Alcantara: [Laughs]
Emily Lewis: I’m seeing it more.
Lea Alcantara: Sure, sure.
Emily Lewis: Well, speaking of those sliders or light boxes or slideshows, do you have a preference?
Lea Alcantara: Yeah, I almost always use NivoSlider.
Emily Lewis: I hadn’t heard of this one before you mentioned it to me today.
Lea Alcantara: Yeah. I found it after scouring those web articles where it’s like 50+ jQuery sliders and et cetera and so forth.
Emily Lewis: [Laughs]
Lea Alcantara: And what I liked about it was that it’s only 12 kilobytes, okay?
Emily Lewis: [Agrees]
Lea Alcantara: So I’m always looking at any script that is lightweight, like that’s always my number one thing, is this lightweight? And then after that has been check marked then, is this easy to implement?
Emily Lewis: [Agrees]
Lea Alcantara: And so with me, with NivoSlider, which will probably drive you crazy, but all you really need is a div with an ID that you would call slider and then image tags inside it. It’s not bad, but I mean, it’s not maybe semantically correct if it needs to be on unordered list and all that fun stuff.
Emily Lewis: Right.
Lea Alcantara: But if I wanted to get it up and running.
Emily Lewis: Yeah.
Lea Alcantara: And also this is what I’ve taught like my beginner interface design students because it’s a no brainer.
Emily Lewis: It’s simple.
Lea Alcantara: I just say, “Make your image tags, put the div ID slider and then plug into jQuery script stuffed in your head, and voila, it works.
Emily Lewis: Right. Yeah, well, as much as I love semantics, I also appreciate efficiency and simplicity.
Lea Alcantara: Yeah.
Emily Lewis: But almost exclusively, I use AnythingSlider.
Lea Alcantara: Okay.
Emily Lewis: Which I think Chris Coyier had put it together a couple of years ago.
Lea Alcantara: [Agrees]
Emily Lewis: And it’s been forked over the years with a lot of contributions to it, but why I like it is because it’s simple.
Lea Alcantara: Yes.
Emily Lewis: It’s easy to get set up and its semantic markups. [Laughs]
Lea Alcantara: [Agrees]
Emily Lewis: That sort of scratches that itch for me.
Lea Alcantara: Yeah, yeah, yeah.
Emily Lewis: And for me, like I said, jQuery can be challenging for me. It’s very easy for me to read and find out where I can customize because I always somehow end up going in and customizing stuff.
Lea Alcantara: Yeah, yeah, for sure, for sure.
Emily Lewis: Now, one thing I did want to ask you about, and I guess this sort of jumps back and forth since I had talked about markup earlier.
Lea Alcantara: Sure.
Emily Lewis: Have you worked with any of the new HTML 5 elements for images?
Lea Alcantara: Yes, I have. But I haven’t really wrapped my mind around how to use it for a gallery because I guess whenever I think about figuring figcaption, I think about one like header image.
Emily Lewis: Right.
Lea Alcantara: Do you know what I’m saying?
Emily Lewis: [Agrees]
Lea Alcantara: And I guess it almost feels like, I mean, like to me, this is just my personal opinion, HTML 5 is a good double edged sword.
Emily Lewis: [Agrees]
Lea Alcantara: Because I feel like we are adding so much more markup over something where, well, an unordered list with a list item tag around an image tag isn’t as heavy as, say, an unordered list with the list item tag and then I’m going to add the figure tag and then I’m going to add the image tag and then I’m going to add the figcaption. Do you know what I mean?
Emily Lewis: [Agrees]
Lea Alcantara: So in those cases I feel like if I’m going to use figure and figcaption, I’m going to use it for one giant image.
Emily Lewis: Right, like maybe a hero shot or something.
Lea Alcantara: Exactly, exactly. But for a gallery, then I feel like, “Well, if I’m going to have 20 thumbnails…”
Emily Lewis: That just gets so heavy.
Lea Alcantara: Exactly, exactly. So I feel like if I’m going to be using an image gallery, I don’t know if maybe it would be more correct, I guess, to use a figure. I don’t know.
Emily Lewis: I think the…
Lea Alcantara: I’m not sure.
Emily Lewis: I think the word “correct” is so hard to nail down these days.
Lea Alcantara: [Agrees]
Emily Lewis: I think you bring up a really good point about HTML 5 being a double edged sword. Yet, for myself when it comes to these more narrow elements with figure and figcaption like the highly semantic elements that have been introduced, they are very, very specific.
Lea Alcantara: [Agrees]
Emily Lewis: I feel really similarly that they don’t lend themselves to all used cases where something that’s a little less specific.
Lea Alcantara: [Agrees]
Emily Lewis: It’s kind of like writing CSS.
Lea Alcantara: Yeah.
Emily Lewis: If you get too specific, you end up with so much CSS just to cover everything you need to do.
Lea Alcantara: Yeah.
Emily Lewis: Whereas if you are a little less specific and kind of think object-orientedly, then you can be more efficient.
Lea Alcantara: [Agrees]
Emily Lewis: So I think that was a good point and I agree with you. I haven’t used figure and figcaption and I don’t think I would in an image gallery context.
Lea Alcantara: Yeah, what’s interesting is I’m looking at the link that you put in our notes here about the figure and figcaption.
Emily Lewis: [Agrees]
Lea Alcantara: And they have an example with multiple images and they’ve wrapped the entire figure tag around multiple images.
Emily Lewis: And to me that doesn’t seem semantic.
Lea Alcantara: Yeah, exactly. To me I feel like okay, I guess it’s a group of, at least with the image at the article that I’m looking at, it’s a group of birds.
Emily Lewis: [Agrees]
Lea Alcantara: So they are saying, “Okay, here is a figure tag around all of them.” But figure to me is a singular element.
Emily Lewis: Right.
Lea Alcantara: It’s not figures, you know? [Laughs]
Emily Lewis: Right.
Lea Alcantara: And I don’t know what, now if we are just being nitpicky at this point, but I feel like I guess that’s one of the things that’s still ongoing with HTML 5. There are still so much discussion over what’s the correct semantic way to deal with this.
Emily Lewis: [Agrees]
Lea Alcantara: Right?
Emily Lewis: Yeah. The last think I want to say before we tie things up today is that whenever you are working with images, dear listeners, please don’t forget your alternative text.
Lea Alcantara: [Agrees]
Emily Lewis: That’s your Alt attribute.
Lea Alcantara: [Agrees]
Emily Lewis: It goes like next to the image source attribute in your markup.
Lea Alcantara: Yeah.
Emily Lewis: And it’s really important for accessibility. I just want to point out, accessibility doesn’t have to be limited to users with special needs or assistive devices. Accessibility is also machines like search engines.
Lea Alcantara: [Agrees]
Emily Lewis: So I try and encourage my clients when they are adding images, I make sure the all text field is required and I explain to them that it’s not only an opportunity to describe the image for people who can’t perhaps see it, but it also gives you a good opportunity to have some good content about your site in the image for search engines.
Lea Alcantara: What’s interesting about that is for me, sometimes I just put the caption image in the alt.
Emily Lewis: Yeah.
Lea Alcantara: So if they don’t have anything alternative, that or the title, depending on how I described how they are going to enter in the image.
Emily Lewis: [Agrees]
Lea Alcantara: Sometimes the title is descriptive enough that I’ll just duplicate that to put that into the Alt tag or verses as well as the caption.
Emily Lewis: [Agrees]. You know, I have never considered that, but I think that’s a good suggestion.
Lea Alcantara: Especially when you are training your clients, they understand what a title is.
Emily Lewis: [Agrees]
Lea Alcantara: They understand what a caption is, but then if you kind of try to explain, “Well, give me an alt text.” Well, technically, you can argue that the caption is probably descriptive enough.
Emily Lewis: Right.
Lea Alcantara: Or the title, depending on how you explain what the title is, would be descriptive enough to say, “This is what this is.”
Emily Lewis: Good point, and now, going that route just removes one more field that the client doesn’t have to enter something into.
Lea Alcantara: [Agrees]
Emily Lewis: Great.
Lea Alcantara: So I think we’ve covered a lot.
Emily Lewis: We sure have. I’ve just looked at the clock, my goodness. [Laughs]
Lea Alcantara: [Laughs] So I think we should end there. That’s all the time we have for today. [Music] We would like to thank our sponsors for this podcast, Mijingo and Pixel & Tonic.
Emily Lewis: We would also like to thank our partners, EllisLab, EngineHosting and Devot:ee.
Lea Alcantara: Also, thanks to our listeners for tuning in. If you want to know more about the podcast, make sure you follow us on Twitter @eepodcast or visit our website, ee-podcast.com.
Emily Lewis: And you won’t want to miss our next episode when we will have EllisLab visiting the podcast again. Be sure to check out our schedule on our site at ee-podcast.com/schedule for more upcoming topics.
Lea Alcantara: This is Lea Alcantara.
Emily Lewis: And Emily Lewis.
Lea Alcantara: Signing off for the ExpressionEngine Podcast. See you next time.
Emily Lewis: Cheers.
[Music stops]
