Pages - Flexible Columns and multiple pages

[Davyc]

The Pages app is a very powerful application but is hamstrung by inflexibility. We are restricted to three possible layouts; 1 column, 2 column and 3 column, but even these are rigid.  There is no scope to determine the widths of these columns, nor is there a way to stack them in different configurations.  This is not only incredibly limiting in terms of layout, but also in terms of flexibility.

It really shouldn't be that difficult to adapt what is already there and make it even more powerful.  For example, I would like to start of with a row based on three columns, each of a width determined as a percentage; those three columns adding up to 100%.  So I would like a column of 25%, another of 40% and a final column of 35% but if I change my mind I would like go back and alter those widths.  The next row could be made up of different widths to the first, and so on until the layout is complete.

I can do this in HTML by using CSS and example would be:

<div id="section-4" class="row fixed-bg bg-4">
<div class="column-group max-1200 scolor-1">
<div class="column padded column-30">
** Text and images go here **
<div class="column padded column-50">
** Text and images go here **
<div class="column padded column-20">
** Text and images go here **
</div>
</div>
</div>

And the CSS

.column-15 {
	width: 15%;
}
.column-20 {
	width: 20%;
}
.column-25 {
	width: 25%;
}
.column-30 {
	width: 30%;
}
.column-33 {
	width: 33.3334%;
}
.column-35 {
	width: 35%;
}
.column-40 {
	width: 40%;
}
.column-45 {
	width: 45%;
}
.column-50 {
	width: 50%;
}
.column-55 {
	width: 55%;
}
.column-60 {
	width: 60%;
}
.column-65 {
	width: 65%;
}
.column-70 {
	width: 70%;
}
.column-75 {
	width: 75%;
}
.column-80 {
	width: 80%;
}
.column-85 {
	width: 85%;
}

The above is just a rough guide as to how this can be achieved and if it could be adapted to the Pages application it would elevate it way above where it stands now in terms of flexible layouts.

The other issue is one that has been mentioned a number of times in these forums and that is the ability to span an article across several pages rather than be lumped all into one single page.  This would also lift the Pages app to another level.  These two improvements would make the Pages app an awesome addition to anyone's site and would bring it in line with what the application should be delivering.  I am sure that the developers could achieve this with minimal effort as building a page with these options in an HTML environment can takes less than a few minutes.

Thanks for looking this over.

Edited March 3, 2021 by Davyc
Spelling - again lol

[xtech]

The problem with this is that IPS is using an early and very old version of bootstrap beneath their framework. 

They should update it. While they don't do it, just use an any other library.

[Sonya*]

41 minutes ago, Davyc said:

We are restricted to three possible layouts; 1 column, 2 column and 3 column, but even these are rigid. 

You are actually not. Create a new page template (Page Builder), e. g. with following code:

<div>
	<div class='ipsGrid ipsGrid_collapsePhone'>
		<div class='ipsGrid_span3'>
			{template="widgetContainer" group="pages" app="cms" params="'col1', $widgets, 'vertical'"}
		</div>
		<div class='ipsGrid_span3'>
			{template="widgetContainer" group="pages" app="cms" params="'col2', $widgets, 'vertical'"}
		</div>
		<div class='ipsGrid_span3'>
			{template="widgetContainer" group="pages" app="cms" params="'col3', $widgets, 'vertical'"}
		</div>
      		<div class='ipsGrid_span3'>
			{template="widgetContainer" group="pages" app="cms" params="'col4', $widgets, 'vertical'"}
		</div>
	</div>
  <div class='ipsGrid ipsGrid_collapsePhone'>
		<div class='ipsGrid_span6'>
			{template="widgetContainer" group="pages" app="cms" params="'col5', $widgets, 'vertical'"}
		</div>
		<div class='ipsGrid_span6'>
			{template="widgetContainer" group="pages" app="cms" params="'col6', $widgets, 'vertical'"}
		</div>
	</div>
</div>

This would give you four columns in the first line and two columns in the second line. Change ipsGrid_spanX to whatever you like, and you have a flexible layout. Or play with columns instead of grid. 

[Davyc]

25 minutes ago, Sonya* said:

You are actually not. Create a new page template (Page Builder), e. g. with following code:

Correct - but we shouldn't have to build new page templates, and not everyone is up to doing this, so whilst you are correct I am asking for something out of the box and not having to make new templates.  I can do this myself, but I am asking on behalf of those who can't 🙂

 

[Matt]

We definitely want to bring this kind of functionality to Pages. It's high on our list.

[Jordan Miller]

6 hours ago, Davyc said:

I can do this myself, but I am asking on behalf of those who can't 🙂

🥲 Appreciate that @Davyc!!

[kmk]

On 3/3/2021 at 6:30 AM, Davyc said:

not everyone is up to doing this, so whilst you are correct I am asking for something out of the box and not having to make new templates.  I can do this myself, but I am asking on behalf of those who can't 🙂

Thanks you so much for your understanding of this Mayority users needs... Because IPS say us... Hey focus on how to create content that will the key to build your community... So why hundres of us (or just me) have to spend time to search and ask for solution to resolve something so so so little UI issues (someones may say, just do this or that will resolve it, is so easy just search en the community and learn how to do, then you find your own way....), same situation with 3party apps, we have to spend a lot time to explain and elaborate to report bugs or sometimes just a minimum css issue (from coder view).... 

As IPS forum follower we can say FB is bad because that and others, bu why mayority people love it (maybe other mayority people don't like it) and FB continue growing?... Out of the box, people just manage it to create content and focus their business, they don't want spend time to say to you... Hey, why so much white space, hey there a bug, hey some UI os ugly or tricky... I have to spend so much time to visit to marketplace to see if some new to make my forum better look or better skills..we already have a company with so good developers and coders of community to help so much.. But then I have to spend so much time to collaborate reporting bugs and suggestions or request.... Finally I learned, try to use what you have now (whatever with so many issues that you don't like it) and spend time on your business, spend a little time to check if there borned some better solutions or platforms...

So thank so much @Davyc

[Davyc]

One of the things I find so frustrating is when I'm not sure how to achieve something I look to the help documents and they are anything but helpful - a great lack of real world examples are missing.  It's good to explain how things work, but it's something else to actually 'show' how they work; I guess it's one of those 'lead by example' situations.  

I understand that creating help documents is the not easiest of tasks, but they should begin with the least experienced in mind rather than an assumption that everyone knows how.  Maybe this is something that @Jordan Invision can feed back to whoever is responsible for creating the help documents 🙂

 

On 3/3/2021 at 12:43 PM, Matt said:

We definitely want to bring this kind of functionality to Pages. It's high on our list.

That is music to my ears @Matt so thank you for letting us know that this is on your radar and something that will be coming to the suite 🙂 

[Jordan Miller]

4 hours ago, Davyc said:

One of the things I find so frustrating is when I'm not sure how to achieve something I look to the help documents and they are anything but helpful - a great lack of real world examples are missing.  It's good to explain how things work, but it's something else to actually 'show' how they work; I guess it's one of those 'lead by example' situations.  

I understand that creating help documents is the not easiest of tasks, but they should begin with the least experienced in mind rather than an assumption that everyone knows how.  Maybe this is something that @Jordan Invision can feed back to whoever is responsible for creating the help documents 🙂

 

That is music to my ears @Matt so thank you for letting us know that this is on your radar and something that will be coming to the suite 🙂 

I like where your head is at! 

We actually are embarking on a lot of projects like this, including video content where we explain the emotion of "why" a community leader would do XYZ, and also show an example. The first video will be out very, very soon. They will get better as we move forward and get feedback. 🙂