Request: increase picture size and avoid text floating around the picture about hh_extended_family HOT 9 CLOSED

If there is no picture available then a shadow default picture is shown. I found no way to control the size of this shadow picture. So I decided to show an existing picture with the same very small size. Another reason was that even now the page can be very long and increasing the size of the boxes makes it even longer.

I will try how it looks when the size is doubled or tripled.

from hh_extended_family.

It looks ok with doubled size (birth and death information can then both use 2 lines of text), but I still didn't found a solution to increase the size of the shadow images, too. I will implement an option so that you have the choice.

from hh_extended_family.

Thanks for looking into this! I appreciate your responsiveness very much, Hermann, but after looking into this once more I'd like to suggest to try a different approach.

If I understand the sizing method for these pictures correctly you are using the webtrees standards here which use the srcset attribute to allow the browser to choose from 1x, 2x, 3x and 4x image sizes, but I believe there's a restriction somewhere in the webtrees standard css definitions for the thumbnail boxes, that restrict the respective box size to a fixed hight of 50px while the width is calculated automatically.

Example for Queen Elizabeth's thumbnail from the latest webtrees Beta with https://dev.webtrees.net/demo-dev/tree/demo/ancestors-tree-4/i1:

<div class="wt-chart-box-thumbnail float-left mr-1"><a class="gallery" type="image/jpeg" href="https://dev.webtrees.net/demo-dev/tree/demo/media-download?xref=m1&amp;fact_id=a11b92ed7e364dae58b1870a1c2818e4&amp;disposition=inline&amp;mark=1" data-title="Queen Elizabeth II"><img class="wt-chart-box-thumbnail" dir="auto" src="https://dev.webtrees.net/demo-dev/tree/demo/media-thumbnail?xref=m1&amp;fact_id=a11b92ed7e364dae58b1870a1c2818e4&amp;w=40&amp;h=50&amp;fit=crop&amp;mark=1&amp;s=3ae286b2e1596d0acb69dbfafc1efe51" srcset="https://dev.webtrees.net/demo-dev/tree/demo/media-thumbnail?xref=m1&amp;fact_id=a11b92ed7e364dae58b1870a1c2818e4&amp;w=80&amp;h=100&amp;fit=crop&amp;mark=1&amp;s=54669bbcc2e2c9da62e637b58a0e128c 2x,https://dev.webtrees.net/demo-dev/tree/demo/media-thumbnail?xref=m1&amp;fact_id=a11b92ed7e364dae58b1870a1c2818e4&amp;w=120&amp;h=150&amp;fit=crop&amp;mark=1&amp;s=8eef6531bd707e8bdeac423811935a67 3x,https://dev.webtrees.net/demo-dev/tree/demo/media-thumbnail?xref=m1&amp;fact_id=a11b92ed7e364dae58b1870a1c2818e4&amp;w=160&amp;h=200&amp;fit=crop&amp;mark=1&amp;s=336aac655de0818e89414285173e2ad8 4x" alt="Queen Elizabeth II"></a></div>

Here we find class="wt-chart-box-thumbnail" twice and ... w=40&h=50 ... srcset="... w=80&h=100... 2x, ... w=120&h=150 ... 3x, w=160&h=200... 4x" ..., but the bigger sizes are being ignored and this may not work as planned in webtrees standard.

Maybe this is something where I or we should ask Greg for advice. In the end I'd like to have slightly bigger thumbnails everywhere and from that point of view it might make sense to either change/correct the standard or apply a different size by using the CSS und JS module. What do you think?

from hh_extended_family.

I now implemented the following CSS hack via the CSS und JS module and I am quite happy with it. Even bigger height values cause these thumbnails to be cropped in the webtrees standard boxes which are limited to a height of 75px with some blank space around the thumbnail. I think you don't need to implement the suggested option and can close this topic. Sorry for bothering you.

.wt-chart-box-thumbnail, .icon-silhouette-F, .icon-silhouette-M {height:69px}

from hh_extended_family.

An additional CSS hack for individuals with unknown sex is required.

.wt-chart-box-thumbnail, .icon-silhouette-F, .icon-silhouette-M, .icon-silhouette-U {height:69px}

from hh_extended_family.

In the meantime I implemented below CSS changes via the CSS & JS module. I might have missed some webtrees charts which I don't use. Please keep in mind I am using a super wide, super hi-resolution screen, the webtrees default theme and the ⚶ Vesta Classic Look & Feel module and I prefer bigger person boxes and thumbnails everywhere. To me this looks good even on a smartphone. I will therefore close this request. Feel free to reopen it or open a new issue in case you want to follow up on my initial request.

/* Increase thumbnail size, i. e. height from 50px to 100px */
.wt-chart-box-thumbnail, .icon-silhouette-F, .icon-silhouette-M, .icon-silhouette-U {height:100px; width:66px}

/* Increase person box size, i. e. width from 20rem to 25rem, height from 5rem to auto, padding from 2px to 4px */
.person_box .wt-chart-box {height:auto; padding:4px}
.wt-facts-table .wt-chart-box {height:auto; padding:4px}
.wt-family-members .wt-chart-box {width:25rem; height:auto; padding:4px}
.wt-chart-pedigree .wt-chart-box {width:25rem; height:auto; padding:4px}
.wt-chart-ancestors .wt-chart-box {width:25rem; height:auto; padding:4px}
.wt-chart-descendants .wt-chart-box {width:25rem; height:auto; padding:4px}
.wt-chart-family-book .wt-chart-box {width:25rem; height:auto; padding:4px}
.wt-chart-hourglass .wt-chart-box {width:25rem; height:auto; padding:4px}
.wt-relationship-chart .wt-chart-box {width:25rem; height:auto; padding:4px}
.wt-tab-hh-extended-family .wt-chart-box-m, .wt-tab-hh-extended-family .wt-chart-box-f, .wt-tab-hh-extended-family .wt-chart-box-u {height:auto; padding:4px}

from hh_extended_family.

This is great! I like it! The thumbnails in the extended family tab are looking better than before. But in the standard tab "Families" the aspect ratio of the thumbnails is not ok (they are too narrow or too high); @reteP-riS: do you observe this, too?

from hh_extended_family.

No, I don't observe this issue on the regular families tab, but my thumbails all have an aspect ratio of 3:2 (height:width) which aligns well with {height:100px; width:66px}. What you observe might be caused by thumbnails from the cache.

I now changed my code to:
.wt-chart-box-thumbnail, .icon-silhouette-F, .icon-silhouette-M, .icon-silhouette-U {height:100px; width:auto}
and that works very well.

from hh_extended_family.

All my photos of individuals have a hight of 200 px, the width is something between 135 and 155. So I decided now to make the width fixed and the height auto:
.wt-chart-box-thumbnail, .icon-silhouette-F, .icon-silhouette-M, .icon-silhouette-U {height:auto; width:62px}
This allows that the text is vertically aligned and the height of text in box (heading and four lines for birth and death information) is aligned with the hight of the image. But it can happen, that text floats around the silhouette images.

from hh_extended_family.