Meaningful default cover image
cblanken opened this issue · 13 comments
It would be nice if the default cover images for books reflected the title of the book. Especially since in the "Cover only" view, it's impossible to distinguish books that haven't been given a cover image since they all read "Lingua Cafe".
Example
@simjanos-dev I'd like to work on a PR for this if it's okay with you?
That would be great!
How do you plan to implement it? I think the best way would be to remove the text from the image file, then add the title on the front end, because that way long titles can easily be shortened/hidden with css, and we don't have to store different images.
I also think maybe we could add the logo, and in the table/list view hide the added title, since it would be very small, and it is visible next to the image.
What do you think? These are just suggestions that came to mind.
How do you plan to implement it? I think the best way would be to remove the text from the image file, then add the title on the front end, because that way long titles can easily be shortened/hidden with css, and we don't have to store different images.
Yeah, that's pretty much what I was thinking, but think it would be a good idea to do some conditional rendering, so an extra image doesn't need to be loaded if one isn't assigned. I think that would be a bit more flexible and the background, title, and icon can all be handled in CSS.
I also think maybe we could add the logo, and in the table/list view hide the added title, since it would be very small, and it is visible next to the image.
Agreed, there isn't really room for the title in the table view. I was considering making a simple "missing image" icon to go with it. Something like this https://www.freepik.com/premium-vector/default-image-icon-vector-missing-picture-page-website-design-mobile-app-no-photo-available_33011701.htm
I think a "missing image" icon would be a good addition for all of the views actually, and make it clear it's a place holder and changeable. But we could just go with the LinguaCafe icon too, if you'd prefer that.
Yeah, that's pretty much what I was thinking, but think it would be a good idea to do some conditional rendering, so an extra image doesn't need to be loaded if one isn't assigned. I think that would be a bit more flexible and the background, title, and icon can all be handled in CSS.
That's smart. Can you please also remove it from the back-end? If not, I can help with that part.
Agreed, there isn't really room for the title in the table view. I was considering making a simple "missing image" icon to go with it. Something like this https://www.freepik.com/premium-vector/default-image-icon-vector-missing-picture-page-website-design-mobile-app-no-photo-available_33011701.htm
You can use icons from here: https://pictogrammers.com/library/mdi/. I have no preference, I always upload an image. The missing icon might be more clear for users, so let's go with that.
Can you please also remove it from the back-end? If not, I can help with that part.
I should be able to. Are you just talking about the hard-coded references to the default.jpg and the file itself? Or, is there more to it?
You can use icons from here: https://pictogrammers.com/library/mdi/. I have no preference, I always upload an image. The missing icon might be more clear for users, so let's go with that.
I don't see any icons from the Material Design list that I particularly like, but I was thinking of something like one of these. Ideally with a color swap for light/dark modes and a caption of "No cover image" or something like that.
| Light | Dusk | Night |
|---|---|---|
 |
 |
 |
 |
 |
 |
I should be able to. Are you just talking about the hard-coded references to the default.jpg and the file itself? Or, is there more to it?
Actually, I checked and it is kind of complicated. It is present in multiple places, and would also need database changes to change 'default.jpg' to null. Since we would not be saving much performance, I think we should just keep the default.jpg.
Feel free to use the ones you linked with linguacafe colors, as long as they are not copyrighted. I'm going to sleep now, will respond tomorrow if you have more questions.
Actually, I checked and it is kind of complicated. It is present in multiple places, and would also need database changes to change 'default.jpg' to null. Since we would not be saving much performance, I think we should just keep the default.jpg.
I don't think it's necessary to force default.jpg to null. At least not for the conditional rendering. From my testing, initializing books with an empty string for $book->cover_image works fine. I haven't looked much into the backend but I'm assuming it's just storing a path in the database, not the image itself right?
If you really want me to keep the default.jpg though, would you have any objections to me replacing it with a default.svg? Using a jpg just doesn't scale well, and will make it more difficult to change the background color if the theme ever changes.
I don't think it's necessary to force default.jpg to null. At least not for the conditional rendering. From my testing, initializing books with an empty string for $book->cover_image works fine.
It is not necessary, but logically it would be better to be null. Currently it always has a filename, even if it's default.jpg.
I haven't looked much into the backend but I'm assuming it's just storing a path in the database, not the image itself right?
Correct, it stores the filename without path.
If you really want me to keep the default.jpg though, would you have any objections to me replacing it with a default.svg? Using a jpg just doesn't scale well, and will make it more difficult to change the background color if the theme ever changes.
I'm okay with that too. But it is the same issue with one less step: still needs one laravel migration that changes the filenames in the database for existing users. You can do this, or do the first version you proposed with a null value. I'm okay with all 3 solutions, just won't have time today to do the backend part. I can help/do the backend later on if you would like me to.
Okay I've looked at the backend a bit and wrote up a migration to make cover_image nullable and pulled out the references to default.jpg. Before I push any commits though, here's what I've got for the frontend.
Dark mode with LinguaCafe Icon
| Location | Icon |
|---|---|
| Edit dialog |  |
| Table view |  |
| Cover only view |  |
| Detailed view |  |
| Book page |  |
Dark mode with custom icon
| Location | Icon |
|---|---|
| Edit dialog |  |
| Table view |  |
| Cover only view |  |
| Detailed view |  |
| Book page |  |
I think both icons work well, but let me know which you'd prefer. Or I can try out some other colors for the custom icon. It's only a one-line change to swap out the icon so it should be easy to test different color schemes.
If there's anything else from the screenshots you think should be done differently just let me know 👍
Thank you so much for the work and for the detailed response!
I like the no image icon, but the colors stand out from the design for some reason. I think we should use this instead of the linguacafe logo.
Also, I think it should definitely still be the same shape as the default.jpg was everywhere, with the same background color. The icon and the text should just be on top of that.
Sorry for the late response, I have work from today.
Also, I think it should definitely still be the same shape as the default.jpg was everywhere, with the same background color. The icon and the text should just be on top of that.
Okay, I can do that. It will require some color changes on the icon though as it won't be able to include the exact colors from the palette due to the background.
I like the no image icon, but the colors stand out from the design for some reason. I think we should use this instead of the linguacafe logo.
I think the example I tested with doesn't align with the exact LinguaCafe color palette. I try a couple variations that match the color palette more closely and report back.
Okay, it looks like it was a bit more complicated than I though, but on the plus side, I learned a lot about SVGs 😅. I had to rework the SVG into a separate component, because, otherwise, re-coloring it dynamically would have required copy+pasting the inline SVG everywhere.
Anyway, here's what I came up with. I went with keeping the mountains the same color as the backdrop so they just fade together instead of trying to work out a good set of colors that contrasts well.
Let me know what you think.
Light mode
| Location | Light Mode |
|---|---|
| Table view |  |
| Cover only |  |
| Detailed view |  |
| Book view |  |
Dark mode
| Location | Dark Mode |
|---|---|
| Table view |  |
| Cover only |  |
| Detailed view |  |
| Book view |  |
It looks much better. Ill take a longer look after work, but looks good.
Thank you!