Hello Team,
We are working on making our client website respond according to the diff devices screen sizes (Responsive design). In the process development and testing we need to test the content in diff size windows. So we are looking for ways to customize the preview windows option in Percussion to diff sizes (height & width). Any thoughts and where can i set the height and width? Have a great time.
I was looking at copying over Generic_Preview (in Workbench > UI Elements Design > Content Explorer > Menus > User > Dynamic) and there isn’t an option to specify width and height (as there is under Menu Entries > User )… Ideally it would have been nice to just copy over the Generic_Preview a couple of times for the different window sizes…
An alternative is to have a javascript that bring up a menu that users select (when the preview the page) that would then automatically resize the browser window based on their selection.
We use a bookmarklet (available here) that allows our business users to preview the page in different screen resolutions. This bookmarklet is not included on the preview page; rather, the business user must goto the mentioned website to save the bookmarklet. I like jit’s idea to display a menu that allows the user to automatically resize the browser according to their needs.
Since you can set the size of the preview window in a menu item, one option would be to create a menu item for each different preview template, each setting the window size as appropriate. Then, for neatness sake,you could put all of the menu items into a User/Cascading Menu.
To set a menu item for a specific 800x600 Preview:
General Tab
Menu Entry label: I[/I] 800x600
Launch new window - check
Target: render_link
Style: (set your size here) example: scrollbars=1, top=15, left=15, height=800, width=600, toolbar=0, location=0, status=0, resizable=1, menubar=0
Command tab
Set URL: …/assembler/render
Parameters:
sys_contentid - $sys_contentid
sys_folderid - $sys_folderid
sys_itemfilter - preview
sys_revision - $sys_revision
sys_template - {specify your template’s id # here}
Maybe I’m mistaken, but wouldn’t that cause the overall window (measured from outside the chrome) to be the target size (800x600)? A sufficiently sophisticated bookmark should be able to calculate the size of the existing chrome, and therefore resize the window to a value that makes the area inside the chrome match the target size. That would really be the only way, since each user could potentially have varying sizes of chrome depending on plugins and menus. The Web Developer Tool Bar plugin for FireFox provides this ability as well, but your users may not be “developery” enough for that.
-J