Show all categories and it's articles in navigation (Pages)

inkredible · March 31, 2017

Hello,

I am trying to build something similiar to your Developer docs. I am really stuck how and in what template I should create the navigation.

1. I have read your tutorials and it seems like I should create the navigation (including the 2 column layout) in my "categoryTable". And then I will load the articles using a javascript controller/ajax. Is that correct?

2. The categoryTable template gets the following attributes passed: $table, $headers, $rows, $quickSearch . I don't understand this line at all, but it apparently calls the recordRow template:

{template="$table->rowsTemplate[1]" params="$table, $headers, $rows" object="$table->rowsTemplate[0]"}

In your dev docs you list the category name ("General", "Development" and so on). So I want to output the Category Name either in the beginning of my recordRow template. How can I do this?

I hope I am on the right track, how I could achieve such a 2-column layout with navigation as you have used in your developer docs. If I am not kindly describe what I need to do instead.

inkredible · April 4, 2017

Bump

bfarber · April 5, 2017

I'm afraid our implementation is a bit more complicated than that. We have a page that embeds a block on the left and then the database itself on the right. The index page of the database redirects to an article, so you can't reach the database index. The block pulls all the articles to create the menu, and then you will only ever see the article on the right hand side (through the normal database template plugin).

inkredible · April 5, 2017

1 hour ago, bfarber said:

I'm afraid our implementation is a bit more complicated than that. We have a page that embeds a block on the left and then the database itself on the right. The index page of the database redirects to an article, so you can't reach the database index. The block pulls all the articles to create the menu, and then you will only ever see the article on the right hand side (through the normal database template plugin).

Thanks for the explanation, I spent many hours trying to figure out how you've done that using the "common pages tools".

You said you have embedded a block, can you elloborate this a bit more? I am wondering what "block" I have to create (basically a new template?) and how I can access all categories including it's articles for this database, so that I can list it as a navigation menu.

inkredible · April 7, 2017

