Git Product home page Git Product logo

Comments (9)

pieper avatar pieper commented on May 28, 2024

This link looks better - the image is now cropped though, and it would be better to preserve the aspect ratio by only setting the height.

from slicerappstore.

zachmullen avatar zachmullen commented on May 28, 2024

That is something we could do, but I think we want each screenshot to take up the same size rectangle (180x180) so that if you have several, the thumbnails make a nice grid.

We could maintain the aspect ratio and still fit them into the grid if we use a padding approach rather than a cropping approach, but it might make for thumbnails that don't convey information very well in the case of very large aspect ratio images.

from slicerappstore.

zachmullen avatar zachmullen commented on May 28, 2024

Or are you talking about the actual full size image that appears when you click the thumbnail? If so, there is an open issue to fix that problem which I am currently working on :)

from slicerappstore.

pieper avatar pieper commented on May 28, 2024

If you want the grid to line up, I believe you could just set the width and then the hight would be padded automatically without distortion.

from slicerappstore.

zachmullen avatar zachmullen commented on May 28, 2024

If you fix the height, the aspect ratio will be preserved by making the width change. If you fix both the width and height, the browser unfortunately is not smart enough to pad by default, it just does a naive resample and distorts the image. So either way we would have to use a library like this, it's just a question of whether we prefer to crop or pad. I personally prefer the crop because it actually uses the entire alotted space, but if more users prefer to pad I will happily change it.

from slicerappstore.

pieper avatar pieper commented on May 28, 2024

did you try just fixing the width? I do prefer pad to crop.

On Mon, Apr 1, 2013 at 2:03 PM, Zach Mullen [email protected]:

If you fix the height, the aspect ratio will be preserved by making the
width change. If you fix both the width and height, the browser
unfortunately is not smart enough to pad by default, it just does a naive
resample and distorts the image. So either way we would have to use a
library like this, it's just a question of whether we prefer to crop or
pad. I personally prefer the crop because it actually uses the entire
alotted space, but if more users prefer to pad I will happily change it.


Reply to this email directly or view it on GitHubhttps://github.com//issues/45#issuecomment-15727596
.

from slicerappstore.

zachmullen avatar zachmullen commented on May 28, 2024

I've switched to using a pad instead of a crop, here's an example of how it looks with a wide image:

http://slicer.kitware.com/midas3/slicerappstore/extension/view?extensionId=15620&layout=empty

and with a tall image:

http://slicer.kitware.com/midas3/slicerappstore/extension/view?extensionId=15625&layout=empty

Do you like it this way or should I revert it?

from slicerappstore.

pieper avatar pieper commented on May 28, 2024

Love the padded version!

On Mon, Apr 1, 2013 at 2:26 PM, Zach Mullen [email protected]:

I've switched to using a pad instead of a crop, here's an example of how
it looks with a wide image:

http://slicer.kitware.com/midas3/slicerappstore/extension/view?extensionId=15620&layout=empty

and with a tall image:

http://slicer.kitware.com/midas3/slicerappstore/extension/view?extensionId=15625&layout=empty

Do you like it this way or should I revert it?


Reply to this email directly or view it on GitHubhttps://github.com//issues/45#issuecomment-15728919
.

from slicerappstore.

jcfr avatar jcfr commented on May 28, 2024

👍

from slicerappstore.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.