April 30, 2015

Apply Filters
Apply Filters
Episode 39 - Commercial Plugins on GitHub, Welcome Screens, Comparing Plugins, Responsive Images
Loading
/

Episode 39 covers some recent discussions about plugin authors redirecting users to welcome screens after installing updates, releasing commercial plugins on public GitHub repositories, how we compare similar plugins, and some new(ish) developments on responsive images.

This episode was sponsored by WP Ninjas, the creators of Ninja Demo and the highly popular Ninja Forms plugin.

ninja-forms-540px

Show Notes:

Transcript
INTRO: Welcome to Apply Filters, the podcast all about WordPress development. Now here’s your hosts, Pippin Williamson and Brad Touesnard.

BRAD: Welcome to Episode 39. Today, Pippin and I will be talking about what we’ve been up to, a few news items, some recent discussions, and then we’re going to talk about responsive images in WordPress. But first, a word from our sponsor.

PIPPIN: All right, once again, this episode is sponsored by the WP Ninjas, the creators of Ninja Forms and Ninja Demo, and a couple of other awesome plugins. They, just yesterday, announced a new bundle option that they’re offering for their extensions as kind of a membership bundle that allows you to get all of their extensions for a single price. If you’re using Ninja Forms, and you want to take a look at their extensions, you want to build them for your customer sites or for yourself, it’s definitely a great option to go look at. It’s over 31 add-ons now, 31 add-ons and counting that are included for some pretty significant discounts, so go check them out at NinjaForms.com, and head over to their blog to read about the new bundle option.

BRAD: Yeah, so we’ve been slaving away at the new version of Migrate DB Pro. We’re going to be releasing a 1.5 with some new features in it, including the multisite tools add-on.

PIPPIN: I cannot wait to see that multisite stuff.

BRAD: Yeah, and another thing we’re going to have is a little throttle on the settings tab so that you can actually slow down migrations. That’s going to be a neat little thing.

PIPPIN: Sweet. Would that be primarily for servers that just can’t handle how fast the data has been processing?

BRAD: It’s actually for security systems because some security systems–

PIPPIN: Oh, because it flags them as just too many requests?

BRAD: Yeah, too many requests in too short of time.

PIPPIN: Gotcha.

BRAD: So we’ve got to actually slow down the migrations for some servers, so that’s that thing. Then we’ve been working on the Amazon plugin as well a bit. I’ve been working on the site for that, so the site that basically sells that plugin.

PIPPIN: Nice. Is that going to be a new, standalone site, or is it part of Delicious Brains?

BRAD: That’s going to be part of Delicious Brains. Yeah, we kind of go with the Apple model where all the products are under one umbrella, kind of thing.

PIPPIN: Yeah, I’ve still been going back and forth on that as well. I mean things like EDD and Affiliate WP are slightly larger platforms, maybe, that I felt didn’t work in my own site. But I’m actually now looking at doing the opposite of that with my Restrict Content Pro plugin. I’m looking at building it out into its own site as well.

BRAD: Okay.

PIPPIN: I think they both have their merits, for sure.

BRAD: Right now it’s part of your site, is it, your personal site?

PIPPIN: Right, it’s on PippinsPlugins.com.

BRAD: Right. Yeah. I think it makes sense if your products are very well related, like if, your customers, there’d be a lot of crossover.

PIPPIN: Yep.

BRAD: It kind of makes sense to put them under an umbrella. But if they’re pretty different or they have different customer bases, then it kind of makes sense just to have separate sites, right?

PIPPIN: Definitely.

BRAD: Yeah. Anyway, what have you been working on?

PIPPIN: Well, this last week has been awesome, mostly because it’s been my first — my last week and a half have been kind of back to normal, so most people know that two weeks ago, or somewhere in that timeframe, there was a major security update for–I don’t know–50, 60, 70 plugins, along with WordPress core, related to cross-site scripting. I had several plugins that were included on that list, and getting that bug fixed, which was actually a very minor, very trivial bug to fix, was actually really, really an intensive process.

Because of the bug, we actually had to go back and patch 53 versions of EDD, so we went all the way back to version 1.8 and patched every single point release in between, which was 53 of them, and then deployed those updates. So going through the process of testing every single one of those, creating all the patch files, testing them extensively, running all the unit tests, and then also doing that with — I think we did it with 36 of our extensions for EDD as well that were affected by the issue. It was just a really extensive process.

BRAD: Did WordPress — I guess WordPress.org, did they do a force update for all those versions that you patched?

PIPPIN: Yes. Every plugin author that was affected by the bug, there was basically a private select channel set up where anybody who had a plugin that was affected by the bug got invited to. It was basically a planning room to coordinate the release because the idea is we wanted everybody to release their fixes at the same time to get the bug wiped out as fast as possible across the Net.

