Developer forum

Forum » Swift » Intro content on rows

Intro content on rows

Adrian Ursu Dynamicweb Employee
Adrian Ursu
Reply

Hi guys,

Sometimes we have to add some content before the columns of a row.

This is particularly difficult when having to group the content and the columns under the same background.

In the past, we have accomplished this by adding an "Intro" group of properties to the rows: Heading, Subheading and an HTML editor.

Now that Swift plans to stay, it would be good to have this feature included in Swift rather than creating custom rows for our projects. Especially because Rows are building blocks of the entire page.
And to illustrate what I need to accomplish, I have attached an image.

Thank you,

Adrian

intro-row.png

Replies

 
Nicolai Pedersen
Reply

You can do that on the column already. We do not want rows to contain content - only layout.

But there might be smaller adjustments to the current concept to cover all the needs, so examples like your attachment is very welcome!

Screenshot_2021-08-17_114619.png
 
Adrian Ursu Dynamicweb Employee
Adrian Ursu
Reply

Hi Nicolai,
I agree that my case can be set up with 2 separate rows.

But this can happen only if the background (and specifically a backgroundimage) is not supposed to cover 2 rows.

Even with custom css it would be hard to apply a continuous background image to cover 2 rows.

I understand the separation (leave content out of the Rows) but it might become a limitation on the long run.

I have also noticed that there is no Background image option on the rows. Is this something that will be added lately or you plan on moving this approach to custom css completely?

Thank you,

Adrian

 
Nuno Aguiar Dynamicweb Employee
Nuno Aguiar
Reply

We constantly come across the same limitation.

I believe in the long run the real solution is the rows within columns. Even if we're limited to a depth of 3, allowing for a more flexible layout builder turns these issues (and others) more easilly solvable.

 
Nuno Aguiar Dynamicweb Employee
Nuno Aguiar
Reply

(btw we don't solve for the background image in a nice way. Either we change the customer's mind, or build some custom row, or build some custom css/js for it tied to those ID's)

 
Adrian Ursu Dynamicweb Employee
Adrian Ursu
Reply

Yeah. We usually do the same thing.

But this "Intro" approach I have seen in another Danish CMS using a custom Theme provider that did a pretty good job at customizing it from options.

And it is very useful and explicit for the user.

We have actually used it on our Rapido version (customized, of course) and it worked pretty well. And it's even easier now with Bootstrap 5 than it was in Rapido.

I have actually edited my Swift version to include it and it looks ok. I have basically added another field of type Text that handles the Intro content.

If you want to see it in action, you can have a look at: <!--removed-->

Adrian

 


 

 
Nicolai Pedersen
Reply

Guys - all of it is too complex.

@Adrian - my example uses one column in one row. We did make it so the subheading can be over the heading already.

@Nuno - rows in rows will be a platoria of complexity. And there is no need to do all of that - only if you want the system to do all kinds of designs, instead of do what is possible. Some poor editor some where has to be able to set it up without being a graphic designer and understand rows and columns and think like a math book :-).

Rows will have background images soon - a big whish.

This new way of handling content that is part of Swift with simple building blocks makes it very simple for you to add all the fields and options to rows and create your own versions of columns that can have 100 fields and settings if you want. But that is not what you will see coming from us - the focus is to balance ease of content authoring with design and layout options that most people, also non-tech, can understand relative fast.

 
Adrian Ursu Dynamicweb Employee
Adrian Ursu
Reply

Hi Nicolai,

I understand your approach and I agree with it.

I should definitely cover more than 80% of the uses cases.

And It is clear to me that if we want to honor the 20% of use cases not covered, we'll have to handle it on our own.

For us, it is important to understand what we should expect from you and what needs to be handled on our end so that we can focus our efforts in the right direction.

That being said, I will keep posting requests based on our use cases and it is totally fine if you won't agree with including them in the official releases :)

Thank you

