We have added an easy way for you to include images in your custom content sections of race websites and partner websites.
We have added an image upload capability to the editor we use in the Custom Content section. This will be expanded soon to include other areas where we use that editor, such as email marketing (a very frequent request!). The editor is simple to use – just click on the image icon on the right hand side:
An Upload image dialog appears:
Once you load the image, it will show the parameters of the size (we auto-scale down to 900 pixels wide max to optimize for web performance, as well as create mobile optimized sizes when your webpage is loaded from a mobile phone). Note that is you have “constrain properties” checked, you will be able to adjust the size of one side and the other will adjust to keep the proper ratio:
You can also adjust the image size once the image is showing in your editor with drag and drop.
Tech Details
You may wonder why we hesitated to give the image capability. Well, there are actually a lot of performance and content appropriateness things we worry about. We don’t simply host images on Amazon, we distribute the images to the content delivery network that optimizes image loading. For example, last week when the Harpoon 5 Miler had 1,142 registrations in a single minute after they opened registration, if all images had come from a single place, the site would have crawled.
Anyway, here are our tech notes of what we did:
- Upgraded TinyMCE version, this gives us access to a new “Upload” button (the iframe method is not needed)
- Image upload goes through our own image proxy, that checks authentication
- It then resizes the image, puts the various versions in S3, dumps the data in the database
- It then responds with a CloudFront URL
- A background process is constantly running that scans photos
- If the background process detects inappropriate photos using AWS Rekognition, it removes them from S3 (by replacing with a 1×1 PNG image)
- It also invalidates the CloudFront cache if it detects bad images
