search

OpenWaterFoundation / owf-app-infomapper-ng

Open Water Foundation InfoMapper web application for menu-driven maps and visualizations, using Angular
GNU General Public License v3.0
1 stars 2 forks source link

Need guidelines on image sizing for content pages #353

Open smalers opened 3 years ago

smalers commented 3 years ago

I added a large image to the following page: http://coagtransfer.openwaterfoundation.org/latest/#/content-page/home

This caused a horizontal scrollbar to be added, although it seems that the text content are still within the normal width... just he image is larger and is causing the horizontal scrollbar.

The following are technical considerations:

  1. Should oversized images be autoscaled to fit in the width of the text so that horizontal scrollbar is not needed? See how MkDocs handles, which seems to be a good design.
  2. Should horizontal scrollbar remain even though text does not need it? It is uglier to have the horizontal scrollbar.
  3. Can recommendations be provided in documentation such as InfoMapper documentation on maximum size of images to prevent the scrollbar?
Nightsphere commented 3 years ago

I looked into this issue, and I think being able to autoscale the image would be the most ideal, but unfortunately not the easiest to implement. Some CSS can be used for the surrounding <div>, but the most important CSS that needs to be used is in the <img> tag for the image. Since this is a markdown file, if a user uses the markdown syntax to display the image, then this HTML can't be given.

I tried to do a search and replace in the final HTML string that's given when converting the markdown string. In it I added the CSS to the <img> tag, which seemed to work for the large image, but if there is a smaller image on the Content Page as well, it blows it up to fit in the div displaying the markdown. I'm having a hard time differentiating between multiple images and knowing their initial sizes so they can be adequately sized. It feels like right now a lot of code for parsing would need to be added and seems a convoluted solution.

I agree that having the x-axis scroll bar is quite ugly, so I also tried to use the ability for markdown image sizing, which ended up working! Showdown has a constructor option named parseImgDimensions that allows a user to add the images dimensions in the markdown like we've seen before, e.g. (![Waldo](./path/to/waldo.png =777x777)

This is at least one solution that can work pretty well, and supports different ways of displaying the image so the dimensions can stay intact. For example, (![Waldo](./path/to/waldo.png =1153x*) will set the image width to 1153px and keep the ratio of the original picture to determine the image height.

Overall, I can keep the original idea in mind and see if anything pops up later that might help with that, but for now the markdown way is doing okay, even if it is setting the image dimensions to be static. This means the image will display just fine on a full screen, but if the screen size changes, the image will stay the same size.