Somes images have <p><img> others just have <p>

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
lise
Propeller Head
Posts: 35
Joined: Tue Mar 24, 2015 12:45 pm

Somes images have <p><img> others just have <p>

Post by lise »

Hi there,

I'm not quite sure what to make of this.

Some of my images are contained in <p> and <img> tags as per the blocks, while others are simply within a <p> without the <img> tag. I should note that in this case all images are within a drop-down, and then again within a 2nd drop-down if that makes a difference.

The code for all images is the same:

Code: Select all

<p>
<img src="../../Resources/Images/imagename.jpg" class="Thumbnail" />
</p>
The thing is that when the <img> style isn't displayed in the block I can't assign the Thumbnail class to have the image pop-out. I inserted it manually in the code, but I get odd behaviour when I preview in Chrome: the image pops out but at the top of the page rather than just above the thumbnail.

Does anyone know why the <img> tag isn't being displayed in the blocks and how I could force it?
You do not have the required permissions to view the files attached to this post.
devans
Sr. Propeller Head
Posts: 108
Joined: Thu Sep 09, 2010 9:56 pm
Location: Sydney Australia

Re: Somes images have <p><img> others just have <p>

Post by devans »

I don't know the answer but could it be that some images are not in a format recognised by Flare, e.g. some images are not jpegs? Are the images that aren't tagged as images in a different folder within Flare?
NorthEast
Master Propellus Maximus
Posts: 6426
Joined: Mon Mar 05, 2007 8:33 am

Re: Somes images have <p><img> others just have <p>

Post by NorthEast »

The img tag is probably displayed at the top of the page, rather than the left.

It'll be displayed like that if the img tag is 'inline' within some paragraph text, i.e. there are characters between the opening p tag and the img tag.
ChoccieMuffin
Senior Propellus Maximus
Posts: 2650
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Somes images have <p><img> others just have <p>

Post by ChoccieMuffin »

How was your document created? Was it an import or created in Flare? And when you said "I inserted it manually", what did you insert, and how? I'm guessing that you went into the Text Editor tab and added <p> before the image and </p> after the image, in which case I don't know why things are working, but it could be that you did something else.

It might be helpful to look at the code behind your page in the bit that isn't working properly, to help identify what's going on.
Started as a newbie with Flare 6.1, now using Flare 2024r2.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
lise
Propeller Head
Posts: 35
Joined: Tue Mar 24, 2015 12:45 pm

Re: Somes images have <p><img> others just have <p>

Post by lise »

Thanks to all for the replies. Now that I know the img tag is at the top I can always click there to modify the style. At this point I'm am just more curious than anything else. I'm still new to Flare and whenever I see inconsistencies like this I always assume I did something wrong and am eager to learn what that was.
Dave Lee wrote:The img tag is probably displayed at the top of the page, rather than the left.

It'll be displayed like that if the img tag is 'inline' within some paragraph text, i.e. there are characters between the opening p tag and the img tag.
Dave, you are correct. The img tag is indeed at the top. It is also at the top for all of them, though, including the ones that display the tag on the left. Oddly enough, there are spaces between the <p> and <img> tags in the code in all cases. I've posted the code for that page below.
devans wrote:I don't know the answer but could it be that some images are not in a format recognised by Flare, e.g. some images are not jpegs? Are the images that aren't tagged as images in a different folder within Flare?
Devans, good point. In this case they are all jpgs and they are all in the same folder.
ChoccieMuffin wrote:How was your document created? Was it an import or created in Flare? And when you said "I inserted it manually", what did you insert, and how? I'm guessing that you went into the Text Editor tab and added <p> before the image and </p> after the image, in which case I don't know why things are working, but it could be that you did something else.

It might be helpful to look at the code behind your page in the bit that isn't working properly, to help identify what's going on.
ChoccieMuffin I think this was created via import from Doc-To-Help, but I tried so many different things in March when I first got Flare that I can't be sure. I've pasted the code into Textpad and added comments at the bottom of each image in the page indicating where the <img> tag is displayed. I think only the first two instances display the tag on the left.

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" xml:lang="en-us" MadCap:lastBlockDepth="6" MadCap:lastHeight="2692" MadCap:lastWidth="584">
    <head><title></title>
    </head>
    <body>
        <h1>Title</h1>
        <p>some text.</p>
        <p>more text</p>
        <MadCap:dropDown MadCap:conditions="General.Online">
            <MadCap:dropDownHead>
                <MadCap:dropDownHotspot>Example</MadCap:dropDownHotspot>
            </MadCap:dropDownHead>
            <MadCap:dropDownBody>
                <p>A school board creates a system for all of its schools.  </p>
                <p>Each school’s playback... more text</p>
                <p>
                    <img src="../../Resources/Images/billboard/Example billboard system.jpg" class="Thumbnail" />
                </p>
