IMG style: screenshot vs thumbnail sizing

[jsandora]

Hoping someone can help me identify the err of my ways on this one; I'm stuck.

My webhelp projects are loaded with screenshots of our applications. I went with a thumbnail version of the screenshots that open to a larger size when clicked - much like the way Flare's webhelp handles larger images.

So my root question is: Can I control the size of the actual screenshot within the IMG style?

I've created a new style class (img.screenshot) that I want to apply to all the larger images I'm using. This class is set up to show a thumbnail and expand when clicked.

My problem is that these screenshots are too big when they expand. I was hoping there's a way to set a max width, but it seems that "max-width" attribute for the style gets applied to the thumbnail, not the actual screenshot. I tried several different settings for max-width, but nothing changed on the expanded screenshot. However, when I turned the thumbnail off for the style (mc-thumbnail = none), THEN the image respects the max-width settings.

So, is there a way to control the expanded screenshot size with my img.screenshot style class? Or do I need to manually edit the size of each screenshot in Capture? I have tons, so hoping to avoid this!

Thanks, and apologies if I'm missing a simple setting/process somewhere ...

[jasonsmith]

I'm afraid I'm stumped, neither mc-popup-width nor max-width seem to have any effect. In HTML5 output the image scales to fill the frame. Maybe you could batch transform your images using a tool like IrFanView?

[DocuWil]

What in my situation works excellent:
Go to Edit Image and Size.
Set Maximum Size:
In my case I used to set the Width. All other values are set to default.

In the tab Thumbnail I use Mouse Over with often the setting Max Height to 96 px.

I hope it helps for you too.

[jsandora]

What in my situation works excellent:
Go to Edit Image and Size.
Set Maximum Size:
In my case I used to set the Width. All other values are set to default.
In the tab Thumbnail I use Mouse Over with often the setting Max Height to 96 px.

While this works, it requires manually adjusting the settings for EACH screenshot. I'm looking for a way to adjust an IMG style/class so these settings are automatically applied to ALL screenshots at once.

Now that I'm using Capture, I can use a profile to control the size of new images. The downside to this is that it has to be done for each new image (still a manual process), I think it only uses absolute size (not relative, like a percentage of a container), AND I'll still have to retroactively apply the profile to existing images.

This whole scenario stems from my switching the icons used for drop-down text in WebHelp to the plus/minus seen in Flare's HTML5 WebHelp system. Those look much better than the standard arrow ones.

However, I found that, for some reason, those icons are controlled by the IMG tag in the stylesheet. Since I have padding/margins applied to my base IMG tag (which I use for screenshots since I didn't know any better when setting up my global stylesheet project that all my other Flare projects link to), that padding gets applied to the drop-down images and they don't line up in my output.

So I created a class of the IMG tag (img.screenshot) to handle my screenshots so I can leave the IMG tag alone so the drop-down icons line up properly. Yes, I'll have to apply that new style to all my existing images, but I don't think there's any other way around that manual task. And at least I have a solution going forward.

But the NEXT hangup I hit is the sizing of NEW screenshots, and how they don't respect the max-width property of the img.screenshot style when a thumbnail is applied! Sure, I can use Capture profiles to change the size, but I really like the max-width property since it's relative sizing, not absolute like Capture.

Sad panda.

Sorry for the long-winded post. Sounds like I may be hoping for too much here, and may be stuck with a couple manual processes (applying img.screenshot style to existing images, PLUS applying Capture profile to each new screenshot).

Anyone got a suggestion? Bueller?

[NorthEast]

This whole scenario stems from my switching the icons used for drop-down text in WebHelp to the plus/minus seen in Flare's HTML5 WebHelp system. Those look much better than the standard arrow ones.

However, I found that, for some reason, those icons are controlled by the IMG tag in the stylesheet. Since I have padding/margins applied to my base IMG tag (which I use for screenshots since I didn't know any better when setting up my global stylesheet project that all my other Flare projects link to), that padding gets applied to the drop-down images and they don't line up in my output.

If you set a property for the img tag, then it'll be inherited by all images.

For WebHelp, images used in dropdowns have the MCDropDownIcon class.

So if you have padding applied to the base img tag, then you'd need to remove it from the dropdown images - e.g. img.MCDropDownIcon { padding: 0; }

Tip: To find out the output style names, you can 'inspect' topics using developer tools in IE or Chrome (press F12), or use the Firebug add-on for Firefox.

[jsandora]

For WebHelp, images used in dropdowns have the MCDropDownIcon class.

So if you have padding applied to the base img tag, then you'd need to remove it from the dropdown images - e.g. img.MCDropDownIcon { padding: 0; }

The .MCDropDownIcon class doesn't seem to appear anywhere in the global stylesheet I created for my projects, though. Looks like it lives in the MadCap.css file, but I'm not sure how to edit that (besides manually in Notepad or something)?

EDIT: Also, when I open MadCap.css in Notepad, the .MCDropDownIcon class doesn't list any attributes besides "border."

[NorthEast]

The .MCDropDownIcon class doesn't seem to appear anywhere in the global stylesheet I created for my projects, though. Looks like it lives in the MadCap.css file, but I'm not sure how to edit that (besides manually in Notepad or something)?

EDIT: Also, when I open MadCap.css in Notepad, the .MCDropDownIcon class doesn't list any attributes besides "border."

You don't add it to MadCap.css - you can't edit that anyway, as it's generated by Flare

Add the CSS to your stylesheet, copy and paste:

Code: Select all

img.MCDropDownIcon { padding: 0; }

[jsandora]

Add the CSS to your stylesheet, copy and paste:

Code: Select all

img.MCDropDownIcon { padding: 0; }

BOOM. That did the trick! Added the .MCDropDownIcon class to my stylesheet, and can adjust the icon separately from the img tag. Thanks Dave.

Now: Any thoughts on how to get screenshots to abide the max-width attribute when mc-thumbnail is set to popup/hover?