CSS-Tricks

WordPress

#155: Responsive Images, WordPress, and Cloudinary

# By Chris Coyier

Eric Portis joins me to dig into the world of responsive images.

We start at the basics. Responsive images are specifically images in HTML and exist because of a desire for better performance. Images are probably the biggest culprit in the overall weight of websites. If we can avoid sending too many pixels across the network, we should. After all, a screen that is only 720 pixels wide doesn't need a 2000 pixel wide image, even if it's a 2x display.

(more…)

#154: A Poster Child WordPress Site

# By Chris Coyier

CSS-Tricks itself is a WordPress site, and one in which WordPress is a perfect fit for. Between things like the login and permissions system, blogging, pages, custom post types, forums, eCommerce, and more, CSS-Tricks makes use of a huge swath of what WordPress is capable of.

(more…)

Poll Results: Local WordPress Development

# By Chris Coyier

We kicked a poll off three months ago asking y'all what kind of local development environment you set up for running WordPress locally. At the time of this writing, we got 2,623 votes, so a decent amount of significance here. Especially because the question was phrased:

If you're running WordPress locally (i.e running PHP, MySQL, and a web server), how are you doing it?

Presupposes that you are running a local environment. (Please do that.)

(more…)

Lazy Loading Gravatars in WordPress

# By Chris Coyier

Most WordPress themes show user Gravatars in the comment threads. It's a way of showing an image with the user, as associated by the email address used. It's a nice touch, and almost an expected design pattern these days.

Every one of those gravatars is an individual HTTP request though, like any other image. A comment thread with 50 comments means 50 HTTP requests, and they aren't always particularly tiny files. Yeesh.

Let's lazy load them.

(more…)

Responsive Images in WordPress with Cloudinary, Part 2

# Sponsored

In Part 1 of this series, I provided some background on responsive images, describing how you can add srcset and sizes attributes to an img element to serve appropriately sized image files to users of a website based on the size and capabilities of their browser and device. I also shared how WordPress used its native image resizing functionality to implement srcset and sizes automatically and how you can use an external image service like Cloudinary to extend the native implementation that WordPress provides.

(more…)

Free, faster.

# By Chris Coyier

Ethan Marcotte, on time- and budget-constrained organizations websites:

Between the urgency of their work and the size of their resources, spending months on a full redesign isn’t something they can afford to do. Given that, a free theme for, say, WordPress can yield a considerable amount of value, especially to budget-constrained organizations. They can launch their redesign more quickly, and continue reaching the people who need their information most.

So Ethan takes a look at a bunch of free themes, so at least a responsible choice can be made there, and finds

the results were surprising: on a 3G connection, the slower themes I tested took anywhere from 45-90 seconds for any content to appear. In other words, the pages took roughly a minute before they were usable.

Pretty rough.

What I find particularly scary is that these are just empty themes. I usually attribute the slowness of sites in this category (off the shelf, slap-a-CMS on it) to be what happens on top of the theme. Stuff like uploading too many/too large of images and installing a million plugins that load their own set of resources.

I think it shows off some recent technology in a new light: saving us from ourselves. HTTP/2 makes concatenating resources less important, and that's saving us from ourselves and those million plugins individual CSS and JavaScript files. WordPress does responsive images by default now, that's saving us from ourselves and ensuring we aren't loading more image than we need. AMP, as a technology, is saying y'all have lost the plot here and we need to save you from yourselves.

Deploying From Bitbucket to WordPress

# By Scott Fennell

Of all the projects I've worked in the last few years, there's one that stands out as my favorite: I wrote a WordPress plugin called Great Eagle (Tolkien reference) that allows my team to install and update themes and plugins from our private Bitbucket repos, via the normal wp-admin updates UI.

This plugin has blasted our dev shop through the roof when it comes to development best practices, in ways we never expected or intended. It forces us to use proper version numbers because now we can't deploy without them. It forces us to store our work in Bitbucket because now we can't deploy without it. It forces us to use the command line en route to deploying our work (by which I simply mean, git push origin master), which then led to us using phpUnit. Now we can't deploy unless our tests pass. We've arrived at the nirvana of test-driven development, all because we started with the unrelated step of deploying from git.

If this all sounds standard and obvious, great. I'd love a chance to learn from you. If this sounds like exotic rigmarole, guess what? This article is for you.

(more…)

Develop Locally, Use Images from Production

# By Chris Coyier

Working on your website locally means having the files that make your website tick right there on your computer. It's common those files live in a version control repository. You work on them, and push them up to the repo when you are ready. Other people work too, and you pull their changes back down.

What might not be in that repo, are images files from the CMS. WordPress is a classic example of this. When you upload an image in WordPress, it does a whole song and dance. It gets uploaded to the `uploads` folder, multiple versions are created, even the database is updated and attachment meta data happens. What doesn't happen is that a version control commit happens with all those files.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag