Need better default for adding whitespace around images

CenterForOpenScience / osc

Open Science Collaboration Blog

http://osc.centerforopenscience.org

8 stars 13 forks source link

Need better default for adding whitespace around images #10

Open frankfarach opened 11 years ago

frankfarach commented 11 years ago

I added 20px of right padding to the img element in screen.css to get some space next to Denny's picture like this:

This is not ideal because it will affect all images on the site, some of which may not be aligned left like this one was. What would be a better solution?

codersquid commented 11 years ago

I don't know what would be a solution for the general case, but I wanted to mention that we could handle author images/avatars placement differently. We could change the layout of the article template.

For the curious, here's how authors are handled currently

Maybe we could have something like a css class for avatars, then have a check for an avatar in the template. Someone with more front-end experience than I have could decide the best way to do that. I might be encouraging sloppy code.

octern commented 11 years ago

Perhaps we should think about any other changes / additions we might want to make to the template, and then decide the best way to do them all.

In the future we'd like to support multi-author posts, so that should possibly be a consideration when it comes to automating handling of photos and attribution.

shaunagm commented 11 years ago

Suggested fix:

use @codersquid's solution of making a css class for author avatars that includes 20px padding to the right and down (but not top and left)
make sure to un-pad the regular image class
go through old posts and make sure author avatar images have the new class specified

re: multi-author posts: we have one already (http://osc.centerforopenscience.org/2013/10/16/thriving-au-naturel-amid-science-on-steroids/) -- it looks okay to me, though not ideal.