Am I asking dumb questions or do you prefer not answering to this thread? :(. I only bought Pages to realize that to be honest

newbie LAC · April 8, 2017

Hello,

It's not very difficult. I recreated dev docs.

What do you need?

1. Create a database with categories

2. Create a custom field. I called it "Shortened Title" what used for articles titles in side menu

3. Create and edit templates for database

4. Create a plugin block based on "Feed on %database%" and change html

5. Create a page. Add database and block. https://invisionpower.com/4guides/themes-and-customizations/css-framework/layout-columns-r89/

6. Create js file

7. Create css file

inkredible · April 8, 2017

6 hours ago, newbie LAC said:

Hello,

It's not very difficult. I recreated dev docs.

What do you need?

1. Create a database with categories

2. Create a custom field. I called it "Shortened Title" what used for articles titles in side menu

3. Create and edit templates for database

4. Create a plugin block based on "Feed on %database%" and change html

5. Create a page. Add database and block. https://invisionpower.com/4guides/themes-and-customizations/css-framework/layout-columns-r89/

6. Create js file

7. Create css file

My main problem seems to be the navigation menu on the left. In short how should I create this navigation menu. As far as I understood Brandon they have implemented it in the page's content itself? How would I show all category titles and the "shortened title" there?

bfarber · April 10, 2017

The left hand navigation in dev docs is a block that has this code in it

{{$database = \IPS\cms\Databases::load( 33 );}}
{{$roots = \IPS\cms\Categories33::roots();}}
{{$recordClass = 'IPS\cms\Records33';}}
{{$records = \IPS\cms\Records33::getItemsWithPermission( array(), 'LENGTH( '. $database->field_sort .'), ' . $database->field_sort . ' ' . $database->field_direction, 100 );}}

{{$activeId = null;}}
{{if isset( \IPS\Request::i()->path )}}
	{{preg_match( '#-r(\d+?)$#', \IPS\Request::i()->path, $matches );}}
	{{if ( isset( $matches[1] ) AND is_numeric( $matches[1] ) )}}
		{{$activeId = $matches[1];}}
	{{endif}}
{{endif}}

<ul class='ipsList_reset cDevDocs' data-controller='devDocs.front.devDocs.main'>
	{{foreach $roots as $category}}
		{{if $category->can('view')}}
  			<li>
  				<h2>{$category->_title}</h2>
  				{{if $category->hasChildren()}}
  					<ul class='ipsList_reset'>
  						{{foreach $category->children() as $subCategory}}
							<li class="cDevDocs_closed">
								<h3 data-action='expandSection'>{$subCategory->_title}</h3>
								<ul class='ipsList_reset'>
									{{foreach $records as $record}}
										{{if $record->container()->_id == $subCategory->_id}}
											<li>
												<a {{if $activeId == $record->_id}}class='cDevDocs_active'{{endif}} href="{$record->url()}" {{if $record->hidden()}}class='ipsType_light'{{endif}}>{$record->customFieldDisplayByKey('menu-title', 'listing')|raw}</a>
											</li>
										{{endif}}
									{{endforeach}}
								</ul>
							</li>
						{{endforeach}}
					</ul>
				{{endif}}
				<ul class='ipsList_reset'>
					{{foreach $records as $record}}
						{{if $record->container()->_id == $category->_id}}
							<li>
								<a {{if $activeId == $record->_id}}class='cDevDocs_active'{{endif}} href="{$record->url()}" {{if $record->hidden()}}class='ipsType_light'{{endif}}>{$record->customFieldDisplayByKey('menu-title', 'listing')|raw}</a>
							</li>
						{{endif}}
					{{endforeach}}
				</ul>
  			</li>
  		{{endif}}
  	{{endforeach}}
</ul>

There is of course javascript tied in to this area and other templates and so forth.

It's not that the question is dumb or we're not interested in helping, but admittedly this is a busy time here at IPS and no one can necessarily stop what they're doing at any given point to answer "how can I do X" questions. Hopefully that makes sense. We try to help where we can, but please give us some leeway as we work hard on delivering 4.2.

newbie LAC · April 10, 2017

On 08.04.2017 at 4:35 PM, inkredible said:

In short how should I create this navigation menu.

It's a customized custom block. Go to Pages -> Blocks -> Create new block -> Type Plugin -> Plugin "Feed from %database%"

On 08.04.2017 at 4:35 PM, inkredible said:

How would I show all category titles and the "shortened title" there?

Use php + html + css.

Next guide is not official

On 08.04.2017 at 10:22 AM, newbie LAC said:

1. Create a database with categories

Database Key: docs

Other data: See screenshots

On 08.04.2017 at 10:22 AM, newbie LAC said:

2. Create a custom field. I called it "Shortened Title" what used for articles titles in side menu

Title: Shortened Title

Template Key: shortened_title

On 08.04.2017 at 10:22 AM, newbie LAC said:

3. Create and edit templates for database

1. Add database template

Name: Devdocscatlisting

Template Type: Record Listing (Shown when clicking a category)

Assign to database: Developer Documentation

2. Add database template

Name: Devdocsdisplay

Template Type: Record (Displays the record and comments)

Assign to database: Developer Documentation

Open template record and replace all code with

<div class='ipsClearfix'>
	<h1 class='ipsType_pageTitle ipsType_break'>
		{{if $record->locked()}}<span><i class='fa fa-lock'></i></span> {{endif}}

		{{if $record->isFutureDate() || $record->mapped('pinned') || $record->mapped('featured') || $record->hidden() === -1 || $record->hidden() === 1}}
			{{if $record->isFutureDate()}}
				<span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{$record->futureDateBlurb()}'><i class='fa fa-clock-o'></i></span></span>
			{{elseif $record->hidden() === -1}}
				<span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{$record->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span></span>
			{{elseif $record->hidden() === 1}}
				<span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span></span>
			{{endif}}
			{{if $record->mapped('pinned')}}
				<span><span class="ipsBadge ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="pinned"}'><i class='fa fa-thumb-tack'></i></span></span>
			{{endif}}
			{{if $record->mapped('featured')}}
				<span><span class="ipsBadge ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span></span>
			{{endif}}
		{{endif}}
		
		{{if $record->prefix() OR ( $record->canEdit() AND $record::canTag( NULL, $record->container() ) AND $record::canPrefix( NULL, $record->container() ) )}}
			<span {{if !$record->prefix()}}class='ipsHide'{{endif}} {{if ( $record->canEdit() AND $record::canTag( NULL, $record->container() ) AND $record::canPrefix( NULL, $record->container() ) )}}data-editablePrefix{{endif}}>
				{template="prefix" group="global" app="core" params="$record->prefix( TRUE ), $record->prefix()"}
			</span>
		{{endif}}
		{{if $record->canEdit()}}
			<div class='ipsType_break ipsContained' data-controller="core.front.core.moderation">
				<span data-role="editableTitle" title='{lang="click_hold_edit"}'>{$record->_title}</span>
			</div>
		{{else}}
			<div class='ipsType_break ipsContained'>{$record->_title}</div>
		{{endif}}
	</h1>
	
	{{if $record::database()->options['reviews']}}
		<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
			<meta itemprop='ratingValue' content='{$record->averageReviewRating()}'>
			<meta itemprop='reviewCount' content='{$record->record_reviews}'>
			{template="rating" group="global" location="front" app="core" params="'large', $record->averageReviewRating(), \IPS\Settings::i()->reviews_rating_out_of, $record->memberReviewRating()"}&nbsp;&nbsp; <span class='ipsType_normal ipsType_light'>({lang="num_reviews" pluralize="$record->record_reviews"})</span>
		</div>
	{{elseif $record->container()->allow_rating}}
		<div>{$record->rating()|raw}</div>
	{{endif}}	
</div>

{{if count( $record->tags() ) OR ( $record->canEdit() AND $record::canTag( NULL, $record->container() ) )}}
	{template="tags" group="global" app="core" params="$record->tags(), FALSE, FALSE, ( $record->canEdit() AND $record::canTag( NULL, $record->container() ) ) ? $record->url() : NULL"}
{{endif}}	

<article class='ipsContained ipsSpacer_top'>
	<div class='ipsClearfix'>
		{{if $record->record_image}}
			<div class="cCmsRecord_image">
				<img class="ipsImage" src="{file="$record->_record_image_thumb" extension="cms_Records"}">
			</div>
		{{endif}}
		<section class="ipsType_richText ipsType_normal" data-controller='core.front.core.lightboxedImages'>{$record->_content|raw}</section>
		
		{{if $record->editLine()}}
			{$record->editLine()|raw}
		{{endif}}
		
		{{if $records = $record->getReciprocalItems()}}
			{{$infoLineShown = FALSE;}}
			<br>
			{{foreach $records as $fieldId => $items}}
				<ul class="ipsList_inline ipsList_csv ipsList_noSpacing">
				{{foreach $items as $item}}
					<li>{{if ! $infoLineShown}}{{$infoLineShown=TRUE;}}{lang="records_linking_to_me" sprintf="$item::database()->recordWord(0,TRUE), $record::database()->recordWord(1)"}: {{endif}}<a href="{$item->url()}">{$item->_title}</a></li>
				{{endforeach}}
				</ul>
			{{endforeach}}
		{{endif}}
	</div>
	{{if $bottomFields = $record->customFieldsForDisplay('display_bottom')}}
		<hr class='ipsHr ipsClear ipsClearfix'>
		{{foreach $bottomFields as $fieldId => $fieldValue}}
			{{if $fieldValue}}
				{$fieldValue|raw}
			{{endif}}
		{{endforeach}}
	{{endif}}
	{{if $record instanceof \IPS\Content\Reputation and settings.reputation_enabled}}
	<div class='ipsPos_right'>
		{template="reputation" app="core" group="global" params="$record"}
		<br>
	</div>
	{{endif}}
	<hr class='ipsHr ipsClear ipsClearfix'>
	{{if $record->isFutureDate() or $record->canPin() or $record->canUnpin() or $record->canFeature() or $record->canUnfeature() or $record->canHide() or $record->canUnhide() or $record->canMove() or $record->canLock() or $record->canUnlock() or $record->canDelete()}}
		<a href='#elentryActions_menu' id='elentryActions' class='ipsButton ipsButton_light ipsButton_verySmall' data-ipsMenu>{lang="content_record_actions" sprintf="$record::database()->recordWord( 1, TRUE )"} <i class='fa fa-caret-down'></i></a>
		<ul id='elentryActions_menu' class='ipsMenu ipsMenu_auto ipsHide'>
			{{if $record->isFutureDate() and $record::canFuturePublish( NULL, $record->container() )}}
				<li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'publish' ) )}' data-confirm title='{lang="publish_now"}'>{lang="publish"}</a></li>
			{{endif}}
			{{if $record->canFeature()}}
				<li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'feature' ) )}' title='{lang="feature_title_record" sprintf="$record::database()->recordWord(1)"}'>{lang="feature"}</a></li>
			{{endif}}
			{{if $record->canUnfeature()}}				
				<li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'unfeature' ) )}' title='{lang="unfeature_title_record" sprintf="$record::database()->recordWord(1)"}'>{lang="unfeature"}</a></li>
			{{endif}}
			{{if $record->canPin()}}				
				<li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'pin' ) )}' title='{lang="pin_title_record" sprintf="$record::database()->recordWord(1)"}'>{lang="pin"}</a></li>
			{{endif}}
			{{if $record->canUnpin()}}				
				<li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'unpin' ) )}' title='{lang="unpin_title_record" sprintf="$record::database()->recordWord(1)"}'>{lang="unpin"}</a></li>
			{{endif}}
			{{if $record->canHide()}}				
				<li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'hide' ) )}' title='{lang="hide_title_record" sprintf="$record::database()->recordWord(1)"}' data-ipsDialog data-ipsDialog-title="{lang="hide"}">{lang="hide"}</a></li>
			{{endif}}
			{{if $record->canUnhide()}}				
				<li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'unhide' ) )}' title='{{if $record->hidden() === 1}}{lang="approve_title_record" sprintf="$record::database()->recordWord(1)"}{{else}}{lang="unhide_title_record" sprintf="$record::database()->recordWord(1)"}{{endif}}'>{{if $record->hidden() === 1}}{lang="approve"}{{else}}{lang="unhide"}{{endif}}</a></li>
			{{endif}}
			{{if $record->canLock()}}				
				<li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'lock' ) )}' title='{lang="lock_title_record" sprintf="$record::database()->recordWord(1)"}'>{lang="lock"}</a></li>
			{{endif}}
			{{if $record->canUnlock()}}				
				<li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'unlock' ) )}' title='{lang="unlock_title_record" sprintf="$record::database()->recordWord(1)"}'>{lang="unlock"}</a></li>
			{{endif}}
			{{if $record->canMove()}}				
				<li class='ipsMenu_item'><a href='{$record->url('move')->csrf()}' data-ipsDialog data-ipsDialog-title="{lang="move"}"  title='{lang="move_title_record" sprintf="$record::database()->recordWord(1)"}'>{lang="move"}</a></li>
			{{endif}}
			{{if $record->canDelete()}}				
				<li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'delete' ) )}' data-confirm  title='{lang="delete_title_record" sprintf="$record::database()->recordWord(1)"}'>{lang="delete"}</a></li>
			{{endif}}
			{{if \IPS\Member::loggedIn()->modPermission('can_view_moderation_log')}}
				<li class='ipsMenu_sep'><hr></li>
				<li class="ipsMenu_item"><a href='{$record->url()->csrf()->setQueryString( array( 'do' => 'modLog' ) )}' data-ipsDialog data-ipsDialog-title='{lang="moderation_history"}'>{lang="moderation_history"}</a></li>
			{{endif}}
		</ul>
	{{endif}}
	{{if $record->canEdit()}}
		&nbsp;&nbsp;<a href='{$record->url('edit')->csrf()}' title='{lang="edit"}'>{lang="edit"}</a>
	{{endif}}
	{{if !\IPS\Member::loggedIn()->group['gbw_no_report'] }}
		&nbsp;&nbsp;<a href='{$record->url('report')}' data-ipsDialog data-ipsDialog-size='medium' data-ipsDialog-title="{lang="content_record_report" sprintf="$record::database()->recordWord( 1, TRUE )"}" data-ipsDialog-remoteSubmit data-ipsDialog-flashMessage="{lang="report_submit_success"}" title="{lang="content_record_report" sprintf="$record::database()->recordWord( 1, TRUE )"}">{lang="content_record_report" sprintf="$record::database()->recordWord( 1, TRUE )"}</a>
	{{endif}}
	{{if $record->canManageRevisions()}}
		&nbsp;&nbsp;<a href='{$record->url('revisions')}' title="{lang="content_view_revisions"}">{lang="content_view_revisions"}</a>
	{{endif}}