And so, we worked with the guys from WordPress.org, which was primarily Gary Pendergast, I think is his name, to get a forced update for EDD out. Anybody who wanted to could opt into those updates. Quite a few people opted out of them, but we decided to opt in. So we basically had to send them patch files for every single version from 1.8 all the way up to 2.3 and every point release in between.

BRAD: Right. I guess this vulnerability really affected plugins in different ways.

PIPPIN: Yeah.

BRAD: It might not have been so severe for some other plugins.

PIPPIN: Yep.

BRAD: It would make sense to opt out if it wasn’t a big problem with their particular plugin.

PIPPIN: Yep, certainly. There were some plugin authors like Yoast, for example, opted out of the automatic updates. Now that reasoning for opting out was because, in the last auto update that Yoast had had, there had been some issues with the plugin getting deactivated, but no one really knew why, and it had caused some issues.

BRAD: Right.

PIPPIN: Some people were opting out because it just wasn’t that big of an issue for them. Some were opting out because they were reluctant to do an auto update.

BRAD: Right.

PIPPIN: We opted into it and, on the day the release went out, we saw 16,000 updates across the board.

BRAD: Wow.

PIPPIN: Which, if you go look at our stats graph on WordPress.org, suddenly our daily download looked tiny because there’s this giant spike on April 19th because all of the sites got updated. But we didn’t have a single reported issue, so that worked out well.

BRAD: Right. Huh.

PIPPIN: Yeah, so now I’m relieved because I’m back to normal and not having to deal with that anymore, so I feel like I’ve actually been able to make progress. And so this morning I was able to push out a major release for Restrict Content Pro that I’ve been working on for about six months or so for version 2.1 that introduces a bunch of new stuff that I’m pretty excited for, so that was nice.

BRAD: Cool. Yeah, you blogged. You have a blog post out about that, right?

PIPPIN: Yes, I do. I’ll include it in the show notes.

BRAD: Cool.

PIPPIN: Some pretty significant changes, especially the kind of changes that I’ve been wanting to make for a long time behind the scenes. They’re primarily API updates. I built a brand new payment gateway API. I built a new member API, some other additional helper functions and things like that. There are a lot of features that are going to make it possible in the future to do a bunch of new, cool features.

BRAD: Are you currently the only one working on RCP, or do you have other people helping?

PIPPIN: There are people that have contributed a little here and there, but it’s mostly me.

BRAD: Mostly you. Great.

PIPPIN: I call it my side project.

BRAD: [Laughter] Right, right, like you need a side project.

PIPPIN: Yeah.

BRAD: Right. Should we move on to a question that we got?

PIPPIN: Yeah, sure. Yeah.

BRAD: Yeah. Full disclosure. This question is from Ian Jones, and he is actually one of my team members.

PIPPIN: Oh, I actually did not realize that. That’s excellent.

BRAD: Yeah, okay. I thought you might not know that. Yeah, should we read the question? Do you want to go ahead?

PIPPIN: Sure, I’ll go ahead and read it. Ian sent us a question that said, “Has having the for purchase Easy Digital Downloads add-ons and Affiliate WP,” this also includes Restrict Content Pro, “plugins freely available on GitHub, has it had a measurable positive or negative effect on sales? Is there a code contributions, marketing, community awareness benefit that outweighs the likelihood that a handful of people will forego a license? Do you think all WordPress plugins should be made available in this way considering they have to be predominantly GPLV2 or later licensed anyway?”

I think it’s a really good question, and it’s one that we’re still kind of experimenting with. Affiliate WP was the first commercial plugin that we put on a public repo on GitHub. It actually launched from day one on GitHub. That was actually a little bit more difficult to measure because we can’t look and see, well, did we have people using pirated or non-paid for licenses before or after it. We can’t measure that because it’s always been on GitHub.

EDD add-ons, on the other hand, we have a large number of our add-ons freely available on GitHub that anybody can download or anyone can contribute to. This includes a lot of our commercial add-ons. Then Restrict Content Pro is also on GitHub for anybody to contribute to. It’s all open. It’s on a public repo.

All of these are paid plugins, and so I think most people kind of look at that as, “What the hell are you doing? Why would you do that?” because you’re selling the plugin. Like, “How are you selling this thing that’s freely given away?”

If I had to make one statement about how well it’s worked out, it’s awesome. It’s been amazing. I don’t know how much I can measure how positive or negative it’s been on sales, but I can say it’s never hurt sales in any way that I can measure.

BRAD: It’s probably hard to measure something like this, right?

