Troubleshooting Guide for Blurry Images | Axero Documentation

When implementing a photo carousel, it's crucial to ensure that the correct image URL is used to prevent blurry or improperly displayed images.

Understanding Image URL Variables in Page Builder Widgets

• {{ContentImageURL}}: This variable displays the featured image for various content types, such as articles, blogs, and wikis. For photo content types, it displays a thumbnail image.

• {{ContentDetailImageURL}}: This variable provides the path to the full-resolution version of a photo. This URL should be used when displaying images in a carousel template to ensure they appear sharp and clear.

Common Issues: Blurry Photos in Carousel

If photos appear blurry in your carousel, it may be due to the use of {{ContentImageURL}} instead of {{ContentDetailImageURL}}. The {{ContentImageURL}} displays a smaller, lower-resolution image, which is unsuitable for larger carousel displays. To resolve this issue:

1. Check the Template: Review the carousel template to ensure it is designed to distinguish between photo content types and other types of content.
2. Modify the Template: If the carousel template does not differentiate between content types, modify it to:
   • Use {{ContentDetailImageURL}} for photo content types to display the full-resolution image.
   • Use {{ContentImageURL}} for other content types where a featured image or thumbnail is appropriate.

Correcting Thumbnail Image Dimensions

If thumbnail images appear stretched or have the wrong aspect ratio, it's likely due to incorrect dimension settings.

For example, the below settings create portrait-oriented thumbnails that don't fit into landscape display boxes, causing distortion:

• • Thumbnail height (px): 225
  • Thumbnail width (px): 300

These dimensions create portrait-oriented thumbnails, which do not fit appropriately into landscape-oriented display boxes. This mismatch leads to stretched or distorted images. 

Steps to Resolve

1. Update Thumbnail Settings:

   • Navigate to the Photo Management Settings page: https://your-site-url.com/admin/photos/manage-photo-settings
   • Modify the thumbnail dimensions to:
     • Content width: 900
     • Thumbnail height (px): 500
     • Thumbnail width (px): 800

2. Verify the Change:

   • After updating the settings, upload new images to verify that the thumbnails render correctly.

3. Check the Thumbnails:

   • Review the images in albums and photo lists to confirm that the thumbnails display with the correct aspect ratio and fit within the viewport as intended.

Following these steps should resolve the issue of distorted thumbnails, ensuring images are displayed clearly and properly across the site.

Refer to Featured Image Best Practices to learn more about image settings.