How to make IPS4 "Release Notes" ?!

Angus90 · July 25, 2015

Currently i'm trying to do the first steps with the pages app and I want to be honest ... at the moment I´m quite overwhelmed

I really like the style of the IPS4 "Release Notes" page and want to use this as well. But I have no Idea how to build a page like this. Is there anybody who can help me or is able to give a hint?

Josh Avila · August 7, 2015

I'd like to know as well.

GriefCode · August 7, 2015

Support for this, would be also interested, since I'm also an active developer and release my hosting system, only don't spend yet the time to create a release system

Adriano Faria · August 7, 2015

Rikki already posted this somewhere.

Ausy · August 7, 2015

Is this it?

Ralf Herrmann · August 7, 2015

Is this it?

Yes.

Apart from this customized output, it’s really just a standard Pages database. We will have documentation articles for setting these up shortly.

But such customized databases are not very suitable for tutorials. If you know how to code the necessary HTML/PHP/JS, you don’t need the tutorials. And if you don’t know it, it’s probably too complicated for you anyway to work with the tutorial. It’s better to focus on the stock functionalities all IPS customers can use.

GriefCode · August 14, 2015

Well I just tried now to set that up, since i didnt made a lot with IPBoard custimization yet, it took me some time.

However, i dislike the fact that im unable to create at templates a custom "Category Articles" which would be actually required and recommend for using such a table.
Or I'm blind, but I can copy only 4 various templates.
I tried it before using categories but just messed to far up with various points, mainly looping through the arrays (i never worked with smarty :|)

I got a workaround, but it sucks, im checking for the database id's and have overwritten the default category articles.

Is it planned to be added soon @Ralf Herrmann? Also to custimze it for general others bases, not only the release notes in that case.

Ralf Herrmann · August 14, 2015

I’m sorry, I am not understanding your problems/question.

GriefCode · August 14, 2015

The issue is, that the Release Notes are made with the 'Category Articles' from the IP.Content system. But this is not available for custimization, you cannot create a new database template for that.

Im wondering if that is planned for the future?

Ralf Herrmann · August 14, 2015

All database views from Pages are created with customizable templates. The one which is called “Category Articles” in the database settings can be created in the template manager as “Feature Records”.

(I admit, the naming could probably be improved to make the connection more clear)

GriefCode · August 14, 2015

Well thanks for your reply.

I had issues finding that, it would be good to enhance the names as you noted. However the description is fine, but also in some way difficult to understand:

- First page when viewing the database

- First page when viewing a database set to show featured articles

However, this is only a small part (only language), thanks for your help.

Ralf Herrmann · August 14, 2015

The database views are explained in this article.

That should help in understanding the the different ways to show a database, and in turn what can be changed through the corresponding templates.

GriefCode · August 14, 2015

Thanks again for the reply.

I will read through that, however, i made it:

https://gamers.host/release_notes/

GriefCode · August 14, 2015

Since i got asked directly, i will post my version of release notes here.

However, please keep in mind im newly creating and working with IPBoard and i definitly hate smarty :-)
Im more stucked to twig or writing my own template engine.

So if you see something which can be enhanced, feel free to let me know and i will update the post.

Database setup:

Create a new database:

Name: Release Notes
Use categories: No
Database Index: Show records like articles
Sort By: Publish date
Order: DESC
Database_key: release_note

Languages: simply the terminus 'release notes' in all required varies.
Options: I disabled them all
Forum: disabled

For permission, may set that all can view records, but only the accessable persons can edit/create new notes.

Included Files:

JS: As described in the following post, add this javascript code:

CSS: Same way as the JS file, except choosing CSS, with the following content:

.cRelease .ipsType_sectionHead {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 5px;
    font-weight: 500;
}

.cReleaseColumn {
    padding-right: 0;
}

.cRelease {
    display: block;
    padding: 15px 0 15px 15px;
    border-top: 2px solid rgba( 0,0,0,0.075);
    color: inherit;
}