PIPPIN: Yeah, super hard to measure.

BRAD: Have you looked? GitHub has some stats about downloads and stuff, doesn’t it?

PIPPIN: No. Well, you could look at the number of times it’s been cloned. You could look at the number of people that are watching it. You used to be able to upload, like, download files for versions, which I think we were related to tags. I don’t think that feature exists anymore. But when you could, you could actually look at the download counts there.

BRAD: Right.

PIPPIN: Unless there’s a stat somewhere that I just don’t know about anymore, there’s not a way.

BRAD: I just searched Google for Affiliate WP, and the second result after your website is the GitHub repo.

PIPPIN: It is really?

BRAD: Yeah.

PIPPIN: I did not know that.

BRAD: Let’s look. We’ve got watching. There’s 22 people watching, 120 stars, 53 forks. I don’t know. You could probably see more stats though.

PIPPIN: Yeah.

BRAD: You have access to stats.

PIPPIN: I’ll go in through this. I’ll see if I can find any that are interesting.

BRAD: But, yeah, even with those statistics, I think it’s going to be extremely difficult to measure that.

PIPPIN: Yeah. The only way that we’ve really been able to measure it very well is just people that sent in a support request and are using the version from GitHub.

BRAD: Right.

PIPPIN: As opposed to having a licensed one.

BRAD: And you’re like, uh-uh-uh.

PIPPIN: Yeah, and we have seen it a couple of times.

BRAD: Has anyone purchased a license because they wanted support?

PIPPIN: Yes.

BRAD: That’s good.

PIPPIN: Well, maybe. What we’ve seen is we’ll see people that say, “Hey, I’m playing with this from GitHub right now kind of seeing if I like it or not.” Then they will go on to purchase the license.

BRAD: Oh.

PIPPIN: We’ve seen that numerous times.

BRAD: That’s interesting.

PIPPIN: Those people, we see those because they sent us an email, and they have a question or something like that. Usually it’s, “Hey, I’m playing with this on GitHub, and I think I’m going to go ahead and purchase it. Could you answer this question for me?”

BRAD: Right, so they’re using it kind of like a demo almost.

PIPPIN: Mm-hmm.

BRAD: They’re just demoing it or a trial trying it out.

PIPPIN: Yeah.

BRAD: Then they totally intend to purchase afterwards.

PIPPIN: Yep. I know that there are absolutely people out there that are using it that have never paid for it.

BRAD: Yeah.

PIPPIN: But I realize; you know what? I don’t care, and here’s why. Every single commercial plugin I’ve ever written that, you have ever written, that every single person has ever written that has ever received more than a single user has been pirated and is on a Warat site or a Torrent site.

A lot of times those are infected with malware or tracking scripts or other things like that. There was a bit security post on this a year and a half ago about example plugins where that had happened. And so, the people that are going to not going to purchase it but still want to use it, I would actually rather give them a version that is 100% safe and secure then have them go and find a black market copy, per se.

BRAD: I guess my thought there would be that if your software isn’t that popular, like you’re not Photoshop, you’re not one of these, or you’re not Windows or a really sought after app, I think it would be harder to find that on the Pirate Bay or whatever.

PIPPIN: No.

BRAD: It’s not?

PIPPIN: It’s so easy. I guarantee you. You could find any one of my plugins in less than five minutes.

BRAD: Really? Okay.

PIPPIN: Yeah. We tested it. We’ve actually had a couple people email us recently saying, “Hey, I found your plugin on a pirate site. Thought you should know.” And we go back and, sure enough, find it on 10 or 15 different sites. This has been happening to me ever since when I was on CodeCanyon. Every single plugin that’s on CodeCanyon is on a pirate site.

BRAD: Right. Okay.

PIPPIN: Even ones that only have a couple of sales. At one point it was actually pretty apparent that every single plugin was actually being purchased just to be put on a pirate site.

BRAD: Right. Hmm.

PIPPIN: Yeah.

BRAD: Interesting.

PIPPIN: Again, it’s really hard to measure how much it’s impacted sales, good or bad. Overall, my experience has been awesome with it though. Just as an example, okay, if you have a private repo, how many contributors do you have to that repository: two, three, four? Your team members plus maybe one or three special people that you’ve given access to.

BRAD: Mm-hmm.

PIPPIN: Pretty normal. Affiliate WP has 33 all just from people that decided to jump in and contribute to it because it was open. We have two people now that just came from the community that are actively contributing to it and are building major features and major patches for it because of the fact it was open.

I then put Restrict Content Pro on a public repo, and it had been on a private repo for a year and a half or so. Within the first month, immediately got two or three new contributors to it.

