What This Page Does

This page lets you create custom thumbnails for your galleries by cropping any image to the perfect size. You can also add star ratings and text labels directly onto the thumbnail before saving it. The thumbnail you create here is what visitors see when browsing galleries on your site.

[Screenshot: ai-crop-overview]

How to Get Here

Navigate to Admin Panel > Database > Galleries, then click Create Thumbnail on any gallery. You can also reach this page from the AI Gallery Review tool.

Understanding the Page

When the page loads, you see the source image on the left and a set of controls on the right.

Image Area (Left Side)

The full source image is displayed with a slight dimming effect. A green-bordered box appears on the image -- this is your crop selection. Only the area inside the box is shown at full brightness, making it easy to see exactly what your thumbnail will look like.

• Drag the box to move it around the image.
• Drag the edges or corners of the box to resize it.
• The box keeps the correct thumbnail shape automatically, so your thumbnail never looks stretched.

Controls Area (Right Side)

This side contains four sections:

1. Live Preview -- A small thumbnail-sized preview that updates instantly as you move or resize the crop box.
2. Star Rating Overlay -- Add a star rating graphic onto the thumbnail.
3. Text Overlay -- Add a text label onto the thumbnail.
4. Create Thumbnail Button -- Save your finished thumbnail.

Common Tasks

How to Create a Basic Thumbnail

1. Look at the source image on the left side of the page.
2. Click and drag the green crop box to the area of the image you want as your thumbnail.
3. Resize the box by dragging its edges or corners until it frames the subject the way you want.
4. Check the Live Preview on the right to make sure it looks good.
5. Click the Create Thumbnail button.
6. A success message appears and the window closes automatically after a few seconds.

How to Add a Star Rating to Your Thumbnail

Star ratings appear as colored stars stamped directly onto the thumbnail image. This can help highlight top-rated content for your visitors.

1. Check the Enable star overlay box in the Star Rating Overlay section.
2. Click on the stars to set your rating (1 to 5 stars).
3. Pick a star color using the color picker. Gold is the default and works well on most images.
4. Select where the stars should appear from the Position dropdown:

1. Check the Live Preview to see how the stars look.
2. Click Create Thumbnail to save.

How to Add Text to Your Thumbnail

Text overlays let you add labels like "HD," "NEW," or category names directly onto the thumbnail.

1. Check the Enable text overlay box in the Text Overlay section.
2. Type your text into the text field (up to 50 characters).
3. Choose your text settings:

1. Select where the text should appear from the Position dropdown. There are 9 positions available, including all corners, edges, and center.
2. Check the Live Preview to see how it looks.
3. Click Create Thumbnail to save.

How to Add Text Effects

You can enhance your text overlay with a drop shadow or outline to make it easier to read on busy images.

1. Check the Drop Shadow box to add a shadow behind the text.
2. Adjust the shadow color, and use the Shadow X and Shadow Y sliders to control where the shadow falls.
3. Use the Outline slider to add a border around each letter (0 means no outline, higher numbers make the outline thicker).
4. Check the Live Preview to see the result.

How to Combine Stars and Text on One Thumbnail

You can use both overlays at the same time.

1. Enable and configure the star rating overlay.
2. Enable and configure the text overlay.
3. Choose different positions for each so they do not overlap. For example, place stars in the Bottom Right and text at the Bottom Center.
4. Click Create Thumbnail to save.

Tips for New Users

Troubleshooting

The image does not load on the page

What you see: The page opens but no image appears, or you see an error message.

How to fix it:

1. Make sure you opened this page from a gallery that has a source image.
2. Check that the original image is still available online by opening it in a new browser tab.
3. If the image is no longer available, try choosing a different source image for the gallery.
4. Reload the page and try again.

The crop box does not appear

What you see: The image loads but you cannot see the green crop selection box.

How to fix it:

1. Wait a moment for the page to finish loading completely.
2. Refresh the page.
3. Try using a different web browser (Chrome is recommended).
4. Clear your browser cache and reload.

The live preview is not updating

What you see: The small preview on the right side stays the same even when you move the crop box.

How to fix it:

1. Try a different web browser (Chrome is recommended).
2. Disable any browser extensions that might interfere with the page.
3. Refresh the page and try again.

Stars or text appear in the preview but not on the saved thumbnail

What you see: The overlays look correct in the preview, but after saving, the final thumbnail does not include them.

How to fix it:

1. Make sure the Enable star overlay or Enable text overlay checkbox is checked before saving.
2. Reload the page and try creating the thumbnail again.
3. If text still does not appear, contact your site administrator -- a font file may need to be installed on the server.

The thumbnail is not saving

What you see: You click Create Thumbnail but get an error about saving.

How to fix it:

1. Try refreshing the page and creating the thumbnail again.
2. If the problem continues, contact your hosting provider or site administrator. There may be a folder permission issue on the server that needs to be resolved.

How This Affects Your Site

The thumbnails you create here appear throughout your site wherever galleries are shown. Visitors see these images when browsing your gallery listings, so well-cropped thumbnails with clear subjects can help attract more clicks.

Related Pages