BBCode - Image Resizing in Spoiler Tags [SOLVED]

[Tay]

Hey guys,

As you know, we're big fans of them spoiler tags. Their one downside? No image resizing (well, at least not normally). Does anyone have experience with BBCodes for spoiler tags? Anybody have ideas for how to implement resizing?

Current code:

<div class='bbc_spoiler'>

	<span class='spoiler_title'>Spoiler</span> <input type='button' class='bbc_spoiler_show' value='Show' />

	<div class='bbc_spoiler_wrapper'><div class='bbc_spoiler_content' style="display:none;">{content}</div></div>

</div>

[/code]

[Kendjin]

I'll have a look around, but I think IP boards uses ckeditor for the resizing, so if you open the spoiler tag before the image is loaded, it still applies the resize, the issue is that it loads the image anyway,. but since its not visible ckeditor doesn't resize.

[Tay]

I'll have a look around, but I think IP boards uses ckeditor for the resizing, so if you open the spoiler tag before the image is loaded, it still applies the resize, the issue is that it loads the image anyway,. but since its not visible ckeditor doesn't resize.

Yeah, that's what I keep running into. I'm still super sick, so my brain is a bit fuzzy and I can't quite manage to think this one out on my own. -- I appreciate everyone's help.

[REtransInternational]

Yes, you can resize them... How do you want to resize?

Constraining the content of width is easy, add width:xx to the style for that element. Something like

#bbc_spoiler_content img { width:100%; }

?

[Tay]

Yes, you can resize them... How do you want to resize?

Constraining the content of width is easy, add width:xx to the style for that element. Something like

#bbc_spoiler_content img { width:100%; }

?

Hm. You'll have to help me a little more, especially when I'm this sick. Yes -- we want images to be constrained to the width of the topic post content area.

I don't think the spoiler BBCode has any CSS affiliated with it at the moment. How do I link it to the code you posted above?

[Nayleen]

Don't use width: 100% because it would force any image to 100%, even if they're smaller. Use max-width: 100% instead, it's supported in every relevant browser.

The example above wouldn't work since it's not an ID (and neither should it be anyway). Opening the forum's source reveals the CSS selector for spoiler content, so it should be editable somewhere:

div.bbc_spoiler_content	{ 	 }

Search for that and add the following CSS code in the line following it:

div.bbc_spoiler_content img {max-width: 100%; width: auto}

[Tay]

Don't use width: 100% because it would force any image to 100%, even if they're smaller. Use max-width: 100% instead, it's supported in every relevant browser.

The example above wouldn't work since it's not an ID (and neither should it be anyway). Opening the forum's source reveals the CSS selector for spoiler content, so it should be editable somewhere:

div.bbc_spoiler_content	{      }

Search for that and add the following CSS code in the line following it:

div.bbc_spoiler_content img {max-width: 100%; width: auto}

Yes. That was exactly what I was trying to do. Changes made. Can I get help testing this?

[Tay]

Test

EDIT: Image removed

[Nayleen]

Test:

Boom babeh!

[Tay]

I love you Nayleen. Thank you so much. Let me know your bribe demands!

[Nayleen]

Your love is enough compensation. Doing this for the community.