Image Resizer for Portfolio Website

README.md

Image Resizer for Portfolio Website

Automatically generates small and large versions of portfolio images while preserving aspect ratios. Accepts multiple input formats but always outputs PNG.

Prerequisites

• ImageMagick must be installed
  • macOS: brew install imagemagick
  • Ubuntu: sudo apt-get install imagemagick
  • Windows: Download from imagemagick.org

Usage

# Check if ImageMagick is installed
make check

# See supported input formats
make formats

# Preview what images will be processed
make list

# Resize all images
make resize-images

# Clean up generated images
make clean

Makefile

# Image processing with ImageMagick
# Usage: make resize-images

# Define directories
ASSETS_DIR = assets
SMALL_HEIGHT = 360
LARGE_HEIGHT = 1080

# Find all image files but exclude _small and _large versions
ORIGINAL_IMAGES := $(shell find $(ASSETS_DIR) -type f \( \
	-iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" -o -iname "*.gif" \
	-o -iname "*.webp" -o -iname "*.tiff" -o -iname "*.tif" -o -iname "*.bmp" \
	-o -iname "*.svg" \) \
	! -name "*_small.*" ! -name "*_large.*")

# Generate target file lists (always PNG output)
SMALL_IMAGES := $(foreach img,$(ORIGINAL_IMAGES),$(dir $(img))$(basename $(notdir $(img)))_small.png)
LARGE_IMAGES := $(foreach img,$(ORIGINAL_IMAGES),$(dir $(img))$(basename $(notdir $(img)))_large.png)

# Default target
.PHONY: all
all: resize-images

# Main target to resize all images
.PHONY: resize-images
resize-images: $(SMALL_IMAGES) $(LARGE_IMAGES)
	@echo "All images have been resized!"

# Rule to create small images (always output PNG)
%_small.png: 
	$(eval BASE_NAME := $(basename $(notdir $@)))
	$(eval ACTUAL_BASE := $(BASE_NAME:_small=))
	$(eval ORIGINAL := $(shell find $(ASSETS_DIR) -type f \( \
		-iname "$(ACTUAL_BASE).*" \) \
		! -name "*_small.*" ! -name "*_large.*" | head -1))
	@if [ -z "$(ORIGINAL)" ]; then \
		echo "Error: Could not find original image for $(ACTUAL_BASE)"; \
		exit 1; \
	fi
	@echo "Creating small version: $@ (from $(ORIGINAL))"
	@magick "$(ORIGINAL)" -resize x$(SMALL_HEIGHT) -format png "$@"

# Rule to create large images (always output PNG)
%_large.png:
	$(eval BASE_NAME := $(basename $(notdir $@)))
	$(eval ACTUAL_BASE := $(BASE_NAME:_large=))
	$(eval ORIGINAL := $(shell find $(ASSETS_DIR) -type f \( \
		-iname "$(ACTUAL_BASE).*" \) \
		! -name "*_small.*" ! -name "*_large.*" | head -1))
	@if [ -z "$(ORIGINAL)" ]; then \
		echo "Error: Could not find original image for $(ACTUAL_BASE)"; \
		exit 1; \
	fi
	@echo "Creating large version: $@ (from $(ORIGINAL))"
	@magick "$(ORIGINAL)" -resize x$(LARGE_HEIGHT) -format png "$@"

# Clean generated images
.PHONY: clean
clean:
	@echo "Removing generated images..."
	@find $(ASSETS_DIR) -name "*_small.png" -delete
	@find $(ASSETS_DIR) -name "*_large.png" -delete
	@echo "Cleanup complete!"

# Show what images will be processed
.PHONY: list
list:
	@echo "Original images found:"
	@for img in $(ORIGINAL_IMAGES); do echo "  $$img"; done
	@echo ""
	@echo "Small PNG images to be created:"
	@for img in $(SMALL_IMAGES); do echo "  $$img"; done
	@echo ""
	@echo "Large PNG images to be created:"
	@for img in $(LARGE_IMAGES); do echo "  $$img"; done

# Debug target to check what's happening
.PHONY: debug
debug:
	@echo "Assets directory: $(ASSETS_DIR)"
	@echo "Looking for images in: $(shell pwd)/$(ASSETS_DIR)"
	@echo ""
	@echo "Raw find results:"
	@find $(ASSETS_DIR) -type f 2>/dev/null || echo "Directory not found!"
	@echo ""
	@echo "Image files found:"
	@find $(ASSETS_DIR) -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" -o -iname "*.gif" -o -iname "*.webp" -o -iname "*.tiff" -o -iname "*.tif" -o -iname "*.bmp" -o -iname "*.svg" \) 2>/dev/null || echo "No images found!"

# Check if ImageMagick is installed
.PHONY: check
check:
	@which magick > /dev/null 2>&1 || (echo "ImageMagick is not installed. Please install it first:" && echo "  macOS: brew install imagemagick" && echo "  Ubuntu: sudo apt-get install imagemagick" && echo "  Windows: Download from https://imagemagick.org/script/download.php" && exit 1)
	@echo "ImageMagick is installed and ready!"

# Show supported input formats
.PHONY: formats
formats:
	@echo "Supported input formats:"
	@echo "  • JPG/JPEG"
	@echo "  • PNG"
	@echo "  • GIF"
	@echo "  • WebP"
	@echo "  • TIFF/TIF"
	@echo "  • BMP"
	@echo "  • SVG"
	@echo ""
	@echo "All outputs will be converted to PNG format."