Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

What is the recommended way of changing the thumbnail size as displayed onscreen by Fresco?

edited June 2014 in Fresco
I understand how to make my own thumbnails. No problem there.

What I'd like to do, though, is display them at a larger size. Currently they're displaying a lot smaller than even the Fresco demo (currently displaying at 69 x 39 even though I'm viewing in a large window on Chrome/Mac OS X).

I did not see any options in the docs for adjusting the size of thumbnail images. What is the recommended approach for this? Is there a method for this that I am overlooking?


  • edited June 2014
    Thumbnails don't have a fixed size, they scale to the window size. If they appear small your window doesn't have that much height to work with.
  • Ok, but why on your demo are they larger?
  • edited June 2014
    Only window size affects that, resize the browser window to see it.
  • edited June 2014
    Sorry for the delay, @Nick. The notifications went to my spam folder. Thanks for the reply.

    I am with @Manfield on this one. With your demo and my implementation in the same viewport size the thumbs on your demo are significantly larger. So I don't think viewport size explains everything, though I do understand thumb size will be affected.

    Do you have any tips on where to go to tackle Fresco's sizing of thumbnails? Any pointers would be much appreciated.
  • Nothing is done on the Fresco website to make thumbnails larger, so perhaps there's something on your ends that's making them smaller.
  • edited June 2014
    OK, thanks. Using latest Chrome and Mavericks. Odd.

    That aside, do you have any tips for modifying the logic Fresco is using for sizing and positioning the thumbnails? I'd like to make them larger and could start hacking away, but if you pointed me to a place to get started I'd appreciate it.

    Thanks for your time
  • edited June 2014
    height is set on .fr-thumbnails in fresco.css, that percentage should work the same way no matter what browser you use.
  • edited June 2014
    I adjusted the height of .fr-thumbnails, increasing the percentage. That element definitely got larger but the thumbnails did not.

    I had assumed thubmnail size was being set with javascript because the size I observed on was set with a "style" attribute (screenshot attached).

  • edited June 2014
    It's set with javascript but based on the percentage set in css.

    Make sure that nothing on your page modifies elements globally, like global css definitions. Global definitions that modify elements like div or img are a bad practice since they modify everything, even third party code. Write css rules that target your elements better to fix that.
  • edited June 2014
    Finally tacked this down. It was indeed a global CSS definition as you suspected.

    I'm using box-sizing: border-box in my CSS. Switching back to box-sizing: content-box for all Fresco content fixed the issue and thumbnails are appearing at the expected size now.

    In case it helps anyone else here is the CSS that did the trick for me. * {
    box-sizing: content-box;

    Thanks for the help!
  • edited June 2014
    Thanks, I've added a fix in 1.4.10, it should take care of these conflicts with global box-sizing overwrites.
Sign In or Register to comment.