Jump to content
Rikki
 Share


Theme Tip: Using Pages blocks anywhere

Blocks are an extremely popular feature in IPS4, used by a huge number of customers to great effect. They range from feeds of topics, to statistics, to custom blocks that can contain anything you wish. They're a great way to add dynamic content to your community theme.

What many people don't know is that blocks you create with Pages can be used anywhere in your theme, not just in the designated block containers (in the header, footer & sidebar).

 

The {block} tag

It's really easy to do so. Here's the tag you'd use:

{block="block_key"}

That's it! The block_key is the one you specify when you're creating the block in Pages (if you don't specify one manually, Pages will auto-generate one for you).

 

Where can you use them?

Block tags can be used anywhere that template logic is supported. That includes:

  • Theme templates
  • Pages page content
  • Other kinds of templates (e.g. database templates)
  • Even within other blocks!

 

What can you do with them?

The obvious benefit of blocks is that they are reusable, so in any situation where you need the same content duplicated, it makes sense to put the content in a custom block instead, and simply insert it wherever needed. Then if you need to update the content later, you have one place to do so. Custom menus are a great example of reusing blocks; since blocks have full use of template logic, you can build your menu HTML in a block, use HTML Logic to highlight the correct item, and insert the menu block on each of your pages. We use this approach on our feature tour section menu. Here's a snippet of the menu block HTML for that page:

<nav id='elTourNav'>
	<div class='container'>
		<ul class='ipsList_inline'>
			<li><a href='/features/apps' {{if \IPS\Request::i()->path == 'features/apps'}}class='sSelected'{{endif}}>Our Apps</a></li>
			<li><a href='/features/engagement' {{if \IPS\Request::i()->path == 'features/engagement'}}class='sSelected'{{endif}}>Engagement</a></li>
			<!-- ... -->
		</ul>
	</div>
</nav>

 

Blocks are useful beyond that, though. A couple of weeks ago, we showed you how to use HTML Logic to only show content to certain groups. Using blocks is actually an easier way to do this - simply add the content to a custom block, then check the groups who should see it. We use this technique to show a 'welcome to our community' message to guests on our own community. We created our welcome message as a custom Pages block, set it so that only guests have permission to view it, and then added it to our template header. Simple, effective and easy to manage.

That's just two ways you can use blocks - there's many other creative users too! If you've used blocks in an interesting way, share your example in the comments!

 Share

Comments

Recommended Comments

This is really insightful, Rikki, and very accessibly written. I love these little looks behind the curtain which reveal how a certain feature on the site was built. Thank you for taking the time to bring this together.

If you're happy to take a request, my curiosity is piqued having seen a little bit of the magic in the Feature Tour. Is the header above it done in a similar way, say with the link to go backwards from the Content Discovery page to Engagement taking a form similar, such as

<a href="/features/{{if \IPS\Request::i()->path == 'features/discovery'}}engagement">Engagement{{elseif}}{{if \IPS\Request::i()->path == 'features/editing'}}discovery">Discovery{{endif}}></a>

? Or is there a simpler mechanism at play there? (This is a round-about way of asking you to post a snippet,please ^_^ )

Link to comment
Share on other sites

@Meddysong I'm afraid the answer isn't very exciting! Since we only have a handful of pages in the feature tour and they don't change much, if ever, they're simply hand-coded as part of the header of each page:

<div class='col-sm-2 col-sm-push-8 ipsType_right sFeatureTour_next'>
    <a href='/features/engagement' class='ipsButton ipsButton_link ipsButton_large'><span></span>Engagement   <i class='fa fa-user-plus'></i></a>
</div>

It would certainly be possible to make this dynamic using a block though, which would be better suited if you had lots of pages that regularly changed (or you needed to reorder them).

The way I'd approach that is to use a PHP array to store the correct order of my pages, and then use array positions to figure out what the next/previous page should be. Something like this (off the top of my head and subject to errors/bad logic!):

{{$myPages = array( 'features/page1' => "Page One", 'features/page2' => "Page Two", 'features/page3' => "Page Three"); }}
{{$pageNames = array_keys( $myPages ); }}
{{$curPageIndex = array_search( \IPS\Request::i()->page, $pageNames ); }}

<ul>
	<li>
		{{if $curPageIndex !== FALSE && isset( $pageNames[ $curPageIndex - 1 ] )}}
			Prev:
			<a href='{$pageNames[ $curPageIndex - 1 ]}'>{$myPages[ $pageNames[ $curPageIndex - 1 ] ]}</a>
		{{endif}}
	</li>
	<li>
		{{if $curPageIndex !== FALSE && isset( $pageNames[ $curPageIndex + 1 ] )}}
			Next:
			<a href='{$pageNames[ $curPageIndex + 1 ]}'>{$myPages[ $pageNames[ $curPageIndex + 1 ] ]}</a>
		{{endif}}
	</li>
</ul>

Here I'm creating an array that represents the filenames, page titles, and they're in the order I want them to show. If I wanted to change the page order, or add new pages, I'd just change the $myPages array.

I'd build this as a block, and drop it into all the pages that should show the menu ^_^ 

Link to comment
Share on other sites

In another life you were a teacher, @Rikki!

Thanks so much for taking the time to set this out for me. I doubt I'm the only one here who learns by doing with a goal in mind rather than via a textbook, so snippets like the above are particularly useful for me and others. Thanks! ^_^

Link to comment
Share on other sites

Wait, I just noticed:

<div class='col-sm-2 col-sm-push-8 ipsType_right sFeatureTour_next'>
    <a href='/features/engagement' class='ipsButton ipsButton_link ipsButton_large'><span></span>Engagement   <i class='fa fa-user-plus'></i></a>
</div>

Is IPS using Bootstrap for the 4.x HTML framework? If so, HUGE props to you guys for adopting the best HTML framework out there!

Link to comment
Share on other sites

34 minutes ago, Joy Rex said:

Wait, I just noticed:


<div class='col-sm-2 col-sm-push-8 ipsType_right sFeatureTour_next'>
    <a href='/features/engagement' class='ipsButton ipsButton_link ipsButton_large'><span></span>Engagement   <i class='fa fa-user-plus'></i></a>
</div>

Is IPS using Bootstrap for the 4.x HTML framework? If so, HUGE props to you guys for adopting the best HTML framework out there!

I'm afraid not - just for some portions of our own website.

Link to comment
Share on other sites

@Rikki Is there any way to use a Pages block in ckeditor? Whenever I do the {block="block_key"} (replacing with the appropriate key, naturally) it just shows that as plain text- this is when I put it in the IPS source code editor. 

Edited by Lyonharted
Link to comment
Share on other sites

Awesome material. Very useful!

I have one question nevertheless. Is it possible to pass parameters to a block (PHP one)? @Rikki

I tried this {block="test" params="$test2"}, but unfortunately I'm unable to use $test2 within the block's code.

Cheers

Link to comment
Share on other sites



Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...