Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2024-06-07 16:29:16

bashirnoori
Member
From: Afghanistan
Registered: 2012-10-02
Posts: 72

How to display each line in separate div?

I have the following table of exchange rates and want to make that dynamic through the article body or excerpt.
I can do that with custom_field solution, but it’s around 40 and I thought that would not be a good solution, or any other way if you suggest.
1 USD = <div class="rate">70</div> AFN
1 EUR = <div class="rate">76</div> AFN
1 GBP = <div class="rate">88</div> AFN
etc…
I think I can write to the body or excerpt and then display each line break to the rate class div separately.


<txp:article_custom id="10"><div class="rate"><txp:excerpt escape="p" LineBreak="1" /></div></txp:article_custom>
<txp:article_custom id="10"><div class="rate"><txp:excerpt escape="p" LineBreak="2" /></div></txp:article_custom>
<txp:article_custom id="10"><div class="rate"><txp:excerpt escape="p" LineBreak="3" /></div></txp:article_custom>
etc...

Offline

#2 2024-06-07 17:05:44

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,032
Website GitHub Mastodon Twitter

Re: How to display each line in separate div?

Will you need the history of the exchange rates?

If not, create a section, call it exchange rates, and have 3 articles in it: USD, EUR, GBP.

The section page (template) could have

<txp:article>
<div class="rate">1 <txp:title>= <txp:custom_field="rate" /> AFN</div>
</txp:article>

Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#3 2024-06-07 19:13:14

bashirnoori
Member
From: Afghanistan
Registered: 2012-10-02
Posts: 72

Re: How to display each line in separate div?

It’s 40 different rates, making section will become too many.
I was thinking if possible putting all in one article body in 40 lines and fetching each line separately like


3
<br>
4
<br>
5
<br>
6
<br>
etc... all other remaining of 40 lines

then fetch each line <txp:body id="10" firstline /> <txp:body id="10" secondline /> etc...

Offline

#4 2024-06-07 20:39:56

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,293
Website GitHub

Re: How to display each line in separate div?

Does it have to be stored in an article? i.e. do content editors need to alter the rates?

If not, why not use a few Forms and just make a delimited list, one per row, for each rate in each necessary form? You can include them in your articles to display them, using <txp:output_form>. You could do something similar directly in an article, I suppose, and set Textile to Line breaks only (or Leave text untouched).

You also have global break and breakby attributes, as well as trim and replace available to you. They are powerful tools to help you split up lists and do something for each item and/or row. Maybe they’ll help you come to a manageable solution?


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#5 2024-06-08 04:39:55

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,032
Website GitHub Mastodon Twitter

Re: How to display each line in separate div?

bashirnoori wrote #337260:

It’s 40 different rates, making section will become too many.
I was thinking if possible putting all in one article body in 40 lines and fetching each line separately like

...

then fetch each line <txp:body id="10" firstline /> <txp:body id="10" secondline /> etc...

Are the 40 rates for different currencies?

If so, you could still have the section, one article per currency. All the articles could be unlisted and you can only have the section_list visible.

Alternatively you can have them all in a table in an article

table(rates).
| 1 USD | 70 AFN |
| 1 EUR | 76 AFN |
| 1 GBP | 78 AFN |

which will render as

1 USD 70 AFN
1 EUR 76 AFN
1 GBP 78 AFN

Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#6 2024-06-10 09:19:04

bashirnoori
Member
From: Afghanistan
Registered: 2012-10-02
Posts: 72

Re: How to display each line in separate div?

colak wrote #337263:

Are the 40 rates for different currencies?

If so, you could still have the section, one article per currency. All the articles could be unlisted and you can only have the section_list visible.

Alternatively you can have them all in a table in an article

table(rates)....

which will render as


Yes, it’s all different currencies.
Currently I resolved with each separate article, but it’s hard to edit each article and save it, it means we need 40 times to edit/save as we have 40 different articles.

<txp:article_custom id="10"><div class="rate"><txp:title /> AFN</div></txp:article_custom>
<txp:article_custom id="11"><div class="rate"><txp:title /> AFN</div></txp:article_custom>
<txp:article_custom id="12"><div class="rate"><txp:title /> AFN</div></txp:article_custom>
... all other 37 remaining

I was expecting to add all in one article to edit and save all one time easily.
I can’t do that in a table as the design is prepared in different div/span classes, here is the screenshot, just the right column numbers are dynamic through the articles.

Offline

#7 2024-06-10 10:34:43

etc
Developer
Registered: 2010-11-11
Posts: 5,087
Website GitHub

Re: How to display each line in separate div?

Instead of articles, at least in txp 4.9, you could put the comma-separated rates in a form, say currency:

70.58, 76.80, 90.23, ...

Then call

<div class="rate"><txp::currency breakby offset="0" limit="1" /> AFN</div>
<div class="rate"><txp::currency breakby offset="1" limit="1" /> AFN</div>
<div class="rate"><txp::currency breakby offset="2" limit="1" /> AFN</div>
... all other 37 remaining

That’s not perfect, since you have to remember the currencies order when modifying a rate, but more performant. There is certainly a better solution, but we’d need to see you table template.

Offline

#8 2024-06-10 12:42:44

bashirnoori
Member
From: Afghanistan
Registered: 2012-10-02
Posts: 72

Re: How to display each line in separate div?

I’ve txp 4.8.8 as I didn’t see if the official txp 4.9 was released.
Here is the HTML section of my currency exchange rates:


<div class="exchange">
  <div class="item">
    <span class="flag-us"></span> 1 USD <div class="rate">70 AFN</div>
  </div>
  <div class="item">
    <span class="flag-eur"></span> 1 EURO <div class="rate">76 AFN</div>
  </div>
  <div class="item">
    <span class="flag-uk"></span> 1 GBP <div class="rate">90 AFN</div>
  </div>
  <div class="item">
    all other 37 remaining ...
  </div>
</div>

Offline

#9 2024-06-10 13:06:02

etc
Developer
Registered: 2010-11-11
Posts: 5,087
Website GitHub

Re: How to display each line in separate div?

Then probably the simplest option is installing etc_query plugin and storing the rates in some article/form/variable in JSON format:

<txp:variable name="currency">[
{"sym":"us", "cur":"USD", "rate":70},
{"sym":"eur", "cur":"EURO", "rate":76},
{"sym":"uk", "cur":"GBP", "rate":90}
]</txp:variable>

<txp:etc_query data='<txp:variable name="currency" />' markup="json" wraptag="div" class="exchange">
  <div class="item">
    <span class="flag-{sym?}"></span> 1 {cur?} <div class="rate">{rate?} AFN</div>
  </div>
</txp:etc_query>

JSON can be replaced by xml, ini or csv if needed.

Offline

#10 2024-06-11 17:58:12

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,032
Website GitHub Mastodon Twitter

Re: How to display each line in separate div?

Another way is to create a shortcode. Start by creating a form called rates and add:

  <div class="item">
    <span class="flag-<txp:if_yield name="currency">"></span> 1 <txp:if_yield name="currency"> <div class="rate"><txp:if_yield name="rate"> AFN</div>
  </div>

After that, add in an article article,

notextile.
<div class="exchange">
<txp::rates currency="USD" rate="70" />
<txp::rates currency="EUR" rate="76" />
<txp::rates currency="GBP" rate="78" />
</div>

Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

Board footer

Powered by FluxBB