ComfyUI Node: Image+Text Grid

Image+Text Grid:

The ImageTextGrid node is a custom component within the ComfyUI framework designed to create visually appealing grid layouts of images accompanied by captions. This node is particularly useful for AI artists who want to present multiple images in a structured format, enhancing the visual storytelling by adding descriptive text to each image. The node automatically arranges images into a grid, ensuring that each image is resized to maintain its aspect ratio and is centered within its designated cell. Captions are neatly wrapped and displayed beneath each image, with the text size and layout adjusted to fit within the available space. This functionality allows for a professional presentation of image collections, making it easier to convey concepts or themes through a combination of visuals and text.

Image+Text Grid Input Parameters:

images

The images parameter is a list of image tensors that you want to include in the grid. Each image will be processed to fit within the grid layout, maintaining its aspect ratio. This parameter is crucial as it determines the visual content of the grid. There is no explicit minimum or maximum number of images, but the grid layout will adjust based on the number of images provided.

captions

The captions parameter is a list of strings, where each string corresponds to a caption for an image in the images list. Captions provide context or descriptions for the images, enhancing the narrative or thematic presentation. If fewer captions are provided than images, some images may not have captions. There is no strict limit on the length of each caption, but longer captions will be wrapped to fit within the designated space.

cols

The cols parameter specifies the number of columns in the grid layout. This determines how many images will be placed side by side in each row. Adjusting this parameter affects the overall appearance and compactness of the grid. The minimum value is 1, and there is no strict maximum, but practical limits depend on the display size and the number of images.

cell_w

The cell_w parameter defines the width of each cell in the grid. This affects the size of the images and captions, as each image will be resized to fit within its cell while maintaining its aspect ratio. The minimum value is determined by the smallest image size you want to display, and there is no strict maximum, but larger values may require more screen space.

cell_h

The cell_h parameter sets the height of each cell in the grid. Similar to cell_w, this parameter influences the size of the images and captions. The height should be sufficient to accommodate the image and its caption. The minimum value is determined by the smallest image size you want to display, and there is no strict maximum, but larger values may require more screen space.

caption_height

The caption_height parameter specifies the height allocated for captions beneath each image. This ensures that captions are displayed clearly without overlapping with the images. The minimum value is 0, which means no space is allocated for captions, and there is no strict maximum, but it should be large enough to display the desired text size.

padding

The padding parameter determines the space between cells in the grid. This affects the overall spacing and separation between images and captions, contributing to the visual aesthetics of the grid. The minimum value is 0, which means no space between cells, and there is no strict maximum, but larger values will increase the overall size of the grid.

font_size

The font_size parameter controls the size of the text used for captions. This affects the readability and appearance of the captions. The minimum value is determined by the smallest readable text size, and there is no strict maximum, but larger values may require more space in the caption_height.

text_color

The text_color parameter specifies the color of the caption text. This can be any valid color representation, such as a hex code or RGB value. The choice of color should ensure good contrast with the background for readability.

Image+Text Grid Output Parameters:

grid_image

The grid_image output parameter is the final image generated by the node, containing the grid layout of images with captions. This output is a single image file that can be saved or displayed, showcasing the arranged images and their corresponding captions in a cohesive format. The grid image serves as a visual summary of the input images and captions, making it a valuable asset for presentations or sharing.

Image+Text Grid Usage Tips:

• Ensure that the number of captions matches the number of images to avoid any images without descriptions.
• Adjust the cols parameter based on the number of images and the desired layout to achieve a balanced grid appearance.
• Use the padding parameter to create a visually appealing separation between images and captions, enhancing the overall presentation.
• Choose a font_size and text_color that provide good readability against the background and image content.

Image+Text Grid Common Errors and Solutions:

Image size mismatch

• Explanation: This error occurs when the input images have varying sizes that do not fit well within the specified cell dimensions.
• Solution: Ensure all input images are of similar dimensions or adjust the cell_w and cell_h parameters to accommodate the largest image size.

Caption overflow

• Explanation: This error happens when captions are too long to fit within the allocated caption_height.
• Solution: Increase the caption_height or reduce the length of captions to ensure they fit within the designated space.

Font not found

• Explanation: This error occurs if the specified font for captions is not available.
• Solution: Ensure the font file is correctly installed and accessible, or choose a different font that is available on your system.