Forum

Thread tagged as: Question, Field-Types

How do I combine a dateline and a story into the same paragraph without a linebr...

I need to have a type="text" element that is the date line (the story location of origin, ie 'New York') followed by a type="textarea" of the story itself. I currently have this but the split between the two templates causes a line break. Is there a was to concatenate these onto the same top line of the paragraph?

I attempted this with type="composite" but it doesn't work (and I think it is limited to a single line).

Thank you.
kyle cadotte

kyle cadotte 0 points

  • 3 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

3 years ago

Do they need to be the same paragraph semantically, or just with no visual line break?
kyle cadotte

kyle cadotte 0 points

3 years ago

Just visually in line. In the css I have the dateline text and the paragraphed text positioned inline, so the first line of the paragraph text is shifted right to allow for the length of the dateline. I want Perch to replace the actual text in each but not create a line break between them. SO the question is: can two perch fields by placed inline like this?

An alternative would be to place both in one textarea field and style the dateline there, but I don't see a way to designate and style typography in the default editor. I also don't want to leave this to the person editing the page.
John Rose

John Rose 6 points

3 years ago

Something like this seems to work:

<div>
    <span class="dateline"><perch:content id="dateline" type="smarttext" label="Insert dateline location here" /></span>: 
        <div class="datelined"><perch:content id="content" type="textarea" label="Content of article" markdown="true" editor="markitup" />
        </div>
</div>

The CSS:

div.datelined   {
    display: inline;
}

.datelined p:first-child {
    color: red;
    display: inline;
}

.dateline   {
    color: green;
}

I don't know if this is a hack or not. It works in Firefox. I put classes on the elements and colors on the classes so you can see the individual results. This would also permit you to style the typography separately.

I'm using MarkItUp, so that may give a different result than what you call the default editor.

A little whiile after I wrote the above, I realized that the first time your editor puts, say, a headline tag on the first textblock line, the desired layout falls apart.

The following is less elegant, requiring three editable areas, but more foolproof. Also, no special CSS should be needed. The classes are available for your typography styling. Curious to know of other and better solutions.

<p><span class="dateline"><perch:content id="dateline_p" type="text" label="Insert dateline location here" /></span>: <span class="datelined"><perch:content id="content_p" type="text" label="The first paragraph of the article" /></span></p>
    <div class="datelined"><perch:content id="content_continue" type="textarea" label="The article continues" markdown="true" editor="markitup" />
    </div>
kyle cadotte

kyle cadotte 0 points

3 years ago

I managed to make it work using your 'display: inline;' suggestions by placing the dateline and the body text within a sub-container "bodytextcont":

<div class="featuredtext"><h1><perch:content id="feathead" type="text" label="Featured Headline" required="true" /></h1></br><div class="subheadrule"></div><h4><perch:content id="featsubhead" type="text" label="Featured Subhead" help="Add subhead if available" /></h4><div class="bodytextcont"><span class="dateline"><perch:content id="featdateline" type="smarttext" label="Featured Dateline" required="true" help="Enter story origin location" html="true" /></span><div class="bodytext"><p2><perch:content id="featcontent" type="textarea" label="Featured Content" required="true" help="Type in story text here" markdown="true" editor="markitup" /></p2></div></div></div>

These days I'm a big fan of the 'whatever works' school of thought. This isn't too elegant but it works.
John Rose

John Rose 6 points

3 years ago

Glad that works. A couple of things I don't understand about your code, and I only mention this should it give you trouble:

  • <div class="subheadrule"> has no content. Did you want this class applied to your <h4> tag?
  • I'm not sure what a <p2> tag is- I would think this should be a <p> tag?
  • Does having the <p2> tag wrapped in your <div class="bodytext"> cause problems getting both the dateline and first paragraph inline?
  • The markItUp editor will add paragraph tags, so wrapping the textarea in <p> tags might affect your anticipated layout.
kyle cadotte

kyle cadotte 0 points

3 years ago

Hi John ~

Yes, the editor adding unwanted <p> tags was causing me some havoc, so I invented the <p2> tag to style that block of text and I kept the <p> tag unstyled. Say what you will but it works pretty well. The content for <div class="subheadrule"> is a background image.

Now I'm on to exploring the optional text editors. I want to remove most of the toolbar features and add a font-size option for the headlines. I think this is done via the config.js files. Can this be done with Markitup or must I install another?