Selection of articles showing title and short text
Using the example articles: My Article (id 371), My Second Article (id 372), Article Number 3 (id 373)
{articles title="My Article,My Second Article,Article Number 3"}[title] [text words="20" strip="true"]
{/articles}My Article
Lectus pulvinar ullamcorper habitasse, orci augue morbi, elit elit at adipiscing. Maecenas erat cubilia id auctor potenti consectetur lobortis vivamus...
My Second ArticleEtiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam...
Article Number 3Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales...
Selection of articles showing title and full text
Using the example articles: My Article (id 371), My Second Article (id 372), Article Number 3 (id 373)
<h2>My selection of articles</h2>
<p>{articles id="371,372,373" separator="<hr>"}</p>
<h3>[title]</h3>
<pre>[text]
<p>{/articles}</p>
My selection of articles
My Article
Lectus pulvinar ullamcorper habitasse, orci augue morbi, elit elit at adipiscing. Maecenas erat cubilia id auctor potenti consectetur lobortis vivamus arcu tempor primis. Commodo primis morbi ornare in fringilla eros arcu auctor venenatis eleifend semper. Suscipit lacinia ante blandit non suspendisse et massa semper lorem sem. Augue condimentum faucibus odio tincidunt imperdiet justo rhoncus dolor lacus!
Fringilla in posuere maecenas congue egestas habitant vivamus et non ad ultricies litora netus taciti magna in leo iaculis nostra. Nunc donec conubia nostra vulputate primis fringilla lobortis tincidunt curae scelerisque id curabitur. Molestie dapibus a semper quis amet dui suspendisse quis etiam quam mauris habitant vel ac magna imperdiet mollis praesent purus.
- class condimentum tincidunt nibh tristique nibh consectetur porttitor est tristique
- taciti aenean mauris ipsum commodo
- consectetur sed ac cras
- tristique lacus cubilia sit semper dictum sapien lacus
My Second Article
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.
Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis.
Article Number 3
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna.
In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Nunc nulla. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Donec venenatis vulputate lorem.
Linked article titles from a category
Using the example category: Sample Articles (id 152)
by title:
{articles category="Sample Articles"}[link][title][/link]
{/articles}or by alias:
{articles category="sample-articles"}[link][title][/link]
{/articles}or by id:
{articles category="152"}[link][title][/link]
{/articles} List of article titles
Using the example category: Sample Articles (id 152)
<ol>{articles category="Sample Articles"}
<li>[title]</li>
{/articles}</ol>
- My Article
- My Second Article
- Article Number 3
- Fourth Article
- 5 is for Five!
List of article titles, alphabetically
Using the example category: Sample Articles (id 152)
<ol>{articles category="Sample Articles" ordering="title ASC"}
<li>[title]</li>
{/articles}</ol>
- 5 is for Five!
- Article Number 3
- Fourth Article
- My Article
- My Second Article
First 3 articles from a category
Using the example category: Sample Articles (id 152)
{articles category="Sample Articles" limit="3"}[title] [text words="20" strip="true"] [readmore text="More" class="readon"]
{/articles}My Article
Lectus pulvinar ullamcorper habitasse, orci augue morbi, elit elit at adipiscing. Maecenas erat cubilia id auctor potenti consectetur lobortis vivamus...
My Second ArticleEtiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam...
Article Number 3Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales...
Blog styled layout
Showing articles in a Blog-style using custom html and css.
<p>{articles category="Sample Articles"}</p>
<div style="clear: both;">
<p>[image-1]</p>
<h2 class="media-heading">[title]</h2>
<p>[text limit="100" strip="true"]</p>
<p>[readmore text="Read more..."]</p>
</div>
<p>{/articles}</p>
My Article
Lectus pulvinar ullamcorper habitasse, orci augue morbi, elit elit at adipiscing. Maecenas erat cubi...
My Second Article
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet ad...
Article Number 3
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagit...
Fourth Article
Morbi nec metus. Phasellus blandit leo ut odio. Maecenas ullamcorper, dui et placerat feugiat, eros...
5 is for Five!
Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce pharetra convallis urna...
Grid/Column layout
Showing articles in a grid (columns) using custom html and css classed.
<p>{articles category="Sample Articles"}</p>
<p>{if first}</p>
<div class="grid grid-cols-3 gap-4">
<p>{/if}</p>
<div class="panel">
<p>[image-1]</p>
<h2 class="media-heading">[title]</h2>
<p>[text limit="100" strip="true"]</p>
<p>[readmore text="Read more..."]</p>
</div>
<p>{if last}</p>
</div>
<p>{/if}</p>
<p>{/articles}</p>
Instead of the class="grid grid-cols-3 gap-4", you could create your own css class and accompanying css styling.
To mimic the 3 columns used in the example, you could use class="cols-3" and add this to your custom css:
.grid-3 {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 1rem;
}
My Article
Lectus pulvinar ullamcorper habitasse, orci augue morbi, elit elit at adipiscing. Maecenas erat cubi...
My Second Article
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet ad...
Article Number 3
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagit...
Fourth Article
Morbi nec metus. Phasellus blandit leo ut odio. Maecenas ullamcorper, dui et placerat feugiat, eros...
5 is for Five!
Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce pharetra convallis urna...