BRAD: That’s pretty cool.

PIPPIN: Yeah.

BRAD: Do you think other plugins should do this as well? Do you think it’s…?

PIPPIN: I don’t think there’s any standard yes or no answer. I think it really depends on what the plugin is.

BRAD: Who the customers are, probably, too.

PIPPIN: Yeah, and who the customers are. An example plugin that I will not put on a public GitHub repo is software licensing for EDD.

BRAD: Right.

PIPPIN: Because it’s a developer tool.

BRAD: Right.

PIPPIN: I’m selling it to developers and so making it open to developers in one way would be awesome because then they could contribute back to it. In other way, I have just given it away to every single one of my customers.

BRAD: Yeah, exactly.

PIPPIN: And so that one won’t go there.

BRAD: Yeah.

PIPPIN: But let’s be honest. People that are buying Affiliate WP, they’re usually marketers or people setting up their product site. They’re very rarely developers.

BRAD: Right.

PIPPIN: One of the things about GitHub is that it is damn scary for people that don’t know code.

BRAD: Yeah.

PIPPIN: You go to the homepage of Affiliate WP on GitHub or Restrict Content Pro and you see a bunch of PHP files.

BRAD: Yeah.

PIPPIN: What the hell do you do with that?

BRAD: It’s a directory listing.

PIPPIN: People don’t know, and so if your target audience is–

BRAD: Can I just click on it?

PIPPIN: Yeah.

BRAD: And launch it like an app?

PIPPIN: Yeah, exactly. If your target audience is not a developer crowd, that’s going to be very different than if you are selling to developers.

BRAD: Yeah.

PIPPIN: I think it’s something that everybody should consider if they want to do.

BRAD: Yeah, I think it makes sense in some cases and not in others, for sure.

PIPPIN: Yep. I would say I think if you’ve done it or you know someone that has, and you have similar experiences or different experiences, I’d love to hear about them. I know of a couple other people that have done it as well, and they’ve also mentioned that it’s been awesome for them.

BRAD: Cool. A couple weeks ago, I guess — oh, no, this is long ago I tweeted this. I don’t know why. I was just grumbling, basically just complaining. I said in a tweet, “Hey, WP plugin developers. Stop forcing me to your welcome page every time I update your plugin. Major releases – fine.”

And I’d seen this so many times. Like, every time you update a plugin, it forces you to that welcome page. Then some plugins, I’ve got a couple plugins that have welcome pages, so I actually end up on two welcome pages, one after the other. I was just fed up, and so I tweeted that out.

But the amazing thing is that it’s made a big difference. It’s one of the few instances where complaining has actually had an impact.

PIPPIN: I think it’s kind of interest because, while I completely agree that it’s annoying, maybe it’s: I just don’t care. I don’t mean that in a negative way, but me landing on a welcome page has never bothered me.

BRAD: Right.

PIPPIN: Which actually kind of surprised me. I know that everybody has different opinions on what’s irritating or what’s not, but to see so many people jump on your tweet and say, like, “Oh my gosh. I hate this,” surprised me.

BRAD: Yeah. Yeah, everyone has different sensitivities. I’ve put up with it for a long time, right?

PIPPIN: Sure.

BRAD: Then I just snapped, and I tweeted that, and then other people were relating to it. But I don’t think it’s a huge problem or anything, but it’s a nice little optimization. You guys have made the change to EDD, right?

PIPPIN: To be honest, I’m not 100% sure.

BRAD: I’m not sure if you have, but I know WooCommerce–

PIPPIN: It’s our radar if we haven’t finished it yet.

BRAD: WooCommerce has.

PIPPIN: I know I saw GivWP, who is brand new, did it yesterday or the day before.

BRAD: Yeah, so I don’t know. A few people are doing it.

PIPPIN: I think it’s a good change.

BRAD: Yeah.

PIPPIN: To not go to a welcome page on point releases because who cares. A point release should not be a massive set of changes that you need to show a welcome screen for.

BRAD: Yeah, exactly. Yeah, I think it sends the wrong message, for sure.

PIPPIN: Yeah, I agree. Now what’s interesting is we actually had somebody recently who was getting really mad at us because we didn’t offer a way to completely disable the welcome screen, which I found kind of interesting. I fully sympathize with showing a welcome screen after each plugin update being annoying, especially if you have multiple plugins in a row that are doing it. It’s annoying.

BRAD: Yeah.

PIPPIN: But I have never once considered someone redirecting me to a welcome screen after installing a plugin to be bad. It’s an onboarding experience.

BRAD: Yeah. Well, and a major update deserves some kind of notice, right?

