Feature #24060
closedImplement a Grid View + wizard to enable the backend layout to be adapted to the frontend look and feel
0%
Description
During the T3UXW09 a first prototype of the so called Grid View has been created by team 1 to enable people who don't use TemplaVoila to layout their page module interface as well.
Basically it creates a backend layout table with colspan and rowspan to represent the FE layout as close as possible. Therefor it uses a TS like syntax that can be written manually or created automatically by a Grid Wizard.
To give the editors an impression of the layout you can attach some icons as well and if needed there can be a connection between the BE grid and a corresponding FE template.
After testing it as an extension named "modernbe" that existed for TYPO3 v4.3 only, this Grid View has been adapted now to the new page module of v4.5.
If you want to know how it works take a look at this wiki page:
http://forge.typo3.org/projects/extension-modernbe/wiki/Grid_View
or watch the video of the 4.3 extension:
http://www.youtube.com/watch?v=SsxfNd4TYbk
There have been some small changes to the 4.3 version, but the wiki page is comletely up to date.
(issue imported from #M16396)
Files
Updated by Thomas Hempel about 14 years ago
This is an SVN patch request.
Type: New feature
Bugtracker reference:
http://bugs.typo3.org/view.php?id=16396
Branches:
trunk
Problem:
The normal page module in the TYPO3 backend is considered as the most common used view by editors.
This column view is around for quite some time now. The column view is a good representation of the
website in many cases but it can't represent more complex layouts like this:
+---+----+---+ | | | | | | +---+ | | | | +---+----+---+ | | +------------+
TemplaVoila can handle such complex layouts but can be a little over the top if you only want to
represent two rows of content instead of two columns. For example
+------------+ | | +------------+ | | +------------+
Solution:
During the T3UXW09 a first prototype of the so called Grid View has been created by team 1 to
enable people who don't use TemplaVoila to layout their page module interface as well.
Basically it creates a backend layout table with colspan and rowspan to represent the FE layout
as close as possible. Therefor it uses a TS like syntax that can be written manually or created
automatically by a Grid Wizard.
To give the editors an impression of the layout you can attach some icons as well and if needed
there can be a connection between the BE grid and a corresponding FE template.
After testing it as an extension named "modernbe" that existed for TYPO3 v4.3 only, this Grid View
has been adapted now to the new page module of v4.5.
If you want to know how it works take a look at this wiki page:
http://forge.typo3.org/projects/extension-modernbe/wiki/Grid_View [^]
or watch the video of the 4.3 extension:
http://www.youtube.com/watch?v=SsxfNd4TYbk [^]
There have been some small changes to the 4.3 version, but the wiki page is completely up to date.
This patch implements the described feature.
How to test:
1. Apply the patch
2. Copy all the icons from the archive to the source folder
3. Update your database with the compare tool in Install-tool
4. Go to a site and create a new "Backend Layout" record
5. You can either paste the following code to the config field or use the grid wizard.
be_layout { colCount = 3 rowCount = 3 rows { 1 { columns { 1 { name = Left column rowspan = 2 colPos = 1 } 2 { name = Main Content rowspan = 2 colPos = 0 } 3 { name = Top Right colPos = 2 } } } 2 { columns { 1 { name = Bottom Right colPos = 3 } } } 3 { columns { 1 { name = Bottom colspan = 3 colPos = 4 } } } } }
(This will recreate the layout I mentioned in the first example and it was actually created with the wizard)
- Give the layout a name and save it.
6. Create a page and edit the page settings
7. On tab "Appearance" select your newly create layout in Field "Backend Layout" and save.
8. Go to the "page" module if you not already there and select "Grid-View" as sub-module.
9. Voila. You should now see something like this: https://skitch.com/matrikz/ry19h/new-typo3-site-typo3-4.5-dev
Note
It's fully functional but might need some tweaks here and there to achieve the last 10%. ;-)
Note 2
You can also use the attached T3D export to test this. It contains some grid definitions for testing purposes.
ATTENTION: To avoid overridden data, create a new page and import the t3d into that newly created page!