Adrian

 
Nuno Aguiar Dynamicweb Employee
Nuno Aguiar
Reply

Hi Nicolai,

 

I understand the goal to make it simple and understandable and I agree that if easy to get into a trap to make it complex, but I believe we can find a good compromise.

 

We're constantly put against the wall (from Sales team to Development team) as to why we can't yet to this as easilly as our competitors.

This is a vague statement to say the least and has been getting better since Rapido 3.2 and now Swift, where setting paddings and (more recently) rows and columns make these conversations easier.

 

I still dream of a way we can build a layout using the visual editor, that allow us to create some scenarios, that are not that far fetched, in a simple way. i.e.https://www.screencast.com/t/9fjKGTzav (www.dukal.com - near the footer). For now we customize of course.

 

 

Best Regards,

Nuno Aguiar

 
Nicolai Pedersen
Reply

I hear you, but currently we are not making a design tool. We are not doing photoshop. It will be easier for you to do the rows and column markup instead. We already have too many options on columns in Swift to avoid creating 'ugly' rows with different hight columns etc.

You have to understand who the primary audience is. And you are not it. But feel free to add your own rows and columns and add 100 settings - its easy for you to do, we will not as it will break what we have.

I am not saying we are completely done with our options, but I do not want to end in a situation where a select few (Nuno and Adrian) can configure a website, but the rest of the worl cannot :-).

You can easily build stuff like the dukal example with the system we have now by adding a simple row. You can make a row template with 2 columns and in second column have 4 nested rows and it will show up as 4 placeholders in visual editor. Currently it will give you a problem with sorting the paragraphs in those 4 placeholders - we have a plan to try to fix that at some point.

 
Nuno Aguiar Dynamicweb Employee
Nuno Aguiar
Reply

Hi Nicolai,

 

Understood, and I see your point. Thank you for the extended explanation, but please remember that despite I'm the only one saying this, there's a team of non-developers and customers (like Dukal and others) who come up with this request as well, mostly because they don't see the point for paying for customizations such as these. And I guess that's the gist of the situation, where people are trying to use the tool differently that it was designed for, wanting it to do and be more. Maybe one day ;)

 

Thank you,

Nuno Aguiar

 
Daniel Voicu
Daniel Voicu
Reply

I would advise against gimmicky div hierarchies for something like the Dukal example based on browser features. It takes less than a day to update the rows for CSSGrid without any other functionality added. This will future-proof the implementation. In that Dukal example the solution is a row with 5 paragraphs where the first paragraph is half the size of the container. Using flexbox for rows of columns and position absolute(with no cssgrid) for image/video backgrounds is outdated with the current UI/UX basics where element height can be fixed/flexible or vary based on the content with the element having background elements.

While having more row templates might be a subjective topic if they are needed or not, even for basic usage Swift should move to a CSSGrid layout system because of how easy it is to customize and it will also untangle and minimize the number of divs required for even basic designs like columns+rows. I would not expect Swift to go over that in customization but only by using CSS Grid will widen the visual cases that can be implemented. 

I see there are some commits made on Swift repository that activated the CSSGrid from Bootstrap so that will solve many issues. Hopefully background image/video will be implemented with CSSGrid as well for the flexibility it offers.

 
Nicolai Pedersen
Reply

Hi Daniel

Bootstrap 5.1 released August 4th included their (first) version of CSS grid. We have decided to convert from BS rows/cols to CSS grid and that will be part of the final Swift release due on August 31st.

You can actually already see the result on Github: https://github.com/dynamicweb/Swift. We will probably remove the row/cols support when we are fully tested.

The dukal would in the 'old' BS grid world just be a grid row template with this:

  • row
    • Col-6
    • Col-6
      • Row
        • col-12
        • col-12
        • col-12
        • col-12

That is not gimmicky in my world (given the BS grids way of working) - But I agree you can do this more beautifully using CSS grids. 

 

You must be logged in to post in the forum