</article>

<br>
{{if $updateForm}}
	<div class='ipsAreaBackground_light ipsPad'>
		<h2 class='ipsType_sectionHead'>{lang="cms_front_update_fields" sprintf="$record::database()->recordWord( 1 )"}</h2>
		<ul class='ipsForm ipsForm_vertical'>
			{$updateForm|raw}
		</ul>
	</div>
{{endif}}

Open template categoryHeader and remove all code

Open template categoryFooter and remove all code

Open template categoryTable and replace all code with

<div class='ipsBox'  data-baseurl='{$table->baseUrl}' data-resort='{$table->resortKey}' data-controller='core.global.core.table{{if $table->canModerate()}},core.front.core.moderation{{endif}}'>
	{{if !count($rows)}}
		<div class="ipsPad">
			{lang="cms_no_records_to_show" sprintf="\IPS\cms\Databases::load( \IPS\cms\Databases\Dispatcher::i()->databaseId )->recordWord()"}
		</div>
	{{else}}
		<ol class='ipsDataList ipsDataList_zebra ipsClear cCmsListing {{foreach $table->classes as $class}}{$class} {{endforeach}}' id='elTable_{$table->uniqueId}' data-role="tableRows">
			{{foreach $rows as $row}}
				{{$idField = $row::$databaseColumnId;}}
				<li class="cDevDocs_row " data-rowid="{$row->$idField}">
					<h4 class="ipsType_sectionHead">
						<a href="{$row->url}" class="ipsType_blendLinks">
							{$row->_title}
						</a>
					</h4>
					<div class="ipsType_normal ipsType_richText" data-ipstruncate="" data-ipstruncate-type="remove" data-ipstruncate-size="3 lines">
						{$row->truncated()|raw}
					</div>
				</li>
			{{endforeach}}
		</ol>
	{{endif}}
