Please bookmark this page to avoid losing your image tool!

Image Action And Category Organizer

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
/**
 * Creates a display card for an image with a category and an action label.
 * The function generates an HTML element that organizes the image visually
 * with the provided metadata, styled as a neat card.
 *
 * @param {HTMLImageElement} originalImg The loaded image object.
 * @param {string} [category='Uncategorized'] The category text to display for the image.
 * @param {string} [action='View Details'] The action text to display for the image.
 * @returns {HTMLDivElement} A div element containing the image and its information.
 */
function processImage(originalImg, category = 'Uncategorized', action = 'View Details') {
    // Create the main container div which will act as the card
    const container = document.createElement('div');
    container.style.border = '1px solid #e0e0e0';
    container.style.borderRadius = '8px';
    container.style.padding = '16px';
    container.style.fontFamily = 'Arial, Helvetica, sans-serif'; // Web-safe font stack
    container.style.backgroundColor = '#ffffff';
    container.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
    container.style.display = 'inline-block'; // To make the container wrap its content
    container.style.textAlign = 'left';
    container.style.overflow = 'hidden'; // Ensures content respects the border-radius

    // Set a max-width based on the image's natural width, with a fallback
    const imageWidth = originalImg.naturalWidth > 0 ? originalImg.naturalWidth : 300;
    container.style.maxWidth = `${imageWidth}px`;
    container.style.minWidth = '200px';

    // Clone the provided image element to avoid modifying the original
    const imgElement = originalImg.cloneNode(true);
    imgElement.style.maxWidth = '100%';
    imgElement.style.height = 'auto'; // Maintain aspect ratio
    imgElement.style.display = 'block'; // Remove bottom space from image
    imgElement.style.marginBottom = '16px'; // Space between image and text
    imgElement.style.borderRadius = '4px'; // Slightly rounded corners for the image
    container.appendChild(imgElement);

    // Create a container for the textual information
    const infoContainer = document.createElement('div');

    // Helper function to create a styled information row with a label and value
    const createInfoRow = (labelText, valueText) => {
        const row = document.createElement('p');
        row.style.margin = '0 0 8px 0'; // Clean margin for paragraph
        row.style.fontSize = '14px';
        row.style.lineHeight = '1.4';
        row.style.color = '#333333';
        row.style.wordWrap = 'break-word'; // Handle long text without breaking layout
        row.style.overflowWrap = 'break-word';

        const label = document.createElement('strong');
        label.textContent = `${labelText}: `;
        label.style.color = '#666666';

        const value = document.createElement('span');
        value.textContent = valueText;

        row.appendChild(label);
        row.appendChild(value);
        return row;
    };

    // Create and append the category and action rows using the Russian labels
    // from the prompt's description "Действие и категория"
    const categoryRow = createInfoRow('Категория', category); // "Категория" means "Category"
    const actionRow = createInfoRow('Действие', action);     // "Действие" means "Action"

    infoContainer.appendChild(categoryRow);
    infoContainer.appendChild(actionRow);

    // Append the info container to the main card
    container.appendChild(infoContainer);

    return container;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Action and Category Organizer is a tool designed to visually organize images by categorizing them and providing actionable labels. Users can upload images and assign them a category and an action, which will be displayed neatly in a formatted card layout. This tool is useful for organizing image galleries, managing photo collections, or any scenario where displaying images with relevant metadata is needed, such as portfolios, blogs, or product showcases.

Leave a Reply

Your email address will not be published. Required fields are marked *