search

practical-scientific-computing / practical-scientific-computing.github.io

public website for the practical scientific computing workshop
0 stars 3 forks source link

Automatic image resizing #9

Closed patrickmalsom closed 9 years ago

patrickmalsom commented 9 years ago

Figure out how to get CSS to automatically re-size an image to fit the center column of the page. As of now the site will display the image as its actual size, which means the image overflows if it is large.

On first attempt, I could not get jekyll to re-size the image with its built in markdown syntax. I suspect that bootstrap CSS is overriding the default jekyll behavior.

mpbelhorn commented 9 years ago

I just went to fix this. This looks fine on the site? Has it been fixed? I didn't see a page where images were not being resized to at most their container column. Am I missing the failing case?

patrickmalsom commented 9 years ago

Made a new commit that shows the issue. The site now has this problem on the following page

https://practical-scientific-computing.github.io/shell/00-intro.html

Also, I was called "an old man" by lincoln for putting Dilbert on a web page.

mpbelhorn commented 9 years ago

Well, he's not wrong. I can take this issue if you like unless of course you're already working on it. On Jan 27, 2015 9:20 AM, "patrickmalsom" notifications@github.com wrote:

Made a new commit that shows the issue. The site now has this problem on the following page

https://practical-scientific-computing.github.io/shell/00-intro.html

Also, I was called "an old man" by lincoln for putting Dilbert on a web page.

— Reply to this email directly or view it on GitHub https://github.com/practical-scientific-computing/practical-scientific-computing.github.io/issues/9#issuecomment-71654573 .

mpbelhorn commented 9 years ago

Ok, I've narrowed the issue down to the markdown interpereter not providing a class to the image tag. The markdown interpereter also seems to be combining arguments like ' =WxH' with the image url. There are 5 potential solutions:

1.) Modify md parser to have all images be responsive (custom markdown parser plugin, not favorable). You don't necessarily want to have all images be of class "img-responsive" but the markdown interpereters (redcarpet here) don't allow you to add a custom class as is.

2.) Write a custom liquid tag (others already have) that allows you to specify the img tag class. Better option, but won't render image in other markdown-aware engines (github)

3.) Directly code html tag. Similar pros and cons to (2), but easy to do. This is what I've already done on the master branch just as a temporary fix.

4.) Ensure all images images to be proper stock width. Kind of a pain.

5.) Best option: find out why md parser is ignoring forced-width argument, resolve that, and for the proper width in the md.

mpbelhorn commented 9 years ago

Actually, directly coding the img tag in html does render in the github source view. So 3 is better option so far, especially since it it no more work regarding the urls, works in all views, and is no more cumbersome than using a liquid tag, still allows us to use small images normally, and doesn't for all images to fill their contianers.

patrickmalsom commented 9 years ago

I have assigned the issue to you.

I do not have a preference on what the solution is other than keeping the markdown as vanilla as possible. This will be the easiest if there is ever a change in how we distribute these tutorials (thinking pandoc -> pdf manual). I am hoping to get it to work with the following markdown syntax:

![img](/path/to/img.png)

If there is no way to do it we can always just use html tags and deal with it.

mpbelhorn commented 9 years ago

Using custom css sheet to override img tag scaling. All images will be their default size or scaled down to be at most as wide as their bounding container. No special markdown needed.