Image sizing for manual

[garya]

I've added an image max size to the references in Manual:Installing and Manual:The_FreeCAD_Interface to get things to fill blank space better. However, I'm wondering how this will impact those with larger resolution displays. If the image itself is smaller than the specified size, it has no affect. However, if the image is larger, the size limit potentially reduces the image in size when it may not need to be.

My display resolution is set to 1280 x 1024. Can someone with a larger display look at Manual:The_FreeCAD_Interface and see how the first three images look? The first two are intended to fill the space to the left of the TOC; the third should spread clear across the page.

How well the images fit depends, unfortunately, on how one has the font size set in their browser as well as the display resolution. For example, using firefox, I can get the images to not completely fill the space by decreasing my font size (<ctrl>-) and to be too large and consequently appear below, rather than to the left of, the TOC by increasing my font size (<ctrl+). I don't know of a good way around this issue.

It may be that we simply have to choose a max size that is a "good average" for the way "most users" will have their displays and browsers set up.

The image sizes I've used are 600px for images intended to appear to the left of the TOC, and 900px for images intended to appear further down the document and consequently fill the entire page.

Thoughts?

[yorik]

Giving a max size only solves the problem partially. If, for example, you are reading from a tablet, you will still have the problem.

Besides, it's a pity (1920px wide):

Screenshot from 2019-01-07 10-49-38.png (520.58 KiB) Viewed 1557 times

But HTML/CSS have tools to be able to auto-shrink images properly. It's just quite complicated. But I would just leave the images with no sizing for now, until we find a proper solution.

(PS - as Norm says in other threads, the Manual:XXX links don't work - you need to use the url tool like this: Manual:What_is_FreeCAD it's a bit tedious, but ATM it's what works...

[garya]

ok, thanks.
I have v0.18 images to replace the old ones in The FreeCAD Interface. They are 1280 wide, not 1920. I'm thinking that should be large enough for images of the whole app, given the space taken by TOC on left and right. Or should I let someone else create larger images?

[yorik]

No, I think 1280 is fine...
One thing you'll notice, all images of the manual (since I did them all), all use the same desktop theme and aspect. Of course it's irrealist that every person who contributes to the wiki uses the same theme (it's even impossible because of different OSes), but I would try as much as possible to always use similar themes (basically, light grey, no dark or fancy colored themes)

[garya]

No, I think 1280 is fine...
One thing you'll notice, all images of the manual (since I did them all), all use the same desktop theme and aspect. Of course it's irrealist that every person who contributes to the wiki uses the same theme (it's even impossible because of different OSes), but I would try as much as possible to always use similar themes (basically, light grey, no dark or fancy colored themes)

I'm using the default theme, which I think is the same. When writing documentation I think one should stick to defaults in things like that to avoid confusion for new users. I'll upload the images today; let me know if there's a problem.

[Roy_043]

It is relatively easy to make images scale depending on the width of a html container. Images will then display at their original resolution only when the container is large enough. I wonder why this is not used on the Wiki.

Code: Select all

<div class="pic-container">
  <img src="example.png" title="Example" alt="Example"/>
</div>

Code: Select all

.pic-container
{max-width: 100%;}

[garya]

It is relatively easy to make images scale depending on the width of a html container. Images will then display at their original resolution only when the container is large enough. I wonder why this is not used on the Wiki.

Code: Select all

<div class="pic-container">
  <img src="example.png" title="Example" alt="Example"/>
</div>

Code: Select all

.pic-container
{max-width: 100%;}

As I understand it (and it is my limited experience as well), the issue is the wiki is controlled by the mediawiki infrastructure sitting on top of html, and mixing html with wiki directives only works for some html tags. I think Yorik is looking into it, although he is probably buried with other stuff of higher priority.

[Roy_043]

This link may be useful:
https://stackoverflow.com/questions/907 ... creen-size

[yorik]

The problem is that this will only work with divs that have a defined width. In this case, our table of contents is a floating div inside the main contents div. And so, your rule will use the total width of the contents div, not the width remaining at the left of the table of contents.
The solution obviously would be to have two separated divs/columns, one for the contents and one for the table of contents, but the wiki doesn't offer that possibility natively..

[yorik]

Problem solved with one line of javascript!

Code: Select all

$(".manualtoc").parent().find("img").css({"max-width":$(".manualtoc").parent().width()-300,"height":"auto"});