</div>

Save all changes

On 08.04.2017 at 10:22 AM, newbie LAC said:

4. Create a plugin block based on "Feed on %database%" and change html

Type: Plugin

Plugin: Feed from Developer Documentation

Template Key: dev_side_menu

Template: Use as a base for a custom template

Content:

{{$recordClass = $records->classname;}}
{{$databaseId  = $recordClass::database()->_id;}}
{{$catClass    = '\IPS\cms\Categories' . $databaseId;}}
{{$firstRecord = null;}}
{{$currentUrlPath = \IPS\Request::i()->url()->data['path'];}}

{{if count($catClass::roots()) and count($records)}}
	<ul class="ipsList_reset cDevDocs" data-controller="devDocs.front.devDocs.main">
		{{foreach $catClass::roots() as $root}}
			<li>
				<h2>{$root->_title}</h2>
				{{if count($root->children())}}
					<ul class="ipsList_reset">
						{{foreach $root->children() as $child}}
							<li class="cDevDocs_closed">
								<h3 data-action="expandSection">{$child->_title}</h3>
								{{foreach $records as $record}}
									{{if $record->container()->_id == $child->_id}}
										<ul class="ipsList_reset">
											{{if $firstRecord == null}}
												{{$firstRecord = $record;}}
											{{endif}}
											<li>
												<a {{if $currentUrlPath === $record->url()->data['path']}}class="cDevDocs_active"{{endif}} href="{$record->url()}">
													{{if $record->customFieldDisplayByKey('shortened_title', 'raw')}}{$record->customFieldDisplayByKey('shortened_title', 'raw')}{{else}}{$record->_title}{{endif}}
												</a>
											</li>
										</ul>
									{{endif}}
								{{endforeach}}
							</li>
						{{endforeach}}
					</ul>
				{{endif}}
				<ul class="ipsList_reset">
					{{foreach $records as $record}}
						{{if $record->container()->_id == $root->_id}}
							{{if $firstRecord == null}}
								{{$firstRecord = $record;}}
							{{endif}}
							<li>
								<a {{if $currentUrlPath === $record->url()->data['path']}}class="cDevDocs_active"{{endif}} href="{$record->url()}">
									{{if $record->customFieldDisplayByKey('shortened_title', 'raw')}}{$record->customFieldDisplayByKey('shortened_title', 'raw')}{{else}}{$record->_title}{{endif}}
								</a>
							</li>
						{{endif}}
					{{endforeach}}						
				</ul>
			</li>
		{{endforeach}}
	</ul>
{{endif}}
{{if \IPS\Request::i()->path == $recordClass::database()->key}}
	{{if $firstRecord}}
		{{\IPS\Output::i()->redirect($firstRecord->url(), '', 302);}}
	{{else}}
		{{\IPS\Output::i()->redirect(\IPS\Http\Url::internal(''), '', 302);}}
	{{endif}}
{{endif}}