.cRelease_active {
    background: #fff;
    border-color: transparent;
}

li:first-child > .cRelease, .cRelease_active + .cRelease {
    border-color: transparent;
}

Template:

Create a new database template with the type 'Featured Records' and assign it directly to the Releases database. May name it 'Releases'.
Create a new database template with the type 'Record' and assign it directly to the Releases database. May name it 'Releases'.

Now search the newly created Releases/index html file and add the following content:

<div class='ipsPageHeader ipsClearfix ipsSpacer_bottom'>
  <div class="ipsType_center ipsSpacer_bottom ipsSpacer_top">
    <h1 class="ipsType_veryLarge ipsType_reset">Release Notes</h1>
    <div class="ipsType_richText ipsType_large ipsType_light ipsSpacer_bottom">
      Changelogs for each release of Gamers Host System
    </div>
    <div class="ipsResponsive_noFloat ipsResponsive_hidePhone">
      {template="follow" app="core" group="global" params="'cms','categories' . $database->_id, $database->_id, \IPS\cms\Records::containerFollowerCount( $database )"}
    </div>
  </div>
</div>

<div class="ipsAreaBackground ipsPad_half" data-baseurl="{$url}" data-resort="listResort" data-controller="core.global.core.table">
  <div class="ipsAreaBackground_reset ipsColumns ipsColumns_collapsePhone" data-controller="pages.front.releaseNotes.main">
    <div class="ipsColumn ipsColumn_wide ipsAreaBackground cReleaseColumn" data-role="releases">
      <ol class="ipsDataList ipsDataList_zebra ipsClear cCmsListing " id="elTable_87f52a9c1dd7e2abbe957f7a2f810811" data-role="tableRows">
        {{foreach $articles as $id => $record}}
        <li class="cCmsRecord_row" data-rowid="{$id}">
          <a href="{$record->url()}" class="cRelease" data-releaseid="{$id}">
            <h3 class="ipsType_sectionHead ipsType_break">
              {$record->_title}
            </h3>
            <div class="ipsDataItem_meta">
              <span class="ipsType_light">
                <em>
                  {{if $record->customFieldDisplayByKey('status', 'listing') == "Published"}}
                  Released {$record->customFieldDisplayByKey('date', 'listing')|raw}
                  {{else}}
                  In Development
                  {{endif}}
                </em>
              </span>
            </div>
          </a>
        </li>
        {{endforeach}}
      </ol>
    </div>
    <div class="ipsColumn ipsColumn_fluid">
      <div data-role="releaseInfo" class="ipsPad_double" id="ips_uid_2" style="height: auto;">
      </div>
    </div>
  </div>
</div>

Repeat this step for the 'record' named template:

<div class='ipsClearfix'>
  	{{if $record->canEdit()}}
		  <a href='{$record->url('edit')->csrf()}' title='{lang="edit"}' class="ipsPos_right ipsButton ipsButton_light ipsButton_verySmall">{lang="edit"}</a>
	{{endif}}
    <h1 class='ipsType_pageTitle ipsType_largeTitle ipsType_break'>
        Gamers Host System Release {wordbreak="$record->_title"}
    </h1>
    <p class="ipsType_reset ipsType_large">Released  {$record->customFieldDisplayByKey('date', 'listing')|raw}</p>
</div>

<hr class='ipsHr'>	
<article class='ipsContained ipsSpacer_top'>
	<div class='ipsClearfix'>
		{{if $record->record_image}}
			<div class="cCmsRecord_image">
				<img class="ipsImage" src="{file="$record->record_image" extension="cms_Records"}">
			</div>
		{{endif}}

		<section class="ipsType_richText ipsType_normal" data-controller='core.front.core.lightboxedImages'>{$record->_content|raw}</section>
	</div>
		
	<hr class='ipsHr ipsClear ipsClearfix'>
</article>

Adjust database:

Now we need to create the newly required fields for our database.

