...
Set up in UAT initially using the production slug. Do not add the production slug to the production site until it is ready to go live. Doing it this way will provide a few advantages. It will ensure the image uploads are ready to go in production without having to re-upload them. It will ensure that the production theme is instantly live when the production slug is added in NOP for the production site. It will reduce the risks of missing assets in the production site when it goes live.
Do all your theming in UAT for resort approval
When approval is received to go live with the theme, only then do you add the production slug to the production site. This will apply the theme you set up in UAT to production and all the assets will already have been uploaded to the production container and are ready to go.
Next, do an export of the configured theme save file from the TD App and save it to your local machine
Then update the UAT site to use the UAT slug.
Upload the theme export in TD to the UAT site container using the upload theme option in TD App.
The production theme is now applied duplicated in UAT but is using the
-testslug.Now you can re-upload the images and fonts in UAT at any time without impacting the production theme.
Lesson 4. Cropping responsive images to work well on all display sizes
...
Understanding how the browser crops background images.
If we take a look at the image below we can examine how the background image gets cropped when displayed on desktop vs mobile. The browser will always center the image in the image container and will always maintain the image aspect ratio. In order to do that, it scales the image to fit either the height or the width of the container and then crops off the overflow. This means content around the edge (sides, top, and/or bottom) of the image is likely to get cropped out in some aspect ratios.
Selecting the right images
When working with resorts on image selections it is important to select images that centralize the focal point (the main focal element(s)) of the image. If the image has its focal point too close to the edges, it is likely to get cropped out on some device aspect ratios. When requesting images from resorts, be sure to communicate this to them so that they are not providing you with images that are going to have undesirable results.Preparing the images
Sizing and cropping images can be done right in both the Windows and Mac image preview tools. But a more powerful free option is GIMP (Gnu Image Manipulation Program) https://www.gimp.org/downloads/, which I will be using for this lesson. Before uploading an image you will want to scale and appropriately pre-crop the image to the required size for the image location.
Tips for scaling and cropping.
- If the resort provides an image with the focal point off center, consider how you can crop that image to size to centralize the focal point
- If the image is larger than the size requirement, use this to your advantage. You may not need to scale it at all and instead you can crop it to the correct size while centralizing the focal point of the image.
- Always try to crop first for a good focal point, then scale as needed
Consider this example (red overlay indicates the crop area). The image provided was larger than the requirement, and the focal point (the skiier) is a bit too much off center. To fix this, instead of scaling the image down to size we can crop out the size we need while centralizing the focal point. We solved two issues with a single crop. Now when the image gets cropped in the browser to maintain the aspect ratio, the focal point will remain visible.
Finally, optimize the image by running it through the TinyPNG optimizer at https://tinypng.com/.