Can I do this in a snippet?

This forum is for Single-Sourcing your Flare content to multiple outputs.

Can I do this in a snippet?

Postby chuck_agari on Tue Jul 24, 2018 11:40 am

Specifically, a snippet that I convert to text upon adding it to a document.

<figure>
<img src="" />
<figcaption<MadCap:conditionalText MadCap:conditions="Default.PrintOnly"> MadCap:autonum="Figure&#160;1.1:&#160;"</MadCap:conditionalText>>&#160;</figcaption>
</figure>
chuck_agari
Propeller Head
 
Posts: 80
Joined: Wed May 30, 2018 2:40 pm

Re: Can I do this in a snippet?

Postby chuck_agari on Tue Jul 24, 2018 11:46 am

I don't think I can. I get a message about invalid XML when I try to save.

Would this work?

<figure>
<img src="" />
<MadCap:conditionalText MadCap:conditions="Default.PrintOnly"> MadCap:autonum="Figure&#160;1.1:&#160;"</MadCap:conditionalText><figcaption>&#160;</figcaption>
</figure>
chuck_agari
Propeller Head
 
Posts: 80
Joined: Wed May 30, 2018 2:40 pm

Re: Can I do this in a snippet?

Postby Nita Beck on Tue Jul 24, 2018 1:01 pm

I think that Flare doesn't recognize <figure>.

But you could have snippet that is a div within which are a paragraph block containing the image followed by a paragraph block that offers the figure title with an autonumber, conditioned for print only. So, like this:

Code: Select all
<div class="Figure">
   <p class="Figure">
      <img src="your-image-here-png" />
   </p>
   <p class="FigureTitle" MadCap:conditions="YourConditions.PrintOnly">Your figure title here</p>
</div>


The div.Figure class can be set to avoid a page break inside.
The p.Figure class can do things like center the image, if that's what you'd like.
The p.FigureTitle class will set the autonumber. (Sorry, my example doesn't show that above.) BTW, you can set the PrintOnly condition directly in the pFigureTitle class so that you don't have to apply the condition to each and every figure title in your content.

The snippet that I have for this exact use case includes a placeholder image that can then easily be swapped out for the real deal.
Nita
Image
Content Strategist / Information Architect / Flare Consultant: http://beck-communications.com
Manager, Rochester Flare User Group: http://www.facebook.com/RochesterFlareUserGroup
Nita Beck
Senior Propellus Maximus
 
Posts: 3023
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Can I do this in a snippet?

Postby chuck_agari on Tue Jul 24, 2018 1:25 pm

Nita Beck wrote:I think that Flare doesn't recognize <figure>.

But you could have snippet that is a div within which are a paragraph block containing the image followed by a paragraph block that offers the figure title with an autonumber, conditioned for print only. So, like this:

Code: Select all
<div class="Figure">
   <p class="Figure">
      <img src="your-image-here-png" />
   </p>
   <p class="FigureTitle" MadCap:conditions="YourConditions.PrintOnly">Your figure title here</p>
</div>


The div.Figure class can be set to avoid a page break inside.
The p.Figure class can do things like center the image, if that's what you'd like.
The p.FigureTitle class will set the autonumber. (Sorry, my example doesn't show that above.) BTW, you can set the PrintOnly condition directly in the pFigureTitle class so that you don't have to apply the condition to each and every figure title in your content.

The snippet that I have for this exact use case includes a placeholder image that can then easily be swapped out for the real deal.


Yabbut....

Flare doesn't not recognize figure (and figcaption) elements. In fact, when I add a figcaption element to a figure element, Flare adds autonumbering automatically, even if I specifically delete it from the code. In my original snippet, I didn't have any condition code, and when I convert it to text after I add it, it works out fine (at least, if I'm in an "unoccupied" block-level element).

But I prefer semantic elements. Div soup (and span salad) make code a mess, and I try to avoid it whenever I can.

I may come back to this if I can't figure out anything else.

But I wonder if I could do something in the CSS with a figcaption.MadCap.autonum selector, maybe with display: none; in the @media print section........
chuck_agari
Propeller Head
 
Posts: 80
Joined: Wed May 30, 2018 2:40 pm

Re: Can I do this in a snippet?

Postby Nita Beck on Tue Jul 24, 2018 1:55 pm

Flare's not gonna understand your semantic elements. (I just had a convo about this yesterday with someone I consider uber-Flare-knowledgeable, so feel like I have it on good authority.) But you can do stuff with CSS to emulate those elements.
Nita
Image
Content Strategist / Information Architect / Flare Consultant: http://beck-communications.com
Manager, Rochester Flare User Group: http://www.facebook.com/RochesterFlareUserGroup
Nita Beck
Senior Propellus Maximus
 
Posts: 3023
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Can I do this in a snippet?

Postby Dave Lee on Wed Jul 25, 2018 12:31 am

Just to be clear, figure and figcaption are valid HTML tags, and they can be used in Flare.
You just can't insert these figure tags using the Flare interface, so would enter them in the text editor.

Nita Beck wrote:Flare's not gonna understand your semantic elements. (I just had a convo about this yesterday with someone I consider uber-Flare-knowledgeable, so feel like I have it on good authority.) But you can do stuff with CSS to emulate those elements.

It's not going to understand elements that you just make up yourself, e.g. a h7 tag, but figure and figcaption are valid HTML(5) tags.

Your first example doesn't work because:
- The figcaption tag isn't closed <figcaption<.
- To add conditions to a tag, you'd include these as properties of that tag, rather than by inserting a <MadCap:conditionalText tag inside the tag.
- MadCap's Autonumber properties need to be set in the CSS, not HTML. Flare will generate them in HTML at build time.
Code: Select all
<figcaption<MadCap:conditionalText MadCap:conditions="Default.PrintOnly"> MadCap:autonum="Figure&#160;1.1:&#160;"</MadCap:conditionalText>>&#160;</figcaption>


So, to make your code valid it would look like this:
Code: Select all
<figure>
   <img src="" />
   <figcaption MadCap:conditions="Default.PrintOnly"></figcaption>
</figure>


And the autonumber format is set in the CSS:
Code: Select all
figcaption
{
   mc-auto-number-format: 'Figure {n}';
}


Alternatively, you can remove the conditions from the figcaption tag altogether, and just use the autonumber for the print media:
Code: Select all
@media print
{
   figcaption
   {
      mc-auto-number-format: 'Figure {n}';
   }
}
Dave Lee
Master Propellus Maximus
 
Posts: 5307
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Can I do this in a snippet?

Postby chuck_agari on Mon Jul 30, 2018 3:07 pm

Nice. Thanks. That should work nicely.
chuck_agari
Propeller Head
 
Posts: 80
Joined: Wed May 30, 2018 2:40 pm


Return to Single-Sourcing

Who is online

Users browsing this forum: No registered users and 1 guest