PIPPIN: Absolutely. Well, especially for us when we’re talking about e-commerce. This is powering people’s businesses. Showing people what’s new is pretty important.

BRAD: Yeah.

PIPPIN: But we had a few people, and there was actually a giant Facebook thread on this a few months back as well where they were really irritated because we didn’t allow them to disable it completely. I actually refused to put that option in.

BRAD: Yeah.

PIPPIN: I think it’s really fundamentally important for e-commerce.

BRAD: Well, I mean you could put it in as a hook or something so that they could do it programmatically or something just to appease them.

PIPPIN: Right.

BRAD: Just to shut them up, maybe. But I’d like to know where they’re coming from, what their point of view is on this. If it’s just that, “I don’t want to see it,” like that’s not really a good reason.

PIPPIN: That was the best argument I could get out of most people that were adamant about it.

BRAD: Yeah, that’s not a very good reason.

PIPPIN: No.

BRAD: If it was like, “My customer does the updates, and he’s going to see it,” then I’m like, well, maybe that’s a bad thing. But even then, that’s really thin.

PIPPIN: Yeah.

BRAD: Why is your customer updating your plugins, first of all?

PIPPIN: If they are your customer and you’re supposedly managing their sites, exactly. Why are they doing the update?

BRAD: Yeah. Anyhow.

PIPPIN: But I thought it was a great discussion.

BRAD: Yeah. Speaking of discussions, you posted, well, you blogged about Caldera Forms, which is another forms plugin.

PIPPIN: Yep.

BRAD: Yet another forms plugin. You just posted a review of it, right? You dug into it.

PIPPIN: Yeah.

BRAD: Then someone in the comments said briefly, “I still think Gravity Forms is better – period.”

PIPPIN: …comments.

BRAD: That was it pretty much. Well, I think they asked if you agreed.

PIPPIN: Yeah.

BRAD: Do you want to summarize kind of what you said?

PIPPIN: Sure. I see this every time that I do a review on any plugin that has several major players. I saw this when I did a review of Ninja Forms early on. Somebody immediately came back and said, “Okay, how does it compare to Gravity Forms?”

BRAD: Right.

PIPPIN: I saw this when I reviewed a related post plugin. They immediately came back and said, “How does this compare to this other related post plugin that was really popular?”

BRAD: Right.

PIPPIN: It just happens all the time. I think a lot of times, like, the people asking these questions, it’s not because they’re bias and they’re trying to get you to say, “Oh, well, actually this is better.” They’re really looking for a reason to, like, why should they consider this other option when the version they use is great?

But I really don’t like making judgments on what is better, like which platform is better. In this case, let’s keep it in the realm of, like, Gravity Forms versus Caldera Forms versus Ninja Forms versus Formidable Forms, etc. I don’t like saying, “This one is better. You should use it,” because every single plugin has their strong points and their weak points. And everyone has one where they’ll work really well in this case or work really well in that case, or they fail, or they don’t do as well in this scenario. I think, if you really want to do yourself a favor, you should explore all of the options and not just assume that one is better than the others just because you’re used to it.

BRAD: Right. Yep. No, I mean they’re just different, right? And I’m sure there are strengths and weaknesses for each one, right?

PIPPIN: Absolutely.

BRAD: If you could take all the strengths from them and put them into one plugin, then you’d probably have kick ass plugin.

PIPPIN: Sure. Just as an example, I have now played with all of the major form plugins pretty extensively, which right now would be like Gravity Forms, Ninja Forms, Caldera Forms, Formidable Forms, and there are a couple of others as well. I’ve used all of them. We’ve integrated with all of them or started to integrate with all of them in Affiliate WP and in other plugins. There are absolutely cases where each one of them shines where the others don’t.

Just as an example, I think Ninja Forms is probably the easiest one to build on top of for other developers. It’s the easiest to dive in for somebody. It’s a much less steep learning curve for a developer to figure out how things work in it.

BRAD: Right.

PIPPIN: In terms of reliability and it just always works, probably Gravity Forms, which is probably because they’ve been around longer than anyone else.

BRAD: Yeah, and they have a huge, massive customer base … long time.

PIPPIN: Yeah. Every one of them has a strength. And so, no matter what the plugin is, whether you’re talking about forms or e-commerce or memberships or anything, I don’t like assuming or just making a statement that says this is better, or this one is best. I think you should play with all of them.

If you set up a membership site, don’t just use Restrict Contract Pro because it’s what you’re used to. Go play with Member Press. Go play with Member Mouse. Go play with Premium Memberships from WPMU. Play with all of them. Play with Pay Memberships Pro.

BRAD: Yeah. Yeah, you’d be surprised.

