PAGES - Confused by IPB & the staff

[Ralf Herrmann]

I know the saying - "when its ready" - anyway - could you give a closer estimate on the timeframe for the documentation? This month?

As in the past, individual articles will be published when they are ready. There won’t be a single day when we release a complete documentation which covers everything at once. 

[Misi]

 

I know the saying - "when its ready" - anyway - could you give a closer estimate on the timeframe for the documentation? This month?

 

 

IPB4 is changing constantly, hard to make documentation for a not fully  ready product.

When it will be ready then they can work on the documentation.

 

[Tibory]

Just an question -

I am still getting a red </section> at the bottom with this code

<section class='ipsType_normal ipsSpacer_both'>
	{{if count($articles)}}
  <div class='ipsGrid ipsGrid_collapsePhone'>
		{{foreach $articles as $id => $record}}
    {{if ($id == 0)}} <div class='ipsGrid_span12'>
    {{else}}<div class='ipsGrid_span6'>
    {{endif}}
			{template="entry" app="cms" location="database" group="article_grid" params="$record, $database"}
    </div>
		{{endforeach}}
    </div>
	{{endif}}
</section>

Any idea why?

[Ralf Herrmann]

Just an question -

I am still getting a red </section> at the bottom with this code

<section class='ipsType_normal ipsSpacer_both'>
	{{if count($articles)}}
  <div class='ipsGrid ipsGrid_collapsePhone'>
		{{foreach $articles as $id => $record}}
    {{if ($id == 0)}} <div class='ipsGrid_span12'>
    {{else}}<div class='ipsGrid_span6'>
    {{endif}}
			{template="entry" app="cms" location="database" group="article_grid" params="$record, $database"}
    </div>
		{{endforeach}}
    </div>
	{{endif}}
</section>

Any idea why?

The code is technically correct, but the system probably doesn’t understand that there are two DIVs in the IF/ELSE clause, which will only output one.

It could be optimized by using just one DIV there and the IF/ELSE clause only for the class. 

 

[Tibory]

The code is technically correct, but the system probably doesn’t understand that there are two DIVs in the IF/ELSE clause, which will only output one.

It could be optimized by using just one DIV there and the IF/ELSE clause only for the class. 

 

So how would you suggest I change it?

also

http://i.imgur.com/99fv72E.png?1 

on the picture - the bottom left box is indented for no reason.

[Loren]

So how would you suggest I change it?

also

http://i.imgur.com/99fv72E.png?1 

on the picture - the bottom left box is indented for no reason.

You have 3 div opens and only 2 closes. You need another </div>.

[Tibory]

You have 3 div opens and only 2 closes. You need another </div>.

Any particular place?

[Loren]

Any particular place?

Probably before the last endif,

[GrooveOnBeat]

Find:

{{if ($id == 0)}} <div class='ipsGrid_span12'>
    {{else}}<div class='ipsGrid_span6'>
    {{endif}}
    
Replace with:
    
<div class='{{if ($id == 0)}}ipsGrid_span12{{else}}ipsGrid_span6{{endif}}'>

 

Edited August 6, 2015 by GrooveOnBeat

[craigf136]

How easy is it to change the grid layout to 3 x 3?

i currently have it in grid view for database but it's 2x2

[Ralf Herrmann]

How easy is it to change the grid layout to 3 x 3?

You mean with the code discussed here in the last posts? Very easy. 

The grid system is based on 12 units, therefore the “ipsGrid_span12” for a full-width entry. For the 2x2 the example uses two times half that value: 6. 
If you want 3 entries per line, you just use 12 divided by 3, which is 4. So replace the ipsGrid_span6 with ipsGrid_span4 and you got 3 entries per line. 

[craigf136]

You mean with the code discussed here in the last posts? Very easy. 

The grid system is based on 12 units, therefore the “ipsGrid_span12” for a full-width entry. For the 2x2 the example uses two times half that value: 6. 
If you want 3 entries per line, you just use 12 divided by 3, which is 4. So replace the ipsGrid_span6 with ipsGrid_span4 and you got 3 entries per line. 

Champion, thanks Ralph.

[Tibory]