On 08.04.2017 at 10:22 AM, newbie LAC said:

6. Create js file

Add Javascript file devDocs

Content/Code (copied from this forum)

/**
 * IPS Social Suite 4
 * (c) 2013 Invision Power Services - http://www.invisionpower.com
 *
 * ips.devDocs.js - Dev docs JS controller
 *
 * Author: Rikki Tissier
 */
;
(function($, _, undefined) {
    "use strict";

    ips.controller.register('devDocs.front.devDocs.main', {

        initialize: function() {
            this.on('click', '[data-action="expandSection"]', this.toggleSection);
            this.setup();
        },

        setup: function() {
            // Do we have an active item?
            var active = this.scope.find('.cDevDocs_active');

            if (active.length) {
                var section = active.closest('.cDevDocs_closed');
                section.toggleClass('cDevDocs_closed', false).toggleClass('cDevDocs_open', true);
            }
        },

        toggleSection: function(e) {
            var h3 = $(e.currentTarget);
            var li = h3.closest('li');
            var expanded = li.is('.cDevDocs_open');

            li.toggleClass('cDevDocs_open', !expanded).toggleClass('cDevDocs_closed', expanded);
        }
    });
}(jQuery, _));

On 08.04.2017 at 10:22 AM, newbie LAC said:

7. Create css file

Upload New Media background_light.png

Add CSS file devDocs

Content/Code (copied from this forum)

#ipsLayout_mainArea {
  padding-right: 0;
}

body a:hover {
  color: #dc573d;
}

.ipsApp #elSearch {
  margin-top: -39px;
  z-index: 2000;
}

.ipsType_sectionTitle,
.ipsWidget.ipsWidget_vertical .ipsWidget_title {
  background: #b63848;
}