PIPPIN: I think it also really helps highlight what is great about each one of them.

BRAD: Yeah. I think you make a really good point that you shouldn’t just go by one review or even several reviews that people have of a plugin or any product for that matter because they have a different perspective than you do, so they may value things differently.

PIPPIN: Absolutely.

BRAD: If you’re buying a kettle, then yeah, sure, it’s a kettle. There are not that many perspectives that are going to make a difference, right?

PIPPIN: No.

BRAD: But when it’s something as complete as a plugin, and especially a forms plugin, different strokes for different folks, right?

PIPPIN: Yep, 100%. Why don’t we go ahead and jump into responsive images. This is something that you’ve been working with a lot. I know you’ve mentioned this, I think, a couple times, in our pre-show chats. Tell me what you’ve been doing with this.

BRAD: Yeah. The Amazon CloudFront, Amazon S3 and CloudFront plugin that we’re working on, it deals with the media library, right? I was wondering how — and it works with this other plugin that’s really popular. It’s on the WordPress.org repo. It’s called WP Retina 2x, and so it allows you to basically serve retina quality images for high DPI displays, so retina display or, if you have a phone that’s got a high DPI display, it’ll serve the high resolution images.

Yeah, the two work well together, but I was just like, where is this going? I found this article with Chris Coyier. First of all, that’s just one dimension. The resolution of the display, that’s one thing.

But then there’s another facet of the problem, which is responsive design, which, as you shrink the size of the page, the images get smaller, right? When the page is really small, should you load? What size image should you load for that, right?

PIPPIN: Right, and what if the page gets bigger?

BRAD: Yeah. Yeah, exactly. You should serve a bigger image. Let’s take an example because speaking abstractly is a little confusing. A typical example is that you have an archived page with a list of posts, and you have featured images for each post. They’re usually a thumbnail size image, right? Maybe they’re left aligned with text on the right.

Then if you click through one of those, then you get the big image, the larger size. But then, on a phone, that same site, the image on the listing page, on the archived page might be the same size as it is when you click through or tap through to the single post page because it’s a smaller screen. You can’t make it super tiny. The image would be pointless. Generally, when you have a responsive design, it would make the image kind of the size of the phone, that kind of thing.

Basically, you could end up with that thumbnail sized image being stretched across the size of the phone, and it would be fuzzy. That’s kind of the problem right now. There are ways of fixing it that people have been using. There’s usually JavaScript, right? But there’s this new way that’s become a proposal. I believe it works in Chrome now as well already. Actually, I think it works in Web Kit browsers.

If you go to caniuse.com, you can find it. We’ll link that up in the show notes. Yes, it does. It works in Chrome 42, 41. Wow. It goes right back to 38, actually, this new thing.

It’s called SRC Set. The idea is that you replace the SRC attribute of an image with a list of images. Basically, all the size images that you have. And the browser will just–

Another important point: In addition to listing each image path, you have to also determine the width. You have to tell the browser how wide that image is. Then, based on just that information, the browser can determine which image it should load and serve and display.

Since it only works in Chrome right now, you can use picturefill.js, it’s called, and it will make it work for all the other browsers as well. That’s pretty cool, right?

PIPPIN: I had never actually heard of this–I think maybe I saw a mention of it a while ago–until reading Chris Coyier’s post, the one on CSS-Tricks about it.

BRAD: Right.

PIPPIN: Here’s my main question for you on it.

BRAD: Okay.

PIPPIN: Maybe you know the answer to this or not. When you set source set, and you add in all the different sizes, does the browser actually load every image size, or does it do it on demand when you resize the screen?

BRAD: When you first load the page, you’re probably not dragging your browser window to resize it. When you first load a page, your view port, whatever it is, your phone browser or your desktop browser, your tablet browser, whatever, it’s a fixed size, right?

PIPPIN: Right.

BRAD: And so that’s what it uses. Whatever the view port is when it loads, it’ll choose the image. Now, if you resize, I believe the way it works is it knows, “Hey, the view port has resized. Let’s recalculate what images we need, and we’ll download them and replace them….”

PIPPIN: Okay. That answers my question right there. That’s what I was wondering. If you say, okay, my default source is small.jpeg, but I also had a medium.jpeg and a large.jpeg, does it load medium and large on the first page load, or only once it has determined that the browser needs to display those versions?

BRAD: Yeah, just when it needs.

PIPPIN: Okay.

BRAD: Just when it needs them.

PIPPIN: That’s good because, if it loaded them all, that would be problematic for people.

BRAD: Oh, yeah. That would be completely pointless because you can do that now. You could just put three images, the three images in image tags and hide of them.

PIPPIN: Right.

