Tutorial : WordPress – Automatically Link Images to Their Full-Size Versions

Overview

This guide will explain how to create and implement the EasyCodingWithAI—Dynamic Image Linker WordPress add-on.

Example Prompt.

Help me create a simple WordPress plugin that links images in posts to their full-size versions. The plugin should wrap each image in a link that opens the full-size image in a new tab. If the image is already linked, it should update the link.

This addon automatically links images in posts to their full-size versions, enhancing the user experience by allowing quick access to larger images.

1. Prerequisites

Before creating the addon, ensure you have:

• A WordPress installation (local or hosted).
• Basic knowledge of PHP and WordPress plugin development.
• Access to your WordPress site’s file system.

2. Creating the Addon

Step 1: Setup the Plugin Folder

1. Navigate to your WordPress installation directory.
2. Go to the /wp-content/plugins/ folder.
3. Create a new folder named easycoding-dynamic-image-linker.

Step 2: Create the Main Plugin File

1. Inside the easycoding-dynamic-image-linker folder, create a new file named easycoding-dynamic-image-linker.php.

Step 3: Write the Plugin Code

Open the easycoding-dynamic-image-linker.php file and add the following code:

<?php
/*
Plugin Name: EasyCodingWithAI - Dynamic Image Linker
Description: Automatically wraps images in posts with links to their full-size versions.
Version: 1.1
Author: EasyCodingWithAI
*/

function easycoding_auto_image_linker_content_filter($content) {
    // Find all image tags in the post content
    preg_match_all('/<img[^>]+>/', $content, $matches);

    if (!empty($matches[0])) {
        foreach ($matches[0] as $image) {
            // Extract the URL of the full-size image
            if (preg_match('/src="([^"]+)"/', $image, $src_match)) {
                $full_size_url = $src_match[1];
            } else {
                continue; // Skip if no source URL found
            }

            // Extract the alt attribute, if available
            $alt_attribute = '';
            if (preg_match('/alt="([^"]*)"/', $image, $alt_match)) {
                $alt_attribute = $alt_match[1];
            }

            // Wrap image in a link if not already linked
            if (strpos($image, '<a') === false) {
                // Create the linked image HTML
                $linked_image = '<a href="' . esc_url($full_size_url) . '" target="_blank" title="' . esc_attr($alt_attribute) . '">' . $image . '</a>';
            } else {
                // Replace existing link
                $linked_image = preg_replace('/<a[^>]+>(<img[^>]+>)<\/a>/', '<a href="' . esc_url($full_size_url) . '" target="_blank" title="' . esc_attr($alt_attribute) . '">$1</a>', $image);
            }

            // Replace the original image with the linked version in the content
            $content = str_replace($image, $linked_image, $content);
        }
    }

    return $content;
}
add_filter('the_content', 'easycoding_auto_image_linker_content_filter');

3. Using the Addon

1. Activate the Addon:
   1. Go to the WordPress admin dashboard.
   2. Navigate to Plugins > Installed Plugins.
   3. Find EasyCodingWithAI – Dynamic Image Linker in the list and click Activate.
2. How It Works:
   • The addon automatically scans the content of your posts for “img” tags.
   • For each image, it checks if it is already wrapped in an anchor “a” tag.
     • If not, it creates a link to the full-size image.
     • If it is already linked, it updates the link to point to the full-size image.
   • The full-size image is opened in a new tab when clicked.
3. Example: When you add an image to a post, it will be automatically converted to:

   <a href="full-size-image-url" target="_blank" title="Alt text">
       <img src="thumbnail-image-url" alt="Alt text">
   </a>

   Users can now click on the image to view it in its full resolution without leaving the current page.