Don’t go squishing my images

I haven’t done much with my website lately; apart from security updates, I’ve been too overwhelmed with work and life to write much this year. And what a year it’s been already! That’s not why I’m writing this post though.

I got the notification to update to WordPress 5.5 earlier this week, so I logged in, did the update, and glanced at a few pages to make sure everything worked okay. Usually it does, but this time, some of the images in my posts were looking pretty gnarly:

A quick element inspection showed me that WordPress was adding absolute pixel dimensions to all my images. I couldn’t even override it with CSS since it uses the width and height attributes on the image tag itself:

I think the absolute dimensions have been there for a while, but those attributes combined with my responsive layout and some block library CSS to make things look bad:

I tried a few different solutions to remove the width and height from my image tags before finding something that worked well. First, a post from CSS-Tricks (one of my favorite websites for advice on all things web design) suggested a couple of filters to use. Unfortunately, as I found out later, those filters only fire when an image is inserted into a post. The HTML is actually generated once and stored in the post instead of being generated dynamically as needed. I wanted to retroactively make this change for posts I’ve already published, and in particular I did not want to have to remove and re-insert images on old content.

I tried a few other filters including get_image_tag (yes, that page is for the function of the same name, but it’s also a filter which doesn’t seem to have its own page at the time of this writing) with the same result (that one also only fires on image insertion). Eventually, I found a Stack Exchange post that pointed me in the right direction.

My solution, roundabout as it is, is to modify all image tags in the the_content filter. That way, no matter when or how the markup was generated, my mini plugin will take out the width and height attributes, and the image will load with the right aspect ratio. I know there’s an argument for specifying the width and height so the browser knows how much space to reserve for the image, but that doesn’t make sense to me if it’s using the wrong height in the first place. I would rather make my pages load a little less smoothly in favor of my site rendering correctly when it does load. Plus, with well-optimized images, loading time is not really something I’m concerned about.

If you are curious how to reliably remove attributes from your images in WordPress, regardless of how long ago the posts they’re in were posted, here is my not-so-elegant solution to this very narrow niche of a problem:

function justincardoza_image_unsquisher($content)
    if(in_the_loop() && is_main_query())
        $document = new DOMDocument();
        $images = $document->getElementsByTagName('img');
        foreach($images as $image)
            if($image->hasAttribute('width'))  $image->removeAttribute('width');
            if($image->hasAttribute('height')) $image->removeAttribute('height');
        return $document->saveHTML();

add_filter( 'the_content', 'justincardoza_image_unsquisher' );

Building a Raspberry Pi security camera

Raspberry Pi computers are great for so many low-power applications, hence my obsession with them, and one of the popular projects I’ve read about is making one into a security camera. Home security and automation are topics I’m very interested in, so I went ahead and built a security camera to try the concept out. I decided to use a Pi Zero W for its small size and particularly low power requirements, and I was also able to find what I’m pretty sure is the original version of the Raspberry Pi camera on Amazon for less than $9.

Parts List


Before doing anything else, I flashed the MicroSD card with the latest version of motionEyeOS, a Linux distribution designed for video surveillance systems which runs on a wide variety of single-board computers including the Pi Zero W. I used balenaEtcher, the recommended tool for creating Raspberry Pi boot media, and the process was very seamless (apart from Windows complaining about the EXT partitions being “unformatted”). I didn’t even need to uncompress the boot image; balenaEtcher handled that for me.

The only other bit of software preparation you probably want to do is pre-configuring your WiFi information. This lets the camera automatically connect to your network when it’s done with its first-time setup. I just followed the directions on the motionEyeOS Wiki and it worked beautifully. All you have to do is create a file named wpa_supplicant.conf on the drive that Windows can see (that’s the /boot partition) and put this text into it, making sure you’re using Unix line endings:


And of course, make sure to substitute your own WiFi information (and country code if you’re not in the U.S.).


I thought the software would be the hard part and putting the case together would be a breeze, but it was actually the complete opposite. After inserting the MicroSD card, which as you can probably imagine went pretty smoothly, I ran into some issues installing the camera into the case.

The Camera Cable

Strangely enough, the cable that came with my official Pi Zero case had a wide strip of stiff plastic on the end with the connector for the Pi. It was actually wide enough to prevent the Pi from fitting into the case with the cable plugged in.

I estimated where to bend the cable based on how much of it would fit into the connector, then took it out and bent it by hand to avoid damaging the connector on the Pi. If your cable is flexible along its whole length, or if the part around the connector is short enough to fit into the case, you won’t have to do this.

Once your cable is ready, connect it to the camera and then to the Pi. The ribbon cable connectors are a little delicate, but all you really have to do is pull the little plastic bracket straight out, insert the cable as far as it will go, and then snap the bracket back in to hold the cable. The metal contacts on the cable should go towards the circuit board.

The Case

The next step is fitting the Pi Zero W into the bottom of the case. It may take some wiggling, but it will fit pretty snugly when it’s in place, and all the ports should line up.

Once the Pi is in the bottom of the case, fit the camera into the case lid. There are little plastic nubs to fit into the mounting holes on the camera board and tabs on the edges to hold it in place. If you use the cheap V1.3 camera from Amazon, don’t push it in all the way. The camera module doesn’t have quite enough clearance, and the case will actually put enough pressure on it to disconnect the camera module from the board.

You can easily snap the connector back in, but it’s annoying to have to do so. It looks like the camera module has double-sided tape on the back which has not been fully applied, and removing it or using it to stick the module to the board might help. I might try that next time, especially if I get an extra camera board.

After both the Pi and the camera are in place, just snap the case together. Then you can install the whole thing wherever you want, run the power cable, and you have a cheap indoor security camera running open-source software. As I do more with motionEyeOS, I’m sure I’ll write some more guides about what you can do with it. Stay tuned!

Freeform windows in Android 10

I was very happy to find out that Android 10 ( R.I.P. dessert-themed version names) has support for freeform windows that’s easily enabled. It’s been around for a few years, but this is the first version of Android where you can get at it without using ADB or a third-party app.

The feature is exactly what it sounds like: it lets you open apps in resizable, movable, stackable windows like you can on a full-fledged computer running a desktop OS. I’ve imagined for years that this would be a nice thing to have, and it is pretty neat. It does have limited usefulness on a relatively small phone screen, so it makes sense that it’s still disabled by default, but it’s a nice option to have. It seems like it would be very useful when using a secondary display.

Here are a few things I learned from playing with it so far on my Pixel 3a:

  • You do really have to restart your phone after enabling the feature. It won’t work until you do.
  • Sometimes Pixel Launcher will crash when playing with freeform windows. That’s okay. (I’m using a third-party launcher, so that may be why)
  • Entering the multitasking view seems to dismiss any windowed apps you have open.
  • To get multiple windows open simultaneously, I’ve had success with the following roundabout procedure:
    1. Open the first app and switch it to freeform mode.
    2. Open another app and switch it to freeform as well.
    3. Reopen the first app from the homescreen (i.e. without going into the multitasking view).
  • Once an app is switched into a window, it seems to mostly stay that way until you tell it otherwise, even if you stop it and reopen it.

I can definitely tell this is still an experimental feature and there are plenty of bugs to work out. However, it is pretty exciting to see Google developing something like this, and I’m looking forward to seeing more refined versions come out in the future. In the meantime, I kind of want to see how it would behave with a secondary display and a mouse. I think that’s what I need to try next…