BRAD: Then use CSS to hide and show which ones. That’s really the problem, and that’s one of the things that this resolves is that really it puts the onus. It gives the information that the browser needs to the browser and let’s the browser handle kind of which one gets downloaded and displayed.

PIPPIN: Yeah, that’s really cool.

BRAD: Yeah. And it’s really cool that we can use it now with the polyfill, with the picturefill.js polyfill thing.

PIPPIN: Right.

BRAD: Yeah, so how does this impact WordPress, I guess, is the other point because we’ve really just talked about responsive images.

PIPPIN: I bet you’re about to answer the question I was just going to ask, so go ahead.

BRAD: There’s a plugin out there called RICG Responsive Images. I think if you just search for RICG, you’ll probably find it. Yeah, just search “responsive images” on the WordPress.org repo and you’ll find this plugin. It’s being worked on, I think, by the core team, isn’t it? I mean I see Andrew Nacin in the list and Helen in the list of authors for this plugin.

PIPPIN: Yeah, there are a lot of people involved.

BRAD: Yeah, they’ve got like 12 people.

PIPPIN: My guess is that this is probably coming to WordPress core.

BRAD: That’s what I’m hoping. I’m pretty sure it will. What’s really interesting, I think, is that it means that image sizes become basically irrelevant going forward. You know how right now what you would do in a theme, if we take our example previously. You wanted a thumbnail on the archive page; you would use a theme tag that would insert the thumbnail size that would choose that image.

PIPPIN: Right.

BRAD: Well, in the future, that’s pointless because really the SRC would just have all the images in it, all the image sizes that were available for that image.

PIPPIN: Yeah.

BRAD: It’s pointless to define which size you want in there. In the future, I think what will be more useful would be if you could define a treatment, like if you wanted the listing image to have a certain crop. Then that would make sense that I want the one that shows up here to be cropped with the guy’s head in it instead of his chest.

PIPPIN: Yeah.

BRAD: If it’s a picture of a person, sometimes you want it cropped a certain way. I think, in the future it’s just going to be pointless for themes to be defining size of image goes here. And it’ll also be pointless for the sizing kind of options in the dashboard when you’re editing an image. There’s an apply to.

PIPPIN: Apply changes to these sizes, yeah.

BRAD: Apply changes to. Yeah. And it’s like apply changes to all image sizes, thumbnail, or all sizes except thumbnail. I think that’s a bad idea because you really want all those sizes to be exactly the same.

PIPPIN: Right.

BRAD: Because one of them could be the one that loads for a phone versus for a desktop. You really want those to be the same, I think. Yeah.

PIPPIN: It would be kind of cool to see image sizes kind of go way. They’re not going to ever go away 100%. But suddenly we don’t need 15 different image sizes across the website or 10 or 5 or however many you use. That excites me.

BRAD: Right.

PIPPIN: That would be super awesome.

BRAD: I guess you’d still need the images. You’ll still need to generate those image sizes.

PIPPIN: Right, but there’s not nearly as much–

BRAD: Finicking with them.

PIPPIN: Yeah, yeah, yeah.

BRAD: Yeah.

PIPPIN: We’re not outputting this sizes here, this size here, this size here, this size here.

BRAD: No.

PIPPIN: We’re putting whatever size the browser needs to show there based on the size of the port.

BRAD: Yeah.

PIPPIN: And that’s really cool.

BRAD: I think, going forward, I don’t know if it even makes sense to have that options page that is currently in the dashboard with the sizes and that.

PIPPIN: Yeah, it might not.

BRAD: Because, I mean, really you could probably set those universally for most websites.

PIPPIN: Yeah. This is something that can go in and actually eventually get into core. It’ll be one of those cool scenarios where the way the images work is made a lot more flexible and, at the same time, removing a lot of options, a lot of what today we look at as features, but really are just more UI elements causing confusion, more options to configure. We’re able to basically get rid of some of those and make things simpler and still more flexible at the same time.

BRAD: Yeah. Well, I mean this is just going to be a huge improvement for developers to just not have to worry about image sizes anymore. You just plop in the SRC set attribute, and all the images that you’ve generated and that’s it. You’re done. You don’t have to worry about–

PIPPIN: Well, and one thing — suddenly instead of — like, let’s say that you have a site that has a ton of different thumbnail sizes and banner images, etc. It’ll actually allow us to get into having maybe four or five generic image sizes that a lot of different sites use. Suddenly those generic image sizes can still be applied to each of these more specific areas.

