Using DIV tags to contain images and captions

[lzeleny_0408]

Hello,

I am fairly new to Flare but I am looking to create a very specific DIV tag and I need some advice/help in setting it up from those of you who have more experience. My goal is to create a DIV tag that my team can use to contain an image and a text caption. The text will need to be centered under the image and the DIV frame size only needs to be as wide as the contents (the image sizes will be different). Basically the end result would be an image with text centered underneath.

I am not looking to center everything horizontally on the page.

I wasn't sure if it was possible to have the text aligned relative to the image so a DIV seemed to be the way to go.

Thanks in advance for any and all help/advice.

[LTinker68]

That's fairly simple. Just use the Stylesheet Editor to create a div class and set its text-align attribute to center. Then you can either create a paragraph class that also has text-align set to center, or you could create a complex selector that says any paragraph tags inside the div class should have text-align set to center.

Once you have those two styles (div and paragraph, or div and complex selector) defined, create a snippet. Insert the div with the new class, then insert two paragraphs/paragraph classes inside the DIV. Insert a placeholder image and placeholder text in the paragraphs.

When you want to insert that div/image/paragraph grouping, simply insert the snippet, then convert the snippet to text. That will allow you to switch the image, if desired, and type different text. So the snippet contains your structure of div and paragraphs so you don't have to recreate that structure every time.

[lzeleny_0408]

How do you restrict the width of the DIV so that it is only as large as the image? This is important because the images are different sizes depending on the type of image. The "center" position of the text below the image would change depending on that.

I am not seeing now to restrict the DIVs width based on the content.

Thanks!

[LTinker68]

Oh, I didn't catch that distinction. You said as wide as the contents, so I was including the text.

You'd have to test this, but I think to do that, you'd have to do a div-within-a-div. The innermost div would have its width set to 100% or inherit and would contain your text. The outermost div would have its width set to auto and would contain the image and the innermost div. I'm not entirely sure that would work, though, because the browser calculates what auto is, so they might not treat auto the same. It might size to the image, but I think it's more likely to size to the available width of the window.

If the above doesn't work and your images are a bit consistent (e.g., some are 200px wide, some are 350, some are 400), then you could create several div classes, with each class having a defined width that matches the image width.

[lzeleny_0408]

Much to my dismay I still have not found a way to make this work. At this point, we have multiple different image sizes making it inconvenient to set up different DIV tags for each size. The goal is to have the as few steps as possible for the writer to complete when inserting their images and writing their captions.

I have attached an image of what I have right now with annotations of what I would like to achieve.

Also, here are the items I have set in my stylesheet for the two DIVs:

div.CaptionTxt
text-align: center
border: 1px (just to have the ability to see what the DIV is doing.)
min-width: 1.5 in
max-width: 6.5 in

div.CaptionImg
border: 1px (just to have the ability to see what the DIV is doing.)
min-width: 1.5 in
max-width: 6.5 in
positioning: absolute

What am I missing? Thanks for the help. I am trying to learn Flare and set up standards for our departments transition as I go.

DIV testing help.png

[LTinker68]

Sorry, I can't think of an automated way to do this via CSS. You might be able to do something with JavaScript or PHP or jQuery or some other scripting mechanism that essentially grabs the image's width and changes the div's width on-the-fly to match that width.

I know CSS but not all its bells-and-whistles, so perhaps someone else can think of a way to do this via CSS.

[Nita Beck]

I agree with Lisa. I don't think there's any way for a DIV to be resized automatically based on an image it contains. That's a constraint of CSS.

I haven't tested this, but perhaps you could create a one row, one column table. Have the table's width and the column's width be set to auto. Give the table the border you're looking for, and give it a center alignment (or maybe give the cell a center alignment; not sure which). Then put the image in the table, with a paragraph centered below it for the figure title. I'm sure you could set up the necessary styles in your standard stylesheet or in a table stylesheet. Once you get it all set up, create a snippet with the table with placeholders to use as a "starter." Insert the snippet, convert it to text, and then drop in your image and caption.

I'm suggesting this idea off the top of my head. Let me know if it has any merit!

[lzeleny_0408]

I think this will work beautifully. Upon my initial test of implementing this for our needs, I have seen great results. Thanks to all!