Create a new Field "status" as "select box" with the following fields:
- key: in_dev, Value: In Development
- key: pub, Value: Published
- Default Value: in_dev
- Display Options:
  - template key: "status"
  - lisiting view format: no formatting
  - display view format: no formatting
Create a new Field "Publish Date"
- Type: date
- set fixed timezone to your timezon
- Display Options:
  - template key: "date"
  - lisiting view format: no formatting
  - display view format: no formatting

Page:

Now create a new Page called "Release Notes".

Include the created CSS & JS file.

Set content to the created database (should be visible at the right, just click it).

Set the title.

Permissions should be set that everyone can access the page.

That should be it, i dont have things like security patch or current release, since its not required for my system.

I would like to have a suggestion for this part:

{{if $record->customFieldDisplayByKey('status', 'listing') == "Published"}}

I would like to check against the key instead of the value.

I hope that help for some people who also want the release notes already.

Marcher Technologies · August 15, 2015

You might find this useful in getting to grips with the IPS4 template engine:

Derpity · August 17, 2015

How is the current release field set up? Trying to get it to make that record active on page load....

GriefCode · August 17, 2015

How is the current release field set up? Trying to get it to make that record active on page load....

You may want to feature one release, which is possible, then check against this in the template, and rendere there a 'Current Release' label.

Its the easiest way i guess, since its not able to set global fields which are not related to records.
Of course that would require to unfeature other releases.

For me that wasn't required since i dont need that module, when i should have time, I could look into it and expand my previous post.

Derpity · August 17, 2015

You may want to feature one release, which is possible, then check against this in the template, and rendere there a 'Current Release' label.
Its the easiest way i guess, since its not able to set global fields which are not related to records.
Of course that would require to unfeature other releases.
For me that wasn't required since i dont need that modules, when i should have time, I could look into it.

its already setup to look for a currentRelease field. In the javascript file provided there is:

var showFirst = this.scope.find('[data-role="releases"] [data-currentRelease]');

if( !showFirst.length ) {
	showFirst = this.scope.find('[data-role="releases"] [data-releaseID]').first();
}

if( showFirst.length ){
	showFirst.click();
}

Just not sure where i would need to define the data-currentRelease

GriefCode · August 17, 2015

its already setup to look for a currentRelease field. In the javascript file provided there is:
var showFirst = this.scope.find('[data-role="releases"] [data-currentRelease]');

if( !showFirst.length ) {
	showFirst = this.scope.find('[data-role="releases"] [data-releaseID]').first();
}

if( showFirst.length ){
	showFirst.click();
}
Just not sure where i would need to define the data-currentRelease

Well, i didnt look into the javascript code :-)

However, this is only the idea of displaying the current release at the time, else it would pick the first release as general.
My suggestion has still not changed, render the "data-currentRelease" with the check against a featured release.

Derpity · August 17, 2015

Well, i didnt look into the javascript code :-)
However, this is only the idea of displaying the current release at the time, else it would pick the first release as general.
My suggestion has still not changed, render the "data-currentRelease" with the check against a featured release.

Yeah i could do it that way... thanks though!

NoGi · August 17, 2015

I thought in a previous thread IPS said that they were going to include this as a template soon?

GriefCode · August 18, 2015

I thought in a previous thread IPS said that they were going to include this as a template soon?

They did, indeed.

However, since im rebuilding after a data loss my whole community and pages / application, i wanted to start with that.
This is why i included it now. However, once the template is released i will switch to that, which shouldnt be an issue, just copy pasting :-)

GriefCode · August 21, 2015

Yeah i could do it that way... thanks though!

I have done it that way now, but i actually dont like it that much:

https://gamers.host/release_notes/