For some reason, after the main article that appears at the top I seem to get an indent on the others...any idea why?

@Ralf Herrmann - Have you got any idea on this?

Edited August 8, 2015 by Tibory

[xert77]

For some reason, after the main article that appears at the top I seem to get an indent on the others...any idea why?

@Ralf Herrmann - Have you got any idea on this?

Nice work, this is already looking amazing! Hope you get the indent sorted, I think someone above had a similar issue (might be wrong though)

[craigf136]

I have a bit of an issue with the above information for grid view. 

Essentially all I have done is remove/paste what is above and change the ipsGrid_span6 to ipsGrid_span4. It works but I have layout issues.

• Firstly I need to truncate the title, how do we do this? I know it's related to here, but unsure how to?

• 	<h1 class='ipsType_pageTitle'>{$database->_title}</h1>
  	{{if $database->_description}}
  		<div class='ipsPageHeader_info ipsType_light'>
  			{$database->_description}
  		</div>
  	{{endif}}
  

• Secondly the grid is all over the shop (was OK at 6 videos) then added a couple more and the last video added has caused issues due to title size I believe.
• "Show All Categories" when selected show's a white page, however, click on the category with the video and the list appears.

https://i.gyazo.com/2bab51b0ab52dd78ee6150e582f61a96.png

Copy of my template index.

<div class='ipsPageHeader ipsClearfix ipsSpacer_bottom'>
	{{if $database->use_categories}}
	<div class='ipsPos_right ipsResponsive_noFloat'>
		<a href="{$url->setQueryString('show', 'categories')}" class="ipsButton ipsButton_medium ipsButton_fullWidth ipsButton_link"><i class="fa fa-folder-open"></i> {lang="cms_show_categories"}</a>
	</div>
	{{endif}}
	<h1 class='ipsType_pageTitle'>{$database->_title}</h1>
	{{if $database->_description}}
		<div class='ipsPageHeader_info ipsType_light'>
			{$database->_description}
		</div>
	{{endif}}
</div>

{{if $database->can('add') or \IPS\Member::loggedIn()->member_id}}
	<ul class="ipsToolList ipsToolList_horizontal ipsClearfix ipsSpacer_both ipsResponsive_hidePhone">
		{{if $database->can('add')}}
			<li class='ipsToolList_primaryAction'>
				<a class="ipsButton ipsButton_medium ipsButton_important ipsButton_fullWidth" {{if $database->use_categories}}data-ipsDialog="1" data-ipsDialog-size="narrow" data-ipsDialog-title="{lang="cms_select_category"}"{{endif}} href="{$url->setQueryString( array( 'do' => 'form', 'd' => \IPS\cms\Databases\Dispatcher::i()->databaseId ) )}">{lang="cms_add_new_record_button" sprintf="$database->recordWord( 1 )"}</a>
			</li>
		{{endif}}
	</ul>
{{endif}}

<hr class='ipsHr'>
<section class='ipsType_normal ipsSpacer_both'>
{{if count($articles)}}
    <div class='ipsGrid ipsGrid_collapsePhone'>
		{{foreach $articles as $id => $record}}
            <div class='ipsGrid_span4'>
			{template="entry" app="cms" location="database" group="Videos" params="$record, $database"}
            </div>	
    {{endforeach}}
    </div>
  {{endif}}
</section>
{{if $database->featured_settings['pagination'] and ( $pagination['pages'] > 1 )}}
	{template="pagination" app="core" location="global" group="global" params="$url, $pagination['pages'], $pagination['page'], $database->featured_settings['perpage'], TRUE, 'page'"}
{{endif}}

Any help would be appreciated.

Edited August 9, 2015 by craigf136

[Jujuwar]

For some reason, after the main article that appears at the top I seem to get an indent on the others...any idea why?

@Ralf Herrmann - Have you got any idea on this?

I don't know how GridLayout should work, but here the reason of this :

The first ipsGrid_span6 after the ipsGrid_span12 has this style :

