adjust the display title length and cover size

[WROIATE]

Is your feature request related to a problem? Please describe.
Some manga have a long title length same as a light novel:) Hence display the full title is not a good choice. And the manga cover size have the same problem, because of the different size of manga's first image. It could be too wide or too short

Describe the solution you'd like
create a unified display length and size for title and cover

Additional context
Such as Komga, it's a good example on this problem

[DuraMorte]

This sounds virtually identical to #20.

[WROIATE]

This sounds virtually identical to #20.

There have some differences that I want to change the display size of cover with css but you'd like to change the cover's URL. Also I want to shorten title length use ellipsis like Komga and don't want rename it. In other words, it is not a same issue.

[hkalexling]

I want to shorten title length use ellipsis like Komga

I agree this would improve the user experience. I will work on it soon.

because of the different size of manga's first image. It could be too wide or too short

We do have a CSS rule to restrict the maximum height of the thumbnails. Is this what you are looking for? It would be great if you could provide a more concrete example (preferably with screenshots).

[WROIATE]

I want to shorten title length use ellipsis like Komga

I agree this would improve the user experience. I will work on it soon.

because of the different size of manga's first image. It could be too wide or too short

We do have a CSS rule to restrict the maximum height of the thumbnails. Is this what you are looking for? It would be great if you could provide a more concrete example (preferably with screenshots).

For example:
This is Komga

This is Mango

I think it's a good idea to resize the cover. And you could display the left half image of the long picture by checking the origin picture size.

[hkalexling]

Thanks for the clarification.

I don't think what Komga does is very elegant. In your screenshot, the first half of the title is missing, and the image resolution if low because only a portion of it is shown. I think it would be better to keep it this way, but add #20 so you can manually upload a cover image with the desired size.

[WROIATE]

Thanks for the clarification.

I don't think what Komga does is very elegant. In your screenshot, the second half of the title is missing, and the image resolution if low because only a portion of it is shown. I think it would be better to keep it this way, but add #20 so you can manually upload a cover image with the desired size.

I guess Komga generate a thumbnail make it so blurry, in fact the picture resolution is high...

Sometimes this cover displayed too small (like mobile devices) that can't see anything and will create a huge gap between the two pictures like this:

How about resize it with same height? such as:

Also it looks good on the mobile devices：

If you desire to solve it with upload a cover, I suggest to Integrate some scraping API like Douban and Google to get the manga information. The example is calibre-web.

[hkalexling]

This looks nice! I will try it out and see how it works.

Do you mind sharing the CSS you used to get the result? Again feel free to submit a PR to the dev branch if you want.

[WROIATE]

This looks nice! I will try it out and see how it works.

Do you mind sharing the CSS you used to get the result? Again feel free to submit a PR to the dev branch if you want.

Unfortunately, the css style I just use chrome to edit the single div element but not code a css file for web.

[hkalexling]

@WROIATE Just to keep you updated, I tried the fixed height strategy you proposed. Unfortunately in most cases it doesn't produce the great result as shown in your screenshots above.

I then tried the Komga approach and it's actually much better than I thought:

Before:

After:

In the second screenshot, we fix the height of the cover images and titles, so the cards have the exact same size and the overall layout is much cleaner. But of course, the trade-off is that sometimes only the center part of the cover image is visible.

I will probably tweak it a bit more and make a new release soon. Feel free to let me know what you think!

[WROIATE]

@WROIATE Just to keep you updated, I tried the fixed height strategy you proposed. Unfortunately in most cases it doesn't produce the great result as shown in your screenshots above.

I then tried the Komga approach and it's actually much better than I thought:

Before:

After:

In the second screenshot, we fix the height of the cover images and titles, so the cards have the exact same size and the overall layout is much cleaner. But of course, the trade-off is that sometimes only the center part of the cover image is visible.

I will probably tweak it a bit more and make a new release soon. Feel free to let me know what you think!

Perhaps left justify the long image in the container or crop it in the web backstage will solve the display question of center part cover. You could identify the long picture at backstage and switch the display way.

[hkalexling]

Perhaps left justify the long image in the container or crop it in the web backstage will solve the display question of center part cover.

This might not work in some cases (see the following screenshot). I think I will leave it like this for now. I will work on #20 soon, and once the feature is added, you can simply upload a cover image with the desired size.

The requested features in this issue are now available in v0.2.4 so I am closing this. Feel free to reopen if needed.