I probably did it by locking the current release, since there arent anyway comments and reviews possible:

              <a href="{$record->url()}" class="cRelease" data-releaseid="{$id}" 
                  {{if $record->mapped('locked')}}
                   data-currentRelease
                  {{endif}}
              >
                <h3 class="ipsType_sectionHead ipsType_break">
                  {$record->_title}
                  {{if $record->mapped('locked')}}
                      <span class="ipsBadge ipsBadge_positive" data-ipstooltip="" _title="This is the most current available release">Current Release</span>
                  {{endif}}
                </h3>

This requires to unlock older releases and always lock the latest current release.

Thats a way, but not the best for sure.

Derpity · August 21, 2015

I have done it that way now, but i actually dont like it that much:

https://gamers.host/release_notes/

I probably did it by locking the current release, since there arent anyway comments and reviews possible:

              <a href="{$record->url()}" class="cRelease" data-releaseid="{$id}" 
                  {{if $record->mapped('locked')}}
                   data-currentRelease
                  {{endif}}
              >
                <h3 class="ipsType_sectionHead ipsType_break">
                  {$record->_title}
                  {{if $record->mapped('locked')}}
                      <span class="ipsBadge ipsBadge_positive" data-ipstooltip="" _title="This is the most current available release">Current Release</span>
                  {{endif}}
                </h3>

This requires to unlock older releases and always lock the latest current release.

Thats a way, but not the best for sure.

I did it a bit differently. I just created a select box with yes or no, then assign the latest to yes. And

{{if $record->customFieldDisplayByKey('current', 'listing') == "Yes"}}
    <a href="{$record->url()}" class="cRelease" data-releaseid="{$id}" data-currentRelease="">
{{endif}}

But i have another question for you. If i were to use categories, what would be the best way to make the categories as tabs on top of the notes, kind of like the custom projects / providers page here on this forums

GriefCode · August 21, 2015

I did it a bit differently. I just created a select box with yes or no, then assign the latest to yes. And
{{if $record->customFieldDisplayByKey('current', 'listing') == "Yes"}}
    <a href="{$record->url()}" class="cRelease" data-releaseid="{$id}" data-currentRelease="">
{{endif}}
But i have another question for you. If i were to use categories, what would be the best way to make the categories as tabs on top of the notes, kind of like the custom projects / providers page here on this forums

Definitly a way, but im to lazy to add an additional field when there is already one :-)

A good question, because i was wondering that for myself as well already.
I have up to 4 projects which are differently released ( Hosting application, statspage, web application, chat system ). So I already did some ideas to that.

In fact my easiest solution is working with tags.
You could create 4 tags in different colors and render them additional on the release tab. That wold work and you could just create it as radio selection to get the specific release project.

Having a top menu for switching bring up some issues:

Its a pain to make a tabbed content responsive. IPS decided to make a tab converted to a dropdown, easy and nice solution
You need to rewrite the JS part in many ways, reloading of the releases, rendering etc.
It is not that easy to read, you have a top menu, a tab bar and a side tab menu selection, i see various issues loosing control of the site.
Im working with a simply way for my web applications, if you cannot understand a page in 5 seconds, you made something wrong. And i really think this will happen there, its not recommend in my eyes.

I could list some more, but this are the core things from my view.

Im not sure what you think about that now, let me know if the solution with the tags would be a solution for not growing the whole release notes too much. If not i might come up with some more ideas, but i would need to read through some things first.

Regards

Invision Community 4: A more professional report center

Invision Community 5: A video walkthrough creating a custom theme and homepage

Invision Community 5: Page Builder

Invision Community 5: Editor Permissions and Custom Embeds

How to make IPS4 "Release Notes" ?!

Recommended Posts

Angus90

Josh Avila

GriefCode

Adriano Faria

Ausy

Ralf Herrmann

GriefCode

Ralf Herrmann

GriefCode

Ralf Herrmann

GriefCode

Ralf Herrmann

GriefCode

GriefCode

Marcher Technologies

Derpity

GriefCode

Derpity

GriefCode

Derpity

NoGi

GriefCode

GriefCode

Derpity

GriefCode

Archived

Recently Browsing 0 members

More