Creating content columns on the frontend using UiKit3

[buster808]

Hi, I have the PHP code below which creates my blog list into rows.

How can I use UiKit to create the content output into say 3 colums or 4?

A point in the right directions would be helpful thanks.

<?php

$entries = $pages->find('template=blog-entry')->sort('-created');

$publish_date = date('Y-m-d', $page->created);

 

foreach($entries as $entry) {

 

 

$content .= "<a href='{$entry->url}'> <h2>{$entry->title}</h2><h4>{$publish_date}</h4></a>";

$content .= shortText($entry->body,100);

$content .= "<br><a href='{$entry->url}'> Read More </a>";

 

}

 

function shortText($text, $maxlength = 100) {

// truncate/shorten to max length

$text = substr(strip_tags($text), 0, $maxlength);

// check if we've truncated to a spot that needs further truncation

if(strlen(rtrim($text, ' .!?,;')) == $maxlength) {

// truncate to last word

$text = substr($text, 0, strrpos($text, ' '));

}

return trim($text);

}

[ukyo]

You can surround your list with grid component.

<!-- 3 columns, for 4 columns, uk-child-child-width-1-4@m -->
<div class="uk-child-width-1-1 uk-child-width-1-3@m" uk-grid>
  <div>
    Blog Title 1
  </div>
  <div>
    Blog Title 2
  </div>
  <div>
    Blog Title 3
  </div>
  <div>
    Blog Title 4
  </div>
  <div>
    Blog Title 5
  </div>
</div>

 

[buster808]

Thanks for the reply ukyo

Do you mean like this? sorry if Im being silly here.

<div class="uk-child-width-1-1 uk-child-width-1-3@m" uk-grid>

<?php

foreach ($entries as $entry) {

 

$content .= "<a href='{$entry->url}'> <h2>{$entry->title}</h2><h4>{$publish_date}</h4></a>";

$content .= shortText($entry->body, 100);

$content .= "<br><a href='{$entry->url}'> Read More </a>";

}

?>

</div>

[dragan]

8 minutes ago, buster808 said:

Thanks for the reply ukyo

Do you mean like this? sorry if Im being silly here.

<div class="uk-child-width-1-1 uk-child-width-1-3@m" uk-grid>

<?php

foreach ($entries as $entry) {

 

$content .= "<div><a href='{$entry->url}'> <h2>{$entry->title}</h2><h4>{$publish_date}</h4></a>";

$content .= shortText($entry->body, 100);

$content .= "<br><a href='{$entry->url}'> Read More </a></div>";

}

?>

</div>

I think rather like this ? 

(inner divs)

[dragan]

oh, and for accessibility's sake, don't jump over heading hierarchies, i.e. don't use an h4 right after an h2. Use h3 instead.

https://www.w3.org/WAI/tutorials/page-structure/headings/

Plus, I'd suggest to place your anchors inside h2, not outside.

[buster808]

Hi Dragan thanks for your help.

<div class="uk-child-width-1-1 uk-child-width-1-3@m" uk-grid> wont output above the php tag.

but adding the inline div was helpful just need to get the tag above to work.

Pulling my last hair out ha

[buster808]

got it working now by doing this - really need to learn php basics

<?php $content .= "<div class='uk-child-width-1-1 uk-child-width-1-3@m' uk-grid>"; ?>

 

<?php

foreach ($entries as $entry) {

 

$content .= "<div> <a href='{$entry->url}'> <h2>{$entry->title}</h2><h4>{$publish_date}</h4></a>";

$content .= shortText($entry->body, 100);

$content .= "<br><a href='{$entry->url}'> Read More </a></div>";

}

?>

 

<?php $content .= "</div>"; ?>

[ukyo]

42 minutes ago, buster808 said:

got it working now by doing this - really need to learn php basics

<?php $content .= "<div class='uk-child-width-1-1 uk-child-width-1-3@m' uk-grid>"; ?>

 

<?php

foreach ($entries as $entry) {

 

$content .= "<div> <a href='{$entry->url}'> <h2>{$entry->title}</h2><h4>{$publish_date}</h4></a>";

$content .= shortText($entry->body, 100);

$content .= "<br><a href='{$entry->url}'> Read More </a></div>";

}

?>

 

<?php $content .= "</div>"; ?>

A tip, if your all code php in your template, you don't need to clode php tag. And no need to close and open tag again again

<?php

$content .= "<div class='uk-child-width-1-1 uk-child-width-1-3@m' uk-grid>";

foreach ($entries as $entry) {
	$content .= "<div> <a href='{$entry->url}'> <h2>{$entry->title}</h2><h4>{$publish_date}</h4></a>";
	$content .= shortText($entry->body, 100);
	$content .= "<br><a href='{$entry->url}'> Read More </a></div>";
}

$content .= "</div>";

 

[buster808]

Thanks ukyo