Curated topic images

[johnjung]

Curated topic images

[johnjung]

I added a placeholder image to the config for this page. I'd like to pass this one along to Kathy so she can choose a thumbnail size that makes sense.

[MomoMoses]

Got it!

[MomoMoses]

Let's ask Kathy what a good thumbnail image size might be for this purpose. Soon! :)

[kzadrozny]

Would recommend a thumbnail size that is between 150px - 300px in width. This is the sweet spot for having a readable image that doesn't take up too much space. You can leverage the Bulma responsive image classes to get what you want: https://bulma.io/documentation/elements/image/

[johnjung]

Could you include a link to the mockup for this page?

[kzadrozny]

Per this user flow of a feature topic being clicked, it looks like we originally mocked the curated topic looking no different from a regular browse, just with the title changed. Taking these mocks into consideration, elements of issues #12 and #41 may be moot.

[MomoMoses]

Actually that user flow IS for a Browse!

We never mocked up the Featured Topic content page. Here is one made by a member of the PWG

You can see that the content we've settled on is way simpler than my original mock

[johnjung]

If it's possible for us to omit images from curated topics completely, and make them match the regular browse more closely, I think it would be helpful in a few different ways. It would be easier on the content side, because finding good images, confirming that the license allows us to use them, confirming that scans are good enough quality, obtaining a high-resolution version of the image and writing captions tends to be more work that people realize.

Then on the design and coding side, omitting images here eliminates this issue.

Laurie, based on this, I'd like to propose bumping images in curated topic pages to phase-2, so we can implement them when we migrate the site to Wagtail. This will give the BMRC a chance to see if it's worth it for them to do the work to find images for pages like this, since they're currently putting sample curated topics together. If the work is worth it to them, we can implement this feature in Wagtail in January.

Does that sound ok, considering the other issues we're working to resolve this month?

[MomoMoses]

Hmmm. I'm not sure we can eliminate -- that's the eye candy on the Home Page to entice people to explore the topics in the first place! This is also my sneaky way of having a nano-exhibit to feature content from the member institutions. They will be providing the images and giving us the caption, citation, and permission information, as in the example. We are delegating the image search externally. :)

Let's discuss what the issue really is. This one #12 was simply that the sizing had not been done yet. I think that's the case. Later the issue with the images is that the mobile view showed a repeated image. But we can hide the main content page image in that case using the code that Kathy gave us.

If you want to skip dealing with the display issues for the sidebar and the main window for the Featured Topic, I guess it's OK, but it won't be very appealing.

[MomoMoses]

Please include a selected image with each featured topic. Hide the display of the LH sidebar image when in mobile view. See #41.

[MomoMoses]

Ideally, the main page photo will be larger than the sidebar photo when viewing the actual featured curated topic. Currently, it appears smaller on my laptop.

Display looks great on mobile btw!!! on small Android anyway.

[johnjung]

I implemented a possible solution to this in 7109c19f49b8ed442cc7bdcdcba17135240b8dd9- this is now live on the server.

Because the thumbnail image is present in the sidebar on desktop displays, I wanted to avoid having the small image in the sidebar and the image in the content area being almost the same size. Here, to solve this, I let the image expand to the full width of the content area. Please let me know what you think.

[MomoMoses]

I think this looks great! We should probably have a guideline for the size / ratio for the images to standardize it. Thoughts?

[johnjung]

I think the most important thing is that the images are landscape orientation, not portrait. The images should be as high resolution as possible. The colorspace should also be sRGB- you can do this either by omitting a color profile or specifically adding an sRGB profile.

[johnjung]

(I'm going to label this "content" for the time being- if you'd like to close it out, please do.)

[MomoMoses]

Is there a list of file formats in order of preference for the images? For example:

1. JPEG
2. PNG
3. TIFF

[MomoMoses]

closing out, but labelled enhancement so as to include it in later guidelines and standards for content