Padding for images

[kanarb]

Hi Rob -- Folks in the library are having issues with insufficient padding around images. Here's a test page showing the problem:

https://library.ucsc.edu/image-test

One option is to use the 'callout' classes for images but these seem to be a fixed width and don't provide the flexibility people are looking for.

Do you have a suggestion for how to address this?

[knice]

I thought there were alignment classes already in the stylesheet, but there aren't. I'll add alignment classes to the stylesheet so the proper spacing exists when an element is aligned left or right.

[kanarb]

Thanks for looking into this Rob. Do you have an ETA?

[knice]

I just released v3.4.0. Give it a whirl and let me know if this works for you.

[kanarb]

Hi Rob --

Not sure why, but this did not have the desired result. Here's the code and screenshot for a test image: <img alt="test" src="/bryndev/sites/default/files/1.jpg" style="width: 110px; height: 108px; float: left;"></img>

[knice]

You'll need to add the new alignment classes to each image: alignleft and alignright.

[kanarb]

Ah. We're hoping to have this functionality work for folks who don't know html. CKEditor does have a object styles dropdown but it doesn't seem to applying any styles. I'll keep playing with it and see what I can figure out.

[knice]

Oh, OK. What does the editor do if some aligns an image? How does it alter the markup? Does it add an align attribute or anything like that?

[kanarb]

Unfortunately it doesn't do anything at all. Text styles are applied but not image styles. I'm trying to figure out why that is.

On Tue, May 10, 2016 at 11:55 AM, Rob Knight notifications@github.com wrote:

Oh, OK. What does the editor do if some aligns an image? How does it alter the markup? Does it add an align attribute or anything like that?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/knice/ucsc-drupal/issues/43#issuecomment-218255124, or mute the thread https://github.com/notifications/unsubscribe/AFeeDfP4jPXor-_fM27X2pG3INjdDFc6ks5qANSsgaJpZM4ISRVP .

[knice]

That style attribute in your example code above, did you add that or did the editor?

[kanarb]

I got it working. it adds 'left' and 'right' classes. Do you want to add those to the main stylesheet, or should I add them in custom css?

[knice]

I released 3.4.1, which adds those classes to the main stylesheet.

[kanarb]

That did the trick. Thanks for your help Rob.

On Tue, May 10, 2016 at 2:03 PM, Rob Knight notifications@github.com wrote:

I released 3.4.1, which adds those classes to the main stylesheet.

— You are receiving this because you commented. Reply to this email directly or view it on GitHub https://github.com/knice/ucsc-drupal/issues/43#issuecomment-218290838

[kanarb]

Hi Rob --

One more question. I'm not seeing this rule in the new release.

.content img { background-color: #F2F0E4; border-radius: 5px; margin: .15em; padding: .5em; max-width: 100%;

I think we still want this.

[knice]

Hey Bryn,

I just released 3.4.2, which adds some of that rule back in. The background-color and border-radius have been removed permanently from the stylesheet. But the padding is back in there now.

[kanarb]

Thanks Rob.

On Wed, May 11, 2016 at 2:33 PM, Rob Knight notifications@github.com wrote:

Hey Bryn,

I just released 3.4.2 https://github.com/knice/ucsc-drupal/releases/tag/3.4.2, which adds some of that rule back in. The background-color and border-radius have been removed permanently from the stylesheet. But the padding is back in there now.

— You are receiving this because you commented. Reply to this email directly or view it on GitHub https://github.com/knice/ucsc-drupal/issues/43#issuecomment-218597075

[kanarb]

Hi Rob --

We just implemented the latest release of the theme (v3.4.2). We're not seeing the expected padding around images. For example on this page:

https://library.ucsc.edu/giving/university-library-newsletter-issue-27-spring-2016

images have a margin but no padding:

.content img {
    max-width: 100%;
    margin: .2em;
}

We were expecting to see:

padding: .5em;

Hoping you can look into this when you get a chance. Thanks.

[kanarb]

Hey Rob --

I went ahead and added this:

.content img { padding: .5em; }

to our local css. If you add this to the theme, let me know and I'll remove it locally.

[knice]

I just released v3.5.0 to fix this.

The margin was missing for images that have align attributes. I've added that into the styles. It's not the same as padding all images, but it will resolve this issue.

Give it a test and let me know how it works.