Sign in to follow this  

Blog Post UI

Recommended Posts

I am using this function to get blogpost but I don't see what's wrong in it and why it is now showing anything in frontend.


function ukBlogPost(Page $page, $options = array()) {
	$defaults = array(
		'summarize' => null, // Display blog post summary rather than full post? (null=auto-detect)
		'metaIcon' => 'info',
		'moreIcon' => 'arrow-right',
		'moreText' => __('Read more'), 
		'categoryIcon' => 'hashtag',
		'bylineText' => __('Posted by %1$s on %2$s'), 

	$options = _ukMergeOptions($defaults, $options);
	$title = $page->title;
	$img = $page->images->first();
	$date = $page->date ? $page->date : $page->createdStr;
	$name = $page->createdUser->name; 
	$body = summarizeText($page->get('body'), 100);
	$metaIcon = ukIcon($options['metaIcon']);
	$moreIcon = ukIcon($options['moreIcon']);
	$categoryIcon = ukIcon($options['categoryIcon']);
	$n = $page->comments->count();
	$numComments = $n ? "<a href='$page->url#comments'>" . ukIcon('comments') . " $n</a>" : "";
	$itn = $page->get('itineraries');
	$ito = $itn->each( "<h4> {itineraries_title}</h4> <p>{itineraries_details} </p> ");

	if($options['summarize'] === null) {
		// auto-detect: summarize if current page is not the same as the blog post
		$options['summarize'] = page()->id != $page->id;
/*	$categories = $page->categories->each($categoryIcon . 
		"<a class='uk-button uk-button-text' href='{url}'>{title}</a> "

	if($options['summarize']) {
		// link to post in title, and use just the first paragraph in teaser mode
		$title = "<a href='$page->url'>$title</a>";
		$body = explode('</p>', $body); 
		$body = reset($body) . ' ';
		$body .= "<a href='$page->url'>$options[moreText] $moreIcon</a></p>";
		$class = 'blog-post-summary';
	} else {
		$class = 'blog-post-full';

	if($options['summarize']) {
		$heading = "<h4 class='uk-margin-remove tour-heading'>$title</h4>";
	} else {
		$heading = "<h3 class='uk-article-title uk-margin-remove tour-heading'>$title</h3>";
	$byline = sprintf($options['bylineText'], $name, $date); 
	if($img) {
		$img = $img->size(375,380);		
	// return the blog post article markup
	return "

	<div class='uk-card'>
    	<div class='uk-inline-clip uk-transition-toggle'>
       	<img src='$img->url' alt='$img->description' class='uk-border-rounded uk-transition-scale-up uk-transition-opaque' > 
       	 <div class='uk-overlay uk-light uk-position-bottom'>
        			<p class='uk-text-light'>$heading</p>



I tried running $title, $img etc. - or are they all blank? simultaneously but nothing returns anything.


I do not know why it is not working 

Share this post

Link to post
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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By pwFoo
      With JS fetch() it is a bit tricky to get for example $_POST populated (params need to be FormData / forms), but would it possible to get PW $input (get, post, urlSegments, queryString) working for fetch requests?
      Is there a fix / hook / workaround to solve it PW side?
    • By Violet
      Here I'm writing up about my first ProcessWire site,, a blog and directory about shops which offer international shipping. 
      I'm from The GrayFly Group, which is the registered trade name for GrayFly Stationery, LLC, a limited liability company registered in the state of Kentucky, USA. You might ask, why is a stationery company creating websites?! Well, in a way both activities are very similar: both activities have the goal of getting written messages across in a pleasing manner to the reader.
      With that out of the way, let's move on and explain what went on behind the scenes of the site:
      I used a free CSS-based template from W3CSS at , using mainly the "Architect" template as the basis and modifying it as needed.
      The pagination feature of ProcessWire was very helpful here; I kept the home page to just two blogroll articles so that the reader was not overwhelmed, but upon pressing "more articles" the remainder of the blogroll is paginated with 4 articles to a page.
      Screen reader
      I made adjustments to my usage of the template to make it screen-reader-friendly. I used the Google Chrome extension to test out how the site would be handled with a screen reader.
      Security is always important, so I was thrilled to find a great all-in-one-place security guide in the ProcessWire docs at - I simply went through the guide and did what it said, using it as a checklist.  
      As far as I'm aware, the only additional modules I used (that were not already activated by default in standard PW install) were the Upgrade and Upgrade Checker modules. The main reason for this was security considerations, but it was also an added convenience and peace of mind to have it check for updates every time I logged in.
      However, I did use additional software that was not modules, as described below.
      Other software - Simple HTML DOM
      Here I was very fortunate to receive help from the ProcessWire community on the forum. Due to the site's monetization model being affiliate marketing, I wished to make all my external links nofollow and target _blank by default. User @Robin S was instrumental in showing me how to do this using Simple HTML DOM in the forum post
      Other software - Google Analytics cookie manager
      My site requirements for GDPR were specific enough that I felt I would rather develop my own code to handle Google Analytics tracking, which I'll describe here. I wanted to be certain GA tracking was disabled by default requiring opt-in, instead of opt-out. I also included in the Cookie Manager some written info about third party cookies (these are placed when clicking on affiliate links) and how the user can avoid such tracking (turn off third party cookies in their browser settings). 
      I also disabled front-end PW cookies as described here: 
      Google Analytics cookie settings
      The Google Analytics cookie setting code was done using JavaScript. I used a session storage variable to indicate whether the user had a) accepted GA tracking cookies b) declined them or c) had not made a choice yet. I also had to make some changes also to the <head> code to ensure Google Analytics cookies were not set unless the user had accepted them. 
      Efficiency - optimizing 404s
      I used the guide at to sinkhole bot-driven 404 requests to a static 404 file. 
      Back office pic
      Below is an image of how ProcessWire allows helpful field descriptions and displays them when used in templates, so that when I come to actually use or enter content in fields I created months ago, I know what the ramifications are. Very helpful. Also, when using the back office I found the Reno admin theme to be very pleasing, efficient, and easy to use.

    • By sam-vital
      I'm creating a News/Updates section for a client and they would like the 3 most recent Updates previewed on the home screen. So this would be Title and Date Posted. These blog posts will be child pages of a News and Updates page, which is a child of the Home page. So it's like Home -> News -> Blog posts. I don't need this to be a nav menu, just something to show the newest updates.
      All help is appreciated 🙂
    • By franciccio-ITALIANO
      Hi, in wordpress homepage we can put a list of LAST ARTICLES AND COMMENTS.
      Can I do same thing with processwire?
      If yes, how?
      There is a tutorial?

    • By adrian_gp
      Hello everyone,
      I'm new in this forum and my english is not perfect so sorry for the mistakes.
      I have an Blog Project and i will use categories. 
      Here is the structure:
      Blog -> displays all the Blogposts (template=BlogPage) Post-Name -> display the specific Post (template=BlogPost) Categories -> not visible in the menu (template=CategoriesPage) Categorie-Name -> not visible in the menu (template=CategoriePage) For your information:
      (BlogPost) every blogpost has its own page (BlogPost) in Admin i can select the categorie per Field -> SelectMultiple Pages (Checkbox) (fieldname=categories) (Blog) displays all the BlogPosts and all the categories under the ParentTemplate CategoriesPage, which also have their own side Now the Problem:
      On Blog -> I would like to click on a category and only see the post that has this category checked in the BlogPost.
      CategoriePage -> what do I have to insert there to show only the specific posts which use the checked categorie?

      Let me know if you need more information

      Thanks for your support