Developer forum

Forum » Dynamicweb 9.0 Upgrade issues » Where to find the grid configuration file in version 9.3

Where to find the grid configuration file in version 9.3

Mikkel Belchuke
Mikkel Belchuke
Reply

In your introduction video for Dynamicweb 9.3, you are talking about a configuration file that you need, to be able to use the new grid engine. 

Is there a place where I can find that file?


Replies

 
Morten Lund
Morten Lund
Reply

I'm looking for that too? –  and for some documentation about it? 

 
Steffen Kruse Hansen Dynamicweb Employee
Steffen Kruse Hansen
Reply

Hi,

The grid uses a default configuration (which is not written to a physical file), so until you tell it that you want to use a custom configuration, it will keep using the default configuration.

But to use a custom configuration, you should find the layout-file which is used on the pages, where you want to use the grid.

In my example, I just use the 'Dw_frontpage' layout:

See 'Layout file.png' attachment

Here we have the data-settings attribute on the dwcontent. This is where you enable the grid, tell it which configuration file it should use.

data-settings="grid:true;grid-settings:custom.json"

The 'custom.json' will then be created in a 'Grid' subfolder of the Design-folder, which in my case is the 'Files\Templates\Designs\Dynamicweb' folder, when you access the page in the frontend.

The configuration file will have the following structure:

{
"Columns": 12,
"ColumnsSmall": [6, 12],
"ColumnsMedium": [],
"ColumnsLarge": [3, 4, 6, 8, 9, 12],
"ColumnDefaultSize": 12,
"ColumnClassSmall": "col-sm-{columns}",
"ColumnClassMedium": "col-md-{columns}",
"ColumnClassLarge": "col-lg-{columns}",
"ContainerStart": "<div class=\"container\" id=\"{containerId}\">",
"ContainerEnd": "</div>",
"RowStart": "<div class=\"row\" id=\"{rowId}\">",
"RowEnd": "</div>",
"ColumnStart": "<div class=\"{columnClasses}\">",
"ColumnEnd": "</div>"
}

Property description:

  • Columns: The maximum number of columns, which will define a row
  • ColumnsSmall: The options (paragraph column widths), which will be available for a small device
  • ColumnsMedium: The options (paragraph column widths), which will be available for a medium device
  • ColumnsLarge: The options (paragraph column widths), which will be available for a large device
  • ColumnDefaultSize: The default paragraph column width
  • ColumnClass?: The css class, which will be added to the paragraph in the frontend.
  • ContainerStart: The html start tag for the container
  • ContainerEnd: The html end tag for the container
  • RowStart: The html start tag for the row
  • RowEnd: The html start tag for the row
  • ColumnStart: The html start tag for the column
  • ColumnEnd: The html start tag for the column

The default configuration uses a bootstrap grid.

I hope this answers some of your questions. 

Best regards

Steffen

 

Layout_file.PNG
 
Mikkel Belchuke
Mikkel Belchuke
Reply

Hi Steffen. 

Thank you. 

It all seem to work now. 

 

You must be logged in to post in the forum