<!-- this image above has the img tag on the left and the top -->
                <p>more text with a list that follows:</p>
                <ol>
                    <li>list item 1</li>
                    <li>list item 2</li>
                </ol>
                <p>
                    <img src="../../Resources/Images/billboard/Example billboard system_1.jpg" class="Thumbnail" />
                </p>
<!-- this image above has the img tag on the left and the top -->
                <MadCap:dropDown>
                    <MadCap:dropDownHead>
                        <MadCap:dropDownHotspot>How does the Administrator limit the kinds of messages a member can create?</MadCap:dropDownHotspot>
                    </MadCap:dropDownHead>
                    <MadCap:dropDownBody>
                        <p>some text</p>
                        <p> <img src="../../Resources/Images/billboard/Example billboard system_2.jpg" class="Thumbnail" /></p>
                        <p>more text.</p>
<!-- this image above has the img tag on the top only -->
                        <p>
                            <img src="../../Resources/Images/billboard/Example billboard system_3.jpg" class="Thumbnail" />
                        </p>
<!-- this image above has the img tag on the top only -->
                        <p>more text</p>
                    </MadCap:dropDownBody>
                </MadCap:dropDown>
                <MadCap:dropDown>
                    <MadCap:dropDownHead>
                        <MadCap:dropDownHotspot>drop-down title</MadCap:dropDownHotspot>
                    </MadCap:dropDownHead>
                    <MadCap:dropDownBody>
                        <p>some text </p>
                    </MadCap:dropDownBody>
                </MadCap:dropDown>
                <MadCap:dropDown>
                    <MadCap:dropDownHead>
                        <MadCap:dropDownHotspot>Where do the messages play?</MadCap:dropDownHotspot>
                    </MadCap:dropDownHead>
                    <MadCap:dropDownBody>
                        <p>Content created by the school displays exclusively on the school playback. Only the school board can create system-wide content (which they may do to announce bus cancelations or Parent Teacher days).  </p>
                    </MadCap:dropDownBody>
                </MadCap:dropDown>
                <MadCap:dropDown>
                    <MadCap:dropDownHead>
                        <MadCap:dropDownHotspot>drop-down title</MadCap:dropDownHotspot>
                    </MadCap:dropDownHead>
                    <MadCap:dropDownBody>
                        <p>some text</p>
                        <p>more text.</p>
                        <p>
                            <img src="../../Resources/Images/billboard/Example billboard system_4.jpg" class="Thumbnail" />
                        </p>
<!-- this image above has the img tag on the top only -->
                        <p>Julie is also granted access to specific templates. </p>
                        <p>
                            <img src="../../Resources/Images/billboard/Example billboard system_5.jpg" class="Thumbnail" />
                        </p>
<!-- this image above has the img tag on the top only -->
                        <p>When Julie creates a message she selects where it should be displayed. This option is available when the message's template includes the location ('keywords') field.</p>
                        <p>
                            <img src="../../Resources/Images/billboard/Example billboard system_6.jpg" class="large" />
                        </p>
<!-- this image above has the img tag on the top only -->
                        <p>Jsome text.</p>
                    </MadCap:dropDownBody>
                </MadCap:dropDown>
            </MadCap:dropDownBody>
        </MadCap:dropDown>
    </body>
</html>
Gary Taylor
Propeller Head
Posts: 13
Joined: Tue May 14, 2013 9:08 am

Re: Somes images have <p><img> others just have <p>

Post by Gary Taylor »

Hi

I'm not sure if this is relevant, but the outer drop-down has a condition of "General.Online":

<MadCap:dropDown MadCap:conditions="General.Online">

that the embedded drop-downs don't have.

Regards,
Gary
lise
Propeller Head
Posts: 35
Joined: Tue Mar 24, 2015 12:45 pm

Re: Somes images have <p><img> others just have <p>

Post by lise »

Gary, thanks for that. I'm not at my computer for a few days but I will definitely look at that and report back.
Gary Taylor
Propeller Head
Posts: 13
Joined: Tue May 14, 2013 9:08 am

Re: Somes images have <p><img> others just have <p>

Post by Gary Taylor »

Another possible factor:

I think that if you have "<p><img>...............</img></p>" in your XHTML, the formatting of the <p> tag cascades down to the <img> tag.
For example, if the <p> style has "horizontal alignment" set to "right", your image would be right-justified.
Just a thought.

Gary
Post Reply