Comments (17)
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.
from bmrcportal.
Got it!
from bmrcportal.
Let's ask Kathy what a good thumbnail image size might be for this purpose. Soon! :)
from bmrcportal.
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/
from bmrcportal.
Could you include a link to the mockup for this page?
from bmrcportal.
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.
from bmrcportal.
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
from bmrcportal.
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?
from bmrcportal.
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.
from bmrcportal.
Please include a selected image with each featured topic. Hide the display of the LH sidebar image when in mobile view. See #41.
from bmrcportal.
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.
from bmrcportal.
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.
from bmrcportal.
I think this looks great! We should probably have a guideline for the size / ratio for the images to standardize it. Thoughts?
from bmrcportal.
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.
from bmrcportal.
(I'm going to label this "content" for the time being- if you'd like to close it out, please do.)
from bmrcportal.
Is there a list of file formats in order of preference for the images? For example:
- JPEG
- PNG
- TIFF
from bmrcportal.
closing out, but labelled enhancement so as to include it in later guidelines and standards for content
from bmrcportal.
Related Issues (20)
- container inventory: labels displaying on top of other text HOT 4
- Accessibility: clickable logo in header HOT 1
- Accessibility: social icons HOT 5
- Accessibility: search button (magnifier icon) for WEBSITE HOT 1
- Error message for no site search results points to old link HOT 2
- Accessibility: need alt text for iframe HOT 4
- Accessibility: "Skip to" links not visible HOT 5
- Accessibility: two links in same context, different targets HOT 1
- Accessibility: line height too small in footer HOT 1
- Erroneous results in search
- North Park U name showing up in abbreviated form HOT 6
- Subject headings: identical heading with and without white space in dashes HOT 2
- seeing a lot of "Guide to the" in the SERP collection titles HOT 1
- font size seems very small in Edge browser
- Remove periods at end of subject and corpname terms HOT 1
- text is clipped when re-sized
- Accessibility per UC: need a link in the footer
- display of very detailed "extent" from MARCXML conversions is messy
- "Squished" display of multi-line inventory in finding aid view HOT 1
- Add contact info to Archives data page HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bmrcportal.