webdev | Our thoughts and musings

If you run a WordPress site on a lean Linux server, you’ve likely faced this brick wall: you try to upload a seemingly small image, and WordPress throws a frustratingly vague error.

"The server cannot process the image. This can happen if the server is busy or does not have enough resources to complete the task. Uploading a smaller image may help. Suggested maximum size is 2560 pixels."

Your first instinct might be to look at your server stats. You see a CPU spike, RAM usage climbs, and you conclude, "I need a bigger server." But here’s the catch: you could migrate to a machine with 64GB of RAM and a 16-core CPU, and you would still see this error. The "resource" issue isn't your hardware; it's a silent gatekeeper in your web server configuration.

The Illusion of "Not Enough Resources"

When an upload fails, WordPress assumes the environment is overwhelmed. However, the real culprit is often a hard-coded security limit that exists on even the most powerful enterprise servers, long before your image ever reaches PHP or the WordPress media library.

To find the truth, stop looking at your WordPress dashboard and start looking at your Nginx error logs. By running a simple command while attempting an upload, you'll find the smoking gun:

tail -f /var/log/nginx/error.log

You will likely see a clear message that reveals the true cause:

2026/03/25 09:41:57 [error] 156998#156998: *75 client intended to send too large body: 1477858 bytes, client: xxx.xxx.xxx.xxx, server: [www.dharwadkar.com](https://www.dharwadkar.com), request: "POST /wp-admin/async-upload.php HTTP/2.0"

The translation is simple: Nginx has a default upload limit of 1MB (client_max_body_size). A 1.4MB image is blocked before it even gets a chance to be processed.

The Solution: Fixing the Configuration, Not the Hardware

To solve this for good, you need to adjust the limits in the three layers of your stack.

Layer	Action	Configuration
1. Web Server (Nginx)	Tell Nginx to allow larger file uploads. Edit your site configuration (e.g., `/etc/nginx/sites-available/default`) and add this directive inside the `server` or `http` block.	`client_max_body_size 64M;`
2. PHP (The Processor)	Ensure PHP is ready to handle the larger file. Edit your `php.ini` (e.g., `/etc/php/YOUR_VERSION/fpm/php.ini`). Note: Replace YOUR_VERSION with your actual PHP version (e.g., 8.1, 8.2).	`upload_max_filesize = 64M` `post_max_size = 64M`
3. Image Library (The Worker)	For better performance, ensure the ImageMagick library is handling image processing instead of the default GD library. This helps prevent actual resource exhaustion when processing large images.	`sudo apt install php-imagick`

After making changes, don't forget to test your web server configuration and reload the necessary services:

# For Nginx
sudo nginx -t && sudo systemctl reload nginx

# For PHP-FPM (remember to use your version)
sudo systemctl restart php[YOUR_VERSION]-fpm

The Apache Alternative

If you are using Apache, the equivalent directive to Nginx's client_max_body_size is LimitRequestBody. While often set to unlimited by default, some hardened configurations restrict it. You can add this to your .htaccess file (the value is in bytes):

# 64 MB in bytes
LimitRequestBody 67108864

Verification: Is It Working?

Once you’ve lifted the gate, you should verify that WordPress is using the right tools to process your images.

Go to your WordPress Dashboard.
Navigate to Tools > Site Health.
Click the Info tab and expand the Media Handling section.

You want to see ImageMagick listed as the "Active editor." If it says "GD" or is missing, you may need to install the module with sudo apt install php-imagick and restart your PHP service.

The Takeaway: Logs Over Guesses

This is a classic "edge case" in systems administration where the error message points you in the wrong direction. The issue isn't a lack of resources but a simple configuration designed to protect the server.

Remember these key lessons:

WordPress errors are generic: They describe the symptom, not the cause.
Layers matter: An upload goes through Web Server → PHP → WordPress. A failure at any layer breaks the chain.
Check the logs first: A few seconds in the error log can save you hours of guessing and prevent you from wasting money on unnecessary hardware upgrades.

Introduction

AI generated CSS3 — CSS3 Image generated by AI

Centering an image alongside text in a container might seem straightforward, but dealing with the differences between block and inline elements often complicates the task. While it's easy to position these elements separately, combining them can present unexpected challenges. I recently encountered this issue when trying to align an image to the left and center the heading within the same container. After experimenting with outdated techniques like float, I turned to modern CSS tools like Flexbox to find a cleaner, more efficient solution. This article explores my approach and the lessons learned along the way.

The challenge

The text I was using was my site heading with the HTML element <h1. which is a block-level element, which means that it doesn't play nice with other elements on the same line. It starts on a new line and needs to take up the entire line. Whereas the <img> element is an inline element which means it is happy to play with others on the same line. Of course, I could play with the CSS float property, but there is a problem. The moment I introduce float for an element, it takes that element out of the document flow. and it becomes hard to control the behavior of that element.

Options

As mentioned earlier, I tried using float: left and float: inline-start, but it doesn't always behave as I want. As a best practice, I try to use the latest techniques as much as possible and that's where the modern flex and CSS GridBox came in. Flexbox when assigned to the parent container, aligns all the content text to the left as shown below.

After a lot of trial and error, it came down to using specificity and going minimalist. I also wanted to have the option to style images that I might use on the site independently so I didn't apply any styling to the core img element. I created several classes to manipulate the images and applied those. During all this trial and error, another problem vexed me. I couldn't get the image to align to the middle of the parent container with all the techniques I knew. I researched and tried with align-self property. That finally worked. I didn't want to apply this to the core img element and I didn't want to create a class for this so I used the Child Combinator to target the specific img element which is a child of header element (header > img). That took care of the issue of image alignment.

The next issue was to align the header text in the center. I tried all the tricks I knew with text-align, align-self, align-items, justify-self, and justify-items. But because the parent header element was marked as flex, the subsequent styles didn't apply. Finally I tried a simple trick to center the content using margin: auto and that did the trick. Here's how the final output looks now.

Even when I change the height of the header container, the image and text are vertically in the middle of the element and stay where there on the x-axis.

Final code

HTML code:

<header class="flexi">
  <img class="round-img small" src="img/Mukul-2019.jpg" alt="Mukul Dharwadkar" caption="Picture of Mukul Dharwadkar" />
  <h1 class="center-align">
    Mukul Dharwadkar
  </h1>
</header>

CSS code:

header {
    width: 900px;
    margin: auto;
    height: 120px;
    background-color: antiquewhite;
  }

/* The CSS rule below is highly specific for an img element that is a child of the header element.
Typically there will be only one img element inside the header and therefore this is safe to keep */

header > img {
  align-self: center;
}

.flexi {
  display: flex;
}

.round-img {
  border-radius: 50%;
}

.small {
  width: 100px;
}

.flexi {
  display: flex;
}

.center-align {
  margin: auto;
}

The full code is on my Github repo. Feel free to use it.

Conclusion:

Achieving the perfect alignment of images and text in web design often requires experimenting with different CSS techniques. In this case, Flexbox proved to be the most efficient and modern solution for centering content within a container, while maintaining the flexibility to adjust styling independently. By using targeted selectors like the Child Combinator and leveraging Flexbox’s alignment properties, I was able to solve the issue cleanly and efficiently. This method not only streamlines the code but also ensures that future adjustments will be easier to manage. CSS can be tricky, but with the right approach, you can create polished, professional layouts.

Category: webdev

Nginx vs. WordPress: The 1MB Limit You Didn’t Know You Had