Creating an Image Optimization Function in PHP🔩

Esuki — Thu, 05 Oct 2023 09:56:12 +0000

Like image optimization components commonly used in front-end frameworks such as Next.js and Nuxt.js, I've created a PHP function that returns an optimized image by passing an image path.

This enables the optimization of images received from external storage, CMS, etc.

Demo

https://cf785610.cloudfree.jp/index.php

The PHP version is 8.1.22.

Also use GD.

Step1: Create an API to resize and convert images to WebP

// _image.php
<?php

$url = $_REQUEST["url"];
$size["W"] = $_REQUEST["w"];

$img_data = file_get_contents($url);
$base_img = imagecreatefromstring($img_data);
list($base_w, $base_h) = getimagesizefromstring($img_data);

$zoom = $size["W"] / $base_w;
$image = imagecreatetruecolor($size["W"], $base_h * $zoom);
imagecopyresampled($image, $base_img, 0, 0, 0, 0, $size["W"], $base_h * $zoom, $base_w, $base_h);

header("Content-Type: image/webp");
header("cache-control: max-age=2592000");
imagewebp($image);

imagedestroy($base_img);
imagedestroy($image);

We recommend restricting the origins and referers that can access this API, as well as limiting the domain of the image URL to be optimized.

Step:2 Create a function to generate an `<img>` tag for displaying an optimized image.

// get_optimized_image.php
<?php

function get_path($img_path = "", $size = 390)
{
  return "/_image.php?url=$img_path&w=$size " . $size . "w";
};

function get_optimized_image($attributes)
{
  $breakpoint = [390, 768, 1024, 1280, 1920]; // Feel free to adjust the breakpoint values to your preference.

  $imgs = array_map(function ($val) use ($attributes) {
    return get_path($attributes["src"], $val);
  }, $breakpoint);
  $attributes["srcset"] = implode(", ", $imgs);
?>
  <img <?php foreach ($attributes as $key => $value) {
    if ($value) {
      echo " {$key}=\"{$value}\"";
    }
  } ?> />
<?php
};
?>

Step3: Display optimized images

// index.php
<?php
include_once('get_optimized_image.php');
?>

<body>
  <?php get_optimized_image(["src" => "https://example.com/example.jpg"]) ?>
</body>

How to support dark mode in Next.js App Router with almost no "use client"🌞🌜

Esuki — Tue, 25 Jul 2023 02:45:32 +0000

Demo

https://next13-dark.vercel.app
The version of Next.js is 13.4.10.

Conclusion

Saving and reading the current theme using the cookies
The theme change using the Server Actions
Thematic styles can be set with CSS Modules or Tailwind CSS

Step 1: Enable `Server Actions`

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    serverActions: true // Add,
  },
};

module.exports = nextConfig;

Step 2: Set the current theme to `html` tag

// layout.tsx

import { cookies } from "next/headers";

import ThemeToggle from "./_components/themeToggle"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const defaultTheme = "light";
  const cookieValue = cookies().get("theme")?.value || "";
  const isTheme = cookieValue === defaultTheme || cookieValue === "dark";
  const theme = isTheme ? cookieValue : defaultTheme;

  return (
    <html className={theme}>
      <body>
        <ThemeToggle currentTheme={theme} />

        {children}
      </body>
    </html>
  );
}

Step 3: Create a button to switch themes

// themeToggle.tsx

"use client"; // Required to set the onClick.

import { setTheme } from "./action";

export default function ThemeToggle({ currentTheme }: { currentTheme: string }) {
  const changeTheme = () => setTheme(currentTheme);

  return (
    <button onClick={changeTheme}>
      {currentTheme === "light" ? "Dark" : "Light"}
    </button>
  );
}

Step 4: Create a `Server Actions` to change the theme

"use server";

import { cookies } from "next/headers";
import { revalidatePath } from "next/cache";

export const setTheme = (currentTheme = "") => {
  const newTheme = currentTheme === "light" ? "dark" : "light";
  cookies().set("theme", newTheme); // This method can only be used with `Server Actions` or `Route Handlers`.
  revalidatePath("/");
};

Step 5: Change styles by theme

// globals.scss

html {
  background: white;
  color: black;
  &.dark {
    background: black;
    color: white;
  }
}

a {
  color: steelblue;
  html.dark & {
    color: skyblue;
  }
}

For Scss Modules.

// page.module.scss

.wrap {
  background: white;
  color: black;
}

:global(html.dark) {
  .wrap {
    background: black;
    color: white;
  }
}

DEV Community: Esuki

Creating an Image Optimization Function in PHP🔩

Demo

Step1: Create an API to resize and convert images to WebP

Step:2 Create a function to generate an <img> tag for displaying an optimized image.

Step3: Display optimized images

How to support dark mode in Next.js App Router with almost no "use client"🌞🌜

Demo

Conclusion

Step 1: Enable Server Actions

Step 2: Set the current theme to html tag

Step 3: Create a button to switch themes

Step 4: Create a Server Actions to change the theme

Step 5: Change styles by theme

Step:2 Create a function to generate an `<img>` tag for displaying an optimized image.

Step 1: Enable `Server Actions`

Step 2: Set the current theme to `html` tag

Step 4: Create a `Server Actions` to change the theme