/* REUSABLE HEADER */
.cDevHeader {
  background: url( {media="background_light.png"} );
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 5px;
  padding: 20px 30px;
  position: relative;
}

  .cDevHeader:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #dc573d;
    background: -moz-linear-gradient(-45deg,  #dc573d 0%, #ba2c6b 100%);
    background: -webkit-linear-gradient(-45deg,  #dc573d 0%,#ba2c6b 100%);
    background: linear-gradient(135deg,  #dc573d 0%,#ba2c6b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc573d', endColorstr='#ba2c6b',GradientType=1 );
    opacity: 0.85;
  }
  
  .cDevHeader h1 {
    font-weight: 300;
    font-size: 32px;
    color: #fff;
    font-family: "proxima-nova", "helvetica neue", helvetica, arial, sans-serif;
    position: relative;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
  }

/* Docs */
.cDevDocs {
  /*padding-left: 20px;*/
}

.cDevDocs h2 {
  font-size: 18px;
  font-weight: bold;
  font-family: "proxima-nova", "helvetica neue", helvetica, arial, sans-serif;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding: 6px 10px 6px 0;
  margin-left: 10px;
  margin-bottom: 8px;
  line-height: 1.3;
  color: #111;
}

.cDevDocs > li {
  padding-left: 10px;
}

.cDevDocs li {
  line-height: 1.6;
  padding-left: 10px;
  margin-bottom: 2px;
}

.cDevDocs ul ul {
  margin-left: -13px;
  margin-bottom: 7px;
  margin-top: 5px;
  padding-left: 15px;
  border-left: 1px solid rgba(0,0,0,0.075);
}
  
  .ipsJS_has .cDevDocs .cDevDocs_closed ul {
    display: none;
  }
  .ipsJS_has .cDevDocs .cDevDocs_open ul,
  .ipsJS_none .cDevDocs .cDevDocs_closed ul {
    display: block;
  }

.cDevDocs h3 {
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  padding-left: 0;
  position: relative;
  cursor: pointer;
}

  .cDevDocs .cDevDocs_closed h3:before,
  .cDevDocs .cDevDocs_open h3:before {
    font-family: 'FontAwesome';
    font-size: 15px;
    position: absolute;
    left: -15px;
    top: 0;
  }
  .ipsJS_has .cDevDocs .cDevDocs_closed h3:before {
    content: '\f105';
  }
  .ipsJS_has .cDevDocs .cDevDocs_open h3:before,
  .ipsJS_none .cDevDocs .cDevDocs_closed h3:before {
    content: '\f107';
    left: -17px;
  }

.cDevDocs > li > ul > a {
  font-size: 14px;
}

a.cDevDocs_active {
  color: #dc573d;
  font-weight: bold;
}

span[style^="font-size:18px"],
span[style^="font-size:20px"] {
  font-family: "proxima-nova", "helvetica neue", helvetica, arial, sans-serif;
  font-size: 22px !important;
}

/* ROWS */
.cDevDocs_row {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding: 20px 0;
}

.cDevDocs_row .ipsType_sectionHead {
  margin-bottom: 5px;
  font-family: "proxima-nova", "helvetica neue", helvetica, arial, sans-serif;
}

#elDevDocs_columns .ipsPageHeader {
  margin-top: 0;
}

On 08.04.2017 at 10:22 AM, newbie LAC said:

5. Create a page. Add database and block. https://invisionpower.com/4guides/themes-and-customizations/css-framework/layout-columns-r89/

Content

<div class="cDevHeader" id="elDevDocs_header">
	<h1 class="ipsType_pageTitle">Developer Documentation</h1>
</div>
<div class="ipsColumns ipsColumns_collapsePhone" id="elDevDocs_columns">
	<div class="ipsColumn ipsColumn_wide">
		{block="dev_side_menu"}
	</div>
	<div class="ipsColumn ipsColumn_fluid">
		<div class="ipsPad ipsSpacer_top">
			{database="docs"}
		</div>
	</div>
</div>

inkredible · April 10, 2017

Haha @newbie LAC you are awesome, I have already managed to create it, but your guide will certainly help other members too. Thanks again for your help as well!

Rob Pearson · May 26, 2017

Fantastic guide and great support by @newbie LAC

Joel R · May 31, 2017

I just saw this

Nominating this for Guide of the Week

Goza · August 2, 2017

On 4/5/2017 at 7:09 AM, bfarber said:

I'm afraid our implementation is a bit more complicated than that. We have a page that embeds a block on the left and then the database itself on the right. The index page of the database redirects to an article, so you can't reach the database index. The block pulls all the articles to create the menu, and then you will only ever see the article on the right hand side (through the normal database template plugin).

Sorry to bring up an sort of old topic. But, how do you redirect an article so that you can't reach the database index?

bfarber · August 2, 2017

9 hours ago, Goza said:

Sorry to bring up an sort of old topic. But, how do you redirect an article so that you can't reach the database index?

We don't - I'm not really clear on what you are asking. We creatively set up the templates in a manner that doesn't really support you reaching the category indexes, but they're technically still there and accessible by adjusting the URL appropriately. The database index is this page with just a completely custom template: https://invisioncommunity.com/developers/

Goza · August 3, 2017

11 hours ago, bfarber said:

We don't - I'm not really clear on what you are asking. We creatively set up the templates in a manner that doesn't really support you reaching the category indexes, but they're technically still there and accessible by adjusting the URL appropriately. The database index is this page with just a completely custom template: https://invisioncommunity.com/developers/

I guess my explaining wasn't really clear but yes I was wondering how you were able to stop reaching to the category indexes.

bfarber · August 3, 2017

12 hours ago, Goza said:

I guess my explaining wasn't really clear but yes I was wondering how you were able to stop reaching to the category indexes.

https://invisioncommunity.com/developers/docs/general/

We don't, we just adjusted the navigation creatively to discourage users from reaching said pages, but they're still there technically.

Meddysong · August 5, 2017

Everything was going well and I built the database but upon submitting a record, I got an error message. The problem seems to be the block. When I carry out this step:

On 4/10/2017 at 2:40 PM, newbie LAC said:

Template: Use as a base for a custom template

Content:


{{$recordClass = $records->classname;}}
{{$databaseId  = $recordClass::database()->_id;}}
{{$catClass    = '\IPS\cms\Categories' . $databaseId;}}
{{$firstRecord = null;}}
{{$currentUrlPath = \IPS\Request::i()->url()->data['path'];}}

{{if count($catClass::roots()) and count($records)}}
	<ul class="ipsList_reset cDevDocs" data-controller="devDocs.front.devDocs.main">
		{{foreach $catClass::roots() as $root}}
			<li>
				<h2>{$root->_title}</h2>
				{{if count($root->children())}}
					<ul class="ipsList_reset">
						{{foreach $root->children() as $child}}
							<li class="cDevDocs_closed">
								<h3 data-action="expandSection">{$child->_title}</h3>
								{{foreach $records as $record}}
									{{if $record->container()->_id == $child->_id}}
										<ul class="ipsList_reset">
											{{if $firstRecord == null}}
												{{$firstRecord = $record;}}
											{{endif}}
											<li>
												<a {{if $currentUrlPath === $record->url()->data['path']}}class="cDevDocs_active"{{endif}} href="{$record->url()}">
													{{if $record->customFieldDisplayByKey('shortened_title', 'raw')}}{$record->customFieldDisplayByKey('shortened_title', 'raw')}{{else}}{$record->_title}{{endif}}
												</a>
											</li>
										</ul>
									{{endif}}
								{{endforeach}}
							</li>
						{{endforeach}}
					</ul>
				{{endif}}
				<ul class="ipsList_reset">
					{{foreach $records as $record}}
						{{if $record->container()->_id == $root->_id}}
							{{if $firstRecord == null}}
								{{$firstRecord = $record;}}
							{{endif}}
							<li>
								<a {{if $currentUrlPath === $record->url()->data['path']}}class="cDevDocs_active"{{endif}} href="{$record->url()}">
									{{if $record->customFieldDisplayByKey('shortened_title', 'raw')}}{$record->customFieldDisplayByKey('shortened_title', 'raw')}{{else}}{$record->_title}{{endif}}
								</a>
							</li>
						{{endif}}
					{{endforeach}}						
				</ul>
			</li>
		{{endforeach}}
	</ul>
{{endif}}
{{if \IPS\Request::i()->path == $recordClass::database()->key}}
	{{if $firstRecord}}
		{{\IPS\Output::i()->redirect($firstRecord->url(), '', 302);}}
	{{else}}
		{{\IPS\Output::i()->redirect(\IPS\Http\Url::internal(''), '', 302);}}
	{{endif}}
{{endif}}

and then preview it, I can see that it's going to produce an error:

And this is the error message:

Error: Class name must be a valid object or a string (0)
#0 /home/xxx/xxx/applications/cms/sources/Blocks/Block.php(302): IPS\Theme\class_content_template_for_block_->run(Array, '5c8e0e6505b9d70...', NULL)
#1 [internal function]: IPS\cms\Blocks\_Block->getTemplate(Array, '5c8e0e6505b9d70...', NULL)
#2 /home/xxx/xxx/system/Widget/Widget.php(233): call_user_func_array(Array, Array)
#3 /home/xxx/xxx/system/Content/Widget.php(388): IPS\_Widget->output(Array, '5c8e0e6505b9d70...')
#4 /home/xxx/xxx/applications/cms/widgets/RecordFeed.php(309): IPS\Content\_Widget->render()
#5 /home/xxx/xxx/applications/cms/modules/front/pages/builder.php(112): IPS\cms\widgets\_RecordFeed->render()
#6 /home/xxx/xxx/system/Dispatcher/Controller.php(85): IPS\cms\modules\front\pages\_builder->previewBlock()
#7 /home/xxx/xxx/applications/core/modules/front/system/widgets.php(38): IPS\Dispatcher\_Controller->execute()
#8 /home/xxx/xxx/system/Dispatcher/Dispatcher.php(146): IPS\core\modules\front\system\_widgets->execute()
#9 /home/xxx/xxx/index.php(12): IPS\_Dispatcher->run()
#10 {main}

Do you have any idea what that means and what I need to do differently?

newbie LAC · August 6, 2017

10 hours ago, Meddysong said:

Do you have any idea what that means and what I need to do differently?

IPS changed the code

Try this

{{$recordClass = null;}}
{{$catClass = null;}}

{{if count($records)}}
	{{$recordClass = get_class($records[0]);}}
	{{$catClass    = '\IPS\cms\Categories' . $recordClass::database()->_id;}}
{{endif}}

{{$firstRecord = null;}}
{{$currentUrlPath = \IPS\Request::i()->url()->data['path'];}}

{{if count($records) and $catClass and count($catClass::roots())}}
	<ul class="ipsList_reset cDevDocs" data-controller="devDocs.front.devDocs.main">
		{{foreach $catClass::roots() as $root}}
			<li>
				<h2>{$root->_title}</h2>
				{{if count($root->children())}}
					<ul class="ipsList_reset">
						{{foreach $root->children() as $child}}
							<li class="cDevDocs_closed">
								<h3 data-action="expandSection">{$child->_title}</h3>
								{{foreach $records as $record}}
									{{if $record->container()->_id == $child->_id}}
										<ul class="ipsList_reset">
											{{if $firstRecord == null}}
												{{$firstRecord = $record;}}
											{{endif}}
											<li>
												<a {{if $currentUrlPath === $record->url()->data['path']}}class="cDevDocs_active"{{endif}} href="{$record->url()}">
													{{if $record->customFieldDisplayByKey('shortened_title', 'raw')}}{$record->customFieldDisplayByKey('shortened_title', 'raw')}{{else}}{$record->_title}{{endif}}
												</a>
											</li>
										</ul>
									{{endif}}
								{{endforeach}}
							</li>
						{{endforeach}}
					</ul>
				{{endif}}
				<ul class="ipsList_reset">
					{{foreach $records as $record}}
						{{if $record->container()->_id == $root->_id}}
							{{if $firstRecord == null}}
								{{$firstRecord = $record;}}
							{{endif}}
							<li>
								<a {{if $currentUrlPath === $record->url()->data['path']}}class="cDevDocs_active"{{endif}} href="{$record->url()}">
									{{if $record->customFieldDisplayByKey('shortened_title', 'raw')}}{$record->customFieldDisplayByKey('shortened_title', 'raw')}{{else}}{$record->_title}{{endif}}
								</a>
							</li>
						{{endif}}
					{{endforeach}}						
				</ul>
			</li>
		{{endforeach}}
	</ul>
{{endif}}

{{if $recordClass and \IPS\cms\Pages\Page::$currentPage and (string) \IPS\cms\Pages\Page::$currentPage->url() == (string) \IPS\Request::i()->url()}}
	{{if $firstRecord}}
		{{\IPS\Output::i()->redirect($firstRecord->url(), '', 302);}}
	{{else}}
		{{\IPS\Output::i()->redirect(\IPS\Http\Url::internal(''), '', 302);}}
	{{endif}}
{{endif}}

Meddysong · August 6, 2017

1 hour ago, newbie LAC said:

9 hours ago, Meddysong said:

Do you have any idea what that means and what I need to do differently?

IPS changed the code

Ha, OK!

Still no luck -- at least it's a different error message this time, though!

Error: Call to a member function url() on null (0)
#0 /home/xxx/xxx/applications/cms/sources/Blocks/Block.php(302): IPS\Theme\class_content_template_for_block_->run(Array, 'babc2572b144a19...', NULL)
#1 [internal function]: IPS\cms\Blocks\_Block->getTemplate(Array, 'babc2572b144a19...', NULL)
#2 /home/xxx/xxx/system/Widget/Widget.php(233): call_user_func_array(Array, Array)
#3 /home/xxx/xxx/system/Content/Widget.php(388): IPS\_Widget->output(Array, 'babc2572b144a19...')
#4 /home/xxx/xxx/applications/cms/widgets/RecordFeed.php(309): IPS\Content\_Widget->render()
#5 /home/xxx/xxx/applications/cms/modules/front/pages/builder.php(112): IPS\cms\widgets\_RecordFeed->render()
#6 /home/xxx/xxx/system/Dispatcher/Controller.php(85): IPS\cms\modules\front\pages\_builder->previewBlock()
#7 /home/xxx/xxx/applications/core/modules/front/system/widgets.php(38): IPS\Dispatcher\_Controller->execute()
#8 /home/xxx/xxx/system/Dispatcher/Dispatcher.php(146): IPS\core\modules\front\system\_widgets->execute()
#9 /home/xxx/xxx/index.php(12): IPS\_Dispatcher->run()
#10 {main}

newbie LAC · August 6, 2017

27 minutes ago, Meddysong said:

Still no luck -- at least it's a different error message this time, though!

I edited my post. Try now

Meddysong · August 6, 2017

5 minutes ago, newbie LAC said:

I edited my post. Try now

That seems to do the trick, thank you

opentype · September 11, 2017

On 10.4.2017 at 3:40 PM, newbie LAC said:
{{$currentUrlPath = \IPS\Request::i()->url()->data['path'];}}

How do I prevent caching of the feed block so checking the page URL actually works?

I am currently playing with this concept of reading the page URL and using it in a Pages record feed block, but after one page load, the block gets cached for at least 60 seconds (ACP setting) and until that time the block doesn’t react to different record page URLs anymore.

newbie LAC · September 12, 2017

On 11.09.2017 at 10:22 AM, opentype said:

How do I prevent caching of the feed block so checking the page URL actually works?

I am currently playing with this concept of reading the page URL and using it in a Pages record feed block, but after one page load, the block gets cached for at least 60 seconds (ACP setting) and until that time the block doesn’t react to different record page URLs anymore.

You need to use not cached block or write a plugin

Kirill Gromov · September 18, 2017

On 06.08.2017 at 10:22 AM, newbie LAC said:

I edited my post. Try now

Hello, subcategories of the second level and below are not shown in this block..

newbie LAC · September 19, 2017

23 hours ago, Kirill Gromov said:

Hello, subcategories of the second level and below are not shown in this block..

Hello,

You will need use recursion.

Show all categories and it's articles in navigation (Pages)

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived

Recently Browsing 0 members

Upcoming Events

Trending Content