Athlinks

We’ve received some feedback and frustration about the event landing page image size not reflecting the actual image size. It’s a justified response that seems simple on the surface but the explanation is somewhat complex.

It has to do with the responsive nature of images in web design. In order for an image to fill the width of various screen sizes, the height to width aspect ratio cannot be maintained. So the browser does the best it can to display the image at 100% width. Unfortunately, the height of the image will not always reflect the exact height of the uploaded image. This is particularly challenging when the image has text or other branding.

Here is a screenshot of one of our Event Landing Pages:

And here is the original image:

You’ll notice how the Event Landing page is designed to focus the image on the center of the image. It stretches the image to fill the width of the browser window and crops the top and bottom to fit within the height of the image area.

So if there is any branding on the image itself, you would want to center it vertically on the image to make sure it would display in the event landing page.

As a solution, we will be working to follow some industry best practices for image designs. This potential solution would also allow you to upload more than 1 promotional image that could be opened in an event photo gallery.

Probably the best example of this is how Airbnb handles their page images. You can see an example here:

https://www.airbnb.com/rooms/432044

The first thing you’ll notice is that, depending upon your screen size, the image you are viewing is most likely not the full height of the uploaded image. As you change the size of your screen, you’ll notice how the image attempt to adjust to the responsive nature of the screen.

They have solved this by allowing the user to click on the header image to see the original image. They also have a gallery of photos the user can view.

You’ll notice our images on Athlinks behave similarly.

https://www.athlinks.com/event/3294

In order to maintain a modern design and support a responsive site going forward, we will likely be following the example of Airbnb and giving you the chance to upload multiple promotional images where a user can view the original image dimensions in a lightbox view.

Thanks and we always are wanting feedback.