The images throughout the PDS site are most commonly found on the various landing pages. The images to use in each of these positions have specific rules, but also specifications to ensure the site maintains a consistent, high production quality experience.
Each image should be thought about in terms of the entity it represents or could represent. From there, it will have a primary instantiation in the hero/header area of landing pages and a secondary "portrait," version that will reference the landing page elsewhere on the site.
It is recommended that the image not exceed a height outside of the 16:9 aspect ratio, however there is no hard limit to the height of the provided image so long as it matches the specified width.
The Hero image itself is presented at 1366px by 280px. Any provided image will crop to the horizontal center of the image meaning that the top and bottom of the image will be cropped out. As a result, any selected image should aim to have the primary focus or subject of the image in the actual center to ensure it is seen.
Example of the Portrait Reference
The Portrait Reference is how the Investigation, Instrument, or other Landing Page type can be seen elsewhere throughout the site. The Portrait Reference will take the same image assigned to the original entity (the same image featured in the Hero/Header), and instead of a letterbox crop, will utilize a pillarbox crop taking out a portion of the left and right side of the image. Again, ensuring the image features the subject as close to actual center as possible is key so that it can be seen.
Since the Portrait Reference will utilize the same asset from the Hero/Header, there is no need to upload two separate versions of the asset at this time. However, if the editor has a preference (possibly due to an image better suited to the portrait orientation and size), they can provide a separate asset with the following specifications.
The final image dimensions at 72dpi for the image will be 230px (W) by 353px (H).
Additionally, one image can be used in place of multiple other entries on the site due to the references between context products. As a result, if an image isn't provided for downstream entries, one image can be applied. An image for an Investigation (and all Investigation sub-types) is the most necessary image to assign where if there is no image provided downstream then it will utilize the assigned Investigation Image in this fallback approach. Target images are also necessary as there is no true fallback image available for a target.
Data Collection > Data Bundle > Instrument > Investigation
As an example, an instrument image isn't assigned, it will use the investigation image, which is how this translates down the line.
💡 Description
The images throughout the PDS site are most commonly found on the various landing pages. The images to use in each of these positions have specific rules, but also specifications to ensure the site maintains a consistent, high production quality experience.
Each image should be thought about in terms of the entity it represents or could represent. From there, it will have a primary instantiation in the hero/header area of landing pages and a secondary "portrait," version that will reference the landing page elsewhere on the site.
Example of the Hero/Header Image
Image Ratio 16:9 Hero Header Image Minimum Width - 1366px, 72ppi Hero Header Ideal Image Width - 2732px, 72ppi - OR - 1366px, 144ppi
It is recommended that the image not exceed a height outside of the 16:9 aspect ratio, however there is no hard limit to the height of the provided image so long as it matches the specified width.
The Hero image itself is presented at 1366px by 280px. Any provided image will crop to the horizontal center of the image meaning that the top and bottom of the image will be cropped out. As a result, any selected image should aim to have the primary focus or subject of the image in the actual center to ensure it is seen.
Example of the Portrait Reference
The Portrait Reference is how the Investigation, Instrument, or other Landing Page type can be seen elsewhere throughout the site. The Portrait Reference will take the same image assigned to the original entity (the same image featured in the Hero/Header), and instead of a letterbox crop, will utilize a pillarbox crop taking out a portion of the left and right side of the image. Again, ensuring the image features the subject as close to actual center as possible is key so that it can be seen.
Since the Portrait Reference will utilize the same asset from the Hero/Header, there is no need to upload two separate versions of the asset at this time. However, if the editor has a preference (possibly due to an image better suited to the portrait orientation and size), they can provide a separate asset with the following specifications.
Image Ratio - 9:16 Portrait Ref Image Minimum Width - 230px, 72ppi Portrait Ref Ideal Image Width - 560px, 72ppi - OR - 230px, 144ppi
The final image dimensions at 72dpi for the image will be 230px (W) by 353px (H).
Additionally, one image can be used in place of multiple other entries on the site due to the references between context products. As a result, if an image isn't provided for downstream entries, one image can be applied. An image for an Investigation (and all Investigation sub-types) is the most necessary image to assign where if there is no image provided downstream then it will utilize the assigned Investigation Image in this fallback approach. Target images are also necessary as there is no true fallback image available for a target.
Data Collection > Data Bundle > Instrument > Investigation As an example, an instrument image isn't assigned, it will use the investigation image, which is how this translates down the line.
⚔️ Parent Epic / Related Tickets
No response