Skip to main content

Styling the Image Block in the Triptease Messages Platform

Learn to upload, style, and position images with borders, padding, and alt text in Triptease Messages.

Updated over a week ago

TL;DR

  • Upload and customize an image up to 10MB in size

  • Control image shape, border, padding, and placement

  • Alt text improves accessibility and SEO

  • Optionally make the image clickable and link to a URL

When to Use It

Use the image block when you want to:

  • Add a visual element to your message, such as a photo or a GIF

  • Highlight amenities, destinations, or promotions

  • Enhance message design with branding or lifestyle imagery

  • Link directly to a landing page, offer, or booking path (without needing a button)

Images help boost engagement, especially for trust-building or visual-first campaigns.

Step-by-Step Instructions

1. Upload or Change Your Image

  • Click the Upload image button to add a file (maximum size: 10MB)

  • Supported formats: .JPG, .PNG, or .GIF (animations supported)

  • Once uploaded, you will see Change and Crop buttons to adjust the image

Tip: Use high-quality, lightweight images to reduce load times

2. (Optional) Make the Image Clickable

Toggle Make the image clickable to enable linking.

You'll then see:

This is useful when your image is already designed with embedded CTAs or campaign messaging.

3. Add Alt Text for Accessibility

  • Use the Alt text field to describe the image for screen readers

  • This also helps in cases where the image fails to load

Example: "Colorful sushi bowl with rice and vegetables"

4. Adjust Appearance and Layout

Corner Radius

  • Round the image corners using the Corner radius slider or input box

Layout Padding

  • Use Horizontal padding and Vertical padding to create space around the image within the section or container

Border Styling

  • Set Border thickness to outline the image

  • Choose a Border color to match your brand or message style

Pro Tips

  • Choose high-quality, lightweight images to avoid slow loading

  • Keep file sizes below 3MB and use .JPG or .PNG formats for best compatibility

  • Use consistent padding and corner radius for visual harmony across content blocks

  • Crop images to match the layout style and avoid awkward spacing

FAQs / Troubleshooting

Q: Why won’t my image upload?

A: Make sure your image is under 10MB and in a supported format (.JPG, .PNG, .GIF).

Q: Why does the image look cropped or misaligned?

A: Use the Crop tool and adjust padding. Check that image size fits your layout.

Q: How can I center my image in the message?

A: Use alignment controls in the section or container where the image block is placed.

Q: Can I link my image to a URL?

A: Yes! Just toggle Make the image clickable, then paste your destination URL.

Did this answer your question?