Jump to content

Creating content columns on the frontend using UiKit3


buster808
 Share

Recommended Posts

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);
}
Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>"; ?>
Link to comment
Share on other sites

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>";

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...