html[dir="ltr"] .ipsGrid_span12:nth-child( 1n ), html[dir="ltr"] .ipsGrid_span12 + [class*="ipsGrid_span"], html[dir="ltr"] .ipsGrid_span6:nth-child( odd ), html[dir="ltr"] .ipsGrid_span4:nth-child( 3n+1 ), html[dir="ltr"] .ipsGrid_span3:nth-child( 4n+1 ), html[dir="ltr"] .ipsGrid_span2:nth-child( 6n+1 ), html[dir="ltr"] .ipsGrid_span1:nth-child( 12n+1 ) {
    margin-left: 0;
}

and the others have this :

html[dir="ltr"] .ipsGrid > [class*="ipsGrid_span"] {
    float: left;
    margin-left: 2.127659574468085%;
}

 

[chilihead]

And regarding the grid view for article listings: while that is not a default option, it only needs a small template change, since a responsive grid is already in the CSS. 

So to have a grid view for articles:

1. Add a custom database template in the Pages’ template manager. Make sure it’s of the type “Featured Records”. Also make sure you assign it to your article database. Also call it “Article Grid” (that name is later used in the code). 

2. Open the “index” template of this newly created template group. 

Replace this part:

{{if count($articles)}}
		{{foreach $articles as $id => $record}}
			{template="entry" app="cms" location="database" group="article_grid" params="$record, $database"}
    {{endforeach}}
{{endif}}

With this:

{{if count($articles)}}
    <div class='ipsGrid ipsGrid_collapsePhone'>
		{{foreach $articles as $id => $record}}
            <div class='ipsGrid_span6'>
			{template="entry" app="cms" location="database" group="article_grid" params="$record, $database"}
            </div>	
    {{endforeach}}
    </div>
  {{endif}}

That’s it. Your articles are now displayed as a grid which automatically collapses on smaller screen. 

And a bonus for all those who want the 2x1x1 layout from 3.4 – use this instead:

{{if count($articles)}}
    <div class='ipsGrid ipsGrid_collapsePhone'>
		{{foreach $articles as $id => $record}}
            {{if ($id == 0)}} <div class='ipsGrid_span12'>
            {{else}}<div class='ipsGrid_span6'>
            {{endif}}
			{template="entry" app="cms" location="database" group="article_grid" params="$record, $database"}
            </div>	
        {{endforeach}}
    </div>
{{endif}}

 

This is a good example of why I'd like to be able to highlight/mark posts, not just follow topics! Like marking as "Favorite."

For now, I will just quote it for later, thanks.

Edited August 9, 2015 by chilihead

[wmarcy]

This is a good example of why I'd like to be able to highlight/mark posts, not just follow topics! Like marking as "Favorite."

For now, I will just quote it for later, thanks.

Chilihead, check out my subscription system at sedonconnect.com, it does exactly that. 

[Joel R]

This is a good example of why I'd like to be able to highlight/mark posts, not just follow topics! Like marking as "Favorite."

For now, I will just quote it for later, thanks.

Have you seen Bookmarks by @ipsrocks?

[ABGenc]

For some reason, after the main article that appears at the top I seem to get an indent on the others...any idea why?

@Ralf Herrmann - Have you got any idea on this?

You are not alone

https://community.invisionpower.com/topic/417791-pages-confused-by-ipb-the-staff/?do=findComment&comment=2566236b

Nice work, this is already looking amazing! Hope you get the indent sorted, I think someone above had a similar issue (might be wrong though)

It was me and I was not able to get any answer ..

[Tibory]

I've managed to fix the indent issue but I now can't seem to put a clear separation between the left and right articles they seem to but touching. Is there anyways to add a gap between these?

[bradl]

I've managed to fix the indent issue ...

It would be a kindness to share how, exactly, for those who have not yet managed to find the correct implementation

[craigf136]

Does this help?

https://community.invisionpower.com/topic/417791-pages-confused-by-ipb-the-staff/?do=findComment&comment=2565963

 

[bradl]

Using ipsPad made it worse, although it did lead me to retry setting margin to zero one more time— which I thought I'd already tried nine times.

{{else}}<div class='ipsGrid_span6' style="margin-left:0;min-height:350px">

Tx.

[craigf136]

I'm having issue caused by the topic titltes, and tags (removed, so not visible in image below), how easy is it to truncate tags and title? That would resolve my problem.

 

Edited August 30, 2015 by craigf136