BRAD: Right, yeah. I should mention that when the browser does the kind of figuring out, it also takes into account the resolution of display. So if it’s retina, for example, not only will it determine, okay, I’m on a phone. The view port is 320 pixels wide. Yes, but the screen is a retina, so I still need an image at least 640 in width, and it’ll pick the image at least 640 or greater in width. It really looks at the whole scenario, the whole picture, and picks the right image. We don’t have to be worrying about all this add 2x images that we’ve created in the past for the retina displays and stuff. It eliminates all of that as well. I’m super excited about this. I think this is going to be huge.

I feel like we’re late to the party though. Chris Coyier, his article is from September.

PIPPIN: I think, September, yeah.

BRAD: Yeah.

PIPPIN: That’s okay.

BRAD: I’m pretty sure he’s probably got an articular from two years ago talking about this too. Yeah, it’s pretty exciting stuff, to me at least.

PIPPIN: Super awesome.

BRAD: Cool.

PIPPIN: I really cannot wait to see what ends up happening with this in the future. If anybody has played with it or has further feedback on it, let us know.

BRAD: Yeah, for sure.

PIPPIN: I love to see examples where this is being used in the wild and kind of see how well it’ll work out.

BRAD: Yeah, for sure.

PIPPIN: Very cool. What do we have coming up next? I think we’re about time to wrap up, but do we have anything to look forward to in the next couple of weeks?

BRAD: I don’t think so. I’ll be at WordCamp Miami at the end of May, but that’s a little ways away.

PIPPIN: Myself and the rest of the EDD and some of the Affiliate WP team will be at LoopConf next week.

BRAD: Nice.

PIPPIN: Which is Tuesday through Saturday, I think, or Tuesday through Friday, something like that, Wednesday through Friday. I don’t know. I’ll be in Vegas, so if you’re listening and you’re going to be there, come by and say hi….

BRAD: Isn’t it actually outside of Vegas? It’s not on the strip or anything.

PIPPIN: No, it’s at The Westin, which I think is kind of north of Vegas up on a lake, but I’m not 100% sure. It’s definitely not on the strip.

BRAD: You’re away from the craziness.

PIPPIN: Yes.

BRAD: Yeah.

PIPPIN: Which is both a good and a bad thing, I guess, depending on your view of Vegas.

BRAD: Depends, yeah. Yeah, so WordCamp Miami is the 29th to the 31st of May. Yeah, we’re doing a big thing. We’ve got a house.

PIPPIN: I’m disappointed that this is the first year in three years that I will not be at Miami. I’ve been to Miami the last three years in a row, and I’m sad to not go back this year.

BRAD: Yeah.

PIPPIN: It’s a great camp.

BRAD: yeah, it should be good.

PIPPIN: And I like Miami as a city too.

BRAD: The whole team is flying in for this.

PIPPIN: Oh, great. Are you guys going to spend some extra time there?

BRAD: Some of us will. I’ll be there the Wednesday to Sunday, so not much, but the whole team is coming in, and some of us have never met. Actually, none of us have met. Not one of the team members has met each other face-to-face.

PIPPIN: Well, this will be a good time then.

BRAD: Yeah, it should be good. We’ve got a nice, big house with a pool and stuff.

PIPPIN: Excellent.

BRAD: Right just a few blocks off the Miami Beach, so off of….

PIPPIN: Are you in South Beach?

BRAD: Yeah, South Beach.

PIPPIN: That’s great.

BRAD: It should be a good time.

PIPPIN: Watch out for drink prices down there. They’re ridiculous.

BRAD: I bet. I bet. Yeah.

PIPPIN: I think that’s the first place I ever paid $35 for a beer.

BRAD: We stayed at The Setai Hotel last year, right?

PIPPIN: Yeah.

BRAD: Yeah. And so, yeah, I’m aware of the prices. It’s pretty pricey, but, eh, we’re only there for a short time, so it’ll be good.

PIPPIN: Yeah. All right, well, I think that just about wraps us up for the day. If you haven’t checked them out, go check out our sponsors at WPNinjas.com or NinjaForms.com. They’re doing some really cool stuff. They’re rapidly expanding team and plugin, so keep an eye on them. They launched their new membership bundle. If it’s not launched, it’s coming, very soon. We’ll see you in two weeks.

BRAD: I’m looking forward to their yearend report next year after that big bundle comes out.

PIPPIN: Oh, yeah. Can’t wait to see how they’ve grown over a year.

BRAD: Yeah.

PIPPIN: Watching and seeing how they’ve grown over the last year and a half, two years, has been awesome. Now I think they’re just getting started.

BRAD: Yeah, for sure.

PIPPIN: Yep. All right, well, thanks for chiming in, everyone.

BRAD: Thanks, everybody.

PIPPIN: Catch you next time.

Apply Filters © 2024