Pictures, single sourcing, and div tags

[ChristyPatton]

I am using Flare 4.2. I am in the process of automating absolutely everything so that post-processing goes away.

We output to 3 targets, WebHelp, PDF, Word. We only output to Word for certain contracts so for now, ignore it, except that I use it as my sample. Single sourcing is a MUST.

We have tons of images in our project. For the online version our fearless leader wants them along the left of the screen with text proceeding and following. In other words, no in-line text. For the printed version he spent hours post processing. He caused all the images to be 'square' in the text using Word. In effect, the text was on the left and the pics on the right. (NOT two column) just more like a book. He spent hours moving all the pics.

I know that I can use div tags to place the pics where we want them. I feel overwhelmed. I've attempted to learn and create a div.picblock. For the non-print medium, I have the pic floated to the left but now it is above the paragraph it should be below. How do I get the pic below the paragraph online and to the right of the paragraph in the print version? Am I going to have to have two pictures, one for print and one for online simply because I need to control placement?

Next, I follow the help instructions for starting a div tag by using the Insert>Text Box. Is this what ya'll recommend? I have no text inside these boxes, pictures only.

This is by no means all the questions I have but some of my question might go away if I can get these issues straightened out.

Thank you!

[alaltenburg]

When I use div tags, I created generic classes called .centerAlign, .rightAlign, and .leftAlign. Then also setup a div class.
If you then highlight your image, click the indent button in the top menu and it will come up with an option to "div" so if you click that option, it will put your pic in a div tag. Then you can click F12 and use then generic .leftAlign class to line it up.

[ChristyPatton]

Thank you for your help, it's not doing all that I need but it is a start. For starters, it put the pic with the text below and I need it with the text preceeding. Any ideas on how to get it to go up not down?

Your poceedure is oposite mine, BTW. I tried inserting the text box first then putting the image inside it.

[alaltenburg]

What happens when you take out the text box, and just put the image in a <div class="leftAlign">
You could possibly try right clicking on the div block on the left side of the screen and tell it to move up?

Andrea

[ChristyPatton]

The previously posted image is the result of doing it my way. Your way worked just the oposite. The pic is correct but the text box is centered even though I have it floated to the right.

I tried your procedure. I'm confused by what you mean take out the text box. I didn't even click on Insert>Text Box. I started with a pic, clicked the indent and the tool opened for adding a div.picblock tag. (I created) If I click F12 I get a screen that only adds a second div tag so I just used the one I created. don't have div.leftalign. I have to create a class, which I did and called it div.picblock.

I moved the code so at least the pic is with the correct paragraph. Not sure I want to do that for all the images I have to work with. Too much opportunity to mess things up.

[ChristyPatton]

ps, any borders shown are just for me. I want to see where any boxes are layed in and will remove them when the problem is solved.

[alaltenburg]

Can you post the xml code you have for the pic?

[ChristyPatton]

I just undid everything including deleting all the made up tags so I can start fresh. It was either do that or inflict bodily harm on a co-worker. I have been at this for 5 hours and I am that frustrated.

Here goes.
Before:

Code: Select all

<p>The computers comprising the bulk of VITAL X hardware boast the latest in Central Processing Units (CPU), <MadCap:keyword term="Graphics Processing Unit" />Graphics Processing Units (GPU) and motherboard technology. <MadCap:variable name="ALLMyVariables.CompanyName" /> system engineers choose equipment and create designs to better support future upgrades, enhance system reliability and promote interoperability.</p>
        <p class="figure">
            <img src="../../Resources/Images/VXVCCFront.jpg" MadCap:mediastyle="@media print { height: auto;width: 3.5in; }" />
        </p>
	<p>The user interfaces with VITAL X primarily through the <MadCap:keyword term="Visual Control Computer" /><strong>Visual Control Computer</strong> (<MadCap:keyword term="VCC" />VCC). VITAL X uses standard <MadCap:snippetText src="../../Resources/Snippets/ALLMS Windows.flsnp" /> network protocols, with the VCC acting as the server. Depending on the configuration of your system, the VCC may contain the visual database on a RAID storage system incorporating several hard drives with multi-terabyte (TB) storage capability.</p>
        
        <p class="figure">
            <img src="../../Resources/Images/VXVCCBack.jpg" />
        </p>

I clicked on a picture. I clicked indent item. I clicked div.

error.jpg

Mid-way:

Code: Select all

<p>The computers comprising the bulk of VITAL X hardware boast the latest in Central Processing Units (CPU), <MadCap:keyword term="Graphics Processing Unit" />Graphics Processing Units (GPU) and motherboard technology. <MadCap:variable name="ALLMyVariables.CompanyName" /> system engineers choose equipment and create designs to better support future upgrades, enhance system reliability and promote interoperability.</p>
        <div>
            <p class="figure">
                <img src="../../Resources/Images/VXVCCFront.jpg" MadCap:mediastyle="@media print { height: auto;width: 3.5in; }" />
            </p>
        </div>

click div tag and create style class, alignright. Edit style class. Box-float: right Save.

offpage.jpg

Now the code is the same because it is my css controlling placement. the image is tagged with p.figure which does not have a float. It has a block-text-align: center;. WOW, I just moved the center to default and it solved one of the two problems. This picture is on the right side.

I guess I have to manually move it to the paragraph it should go with. Do you think so? (Sometimes wiping the slate clean and starting over is a good thing.)

[ChristyPatton]

This is closer than before. I can't get it to let me resize the pic, needs to be smaller. And I have to manually move the code so the pic is with the correct paragraph but maybe this will work. I will still have issues with the single sourcing though.

new.jpg

[alaltenburg]

If you know the width of the picture, then try include that in the div. I would also recommend making a generic .leftAlign class. So then your div would look like this.

<div style="width: 999px;" class=".leftAlign">

See if that does anything. I have some pictures that are left align right off the page until I gave it a width limit. (If the code does not show a width, you can find it by clicking on the image. Move it in a bit then move it back out. Then the code will show up. No idea why that is.)

[ChristyPatton]

I cannot set a size for the div tag because all my pics have different sizes. However, I found conflicting size controls on the pic so I'm hoping that takes care of that.

and it didn't. I'm at least relieved my pic is in the correct spot.

[alaltenburg]

I have the same issue where all my div tags have to be different sizes. That is something you would have to go through manually and fix if it is a problem.

As far as having your pic in a different spot for print vs online, I am not sure if that is possible. The only suggestion I can come up with is to place the image in both places, and then assign a condition to be either print only or online only. Not the best, but it could work?

Andrea

[ChristyPatton]

If I can get my pics to lay properly for the print version, condition tags will be the way to have to go. Text Wrapping is what I am trying to imitate. I can't wait until Flare has a feature that works similarly...that works being the optimum word.

[LTinker68]

You can kind of do that by having the float properly in place on the DIV for online output (default medium) and having no float property on the DIV for print output (print medium), but the placement of the div becomes a bit more problematic in some situations.

BTW, Word doesn't recognize or treat DIVs correctly, so what may work in online and PDF won't necessarily (or probably) work in Word output.

Also, I don't recommend using the non-print medium. Use default for online output.

[ChristyPatton]

yeah, we use the default for the online version. and we plan to go directly to PDF for the print version. I knew the div tags didn't work in Word. The issue is having to place the div tags before a paragraph to get it in the following paragraph but it needs to follow the paragraph in the online version. That's why the condition tags may be necessary.

I have a quick job to do and then I will spend the rest of the day playing with it. I promise to not strike with my venom bearing fangs like I did yesterday with my frustration.