Using Alternate Designs
Last Updated: 17 Dec 2015
Squiz Matrix allows you to create hyperlinks in your design to allow users to select alternate Designs and Paint Layouts to use. For example, you can create a text only or low bandwidth version of the Design and allow the user to switch to that Design. You can then allow the user to switch back to the original design or continue browsing the Site using that Design. This is achieved by adding the query string parameters SQ_DESIGN_NAME and SQ_ACTION into the hyperlink and setting up a user defined design on the Settings screen of an asset. To understand how this works, consider the examples outlined below.
Bookmarks to the headings on this page:
Creating a Hyperlink to a Printer Friendly Design
We have created a separate Design to use as the printer friendly design for our Site and a hyperlink to this Design needs to be created in our main Design. To do this, the following code is added into the parse file of the main Design.
<a href="<MySource_PRINT id_name="__global__" var="asset_link" full_url="true" />?SQ_DESIGN_NAME=printer_friendly" target="_blank">
Printer Friendly
</a>
This hyperlink will open the printer friendly Design for the current page in a new window. Please note that you can enter any name you want for SQ_DESIGN_NAME. For example, you can enter SQ_DESIGN_NAME=print instead.
On the Settings screen of the Site, a user defined design is created. The value that is assigned to the SQ_DESIGN field is entered into the Design Code field (in this case its printer_friendly) and the printer friendly Design is selected in the New field. The Design is applied to the Site and its child assets and is used when the user clicks on the hyperlink.
The User Defined Printer Friendly Design section
Creating a Hyperlink to a Text Only Design
We have created a separate Design to use as the text only design for our Site and a hyperlink to this Design needs to be created in our main Design. To do this, the following code is added into the parse file of the main Design.
<a href="<MySource_PRINT id_name="__global__" var="asset_link" full_url="true" />?SQ_DESIGN_NAME=text_only&SQ_ACTION=set_design_name" target="_blank">
Text Only
</a>
This hyperlink will open the text only Design for the current page in the current window. This Design will continue to be used for any other pages the user visits in the Site. Please note that you can enter any name you want for SQ_DESIGN_NAME. For example, you can enter SQ_DESIGN_NAME=text instead.
To allow the user to switch back to the original Design, the following code is added to the text only Design.
<a href="<MySource_PRINT id_name="__global__" var="asset_link" full_url="true" />?SQ_ACTION=clear_design_name">
Clear design
</a>
This hyperlink will revert the Design back to the default frontend design.
On the Settings screen of the Site, a user-defined design is created. The value that is assigned to the SQ_DESIGN field is entered into the Design Code field (in this case its text_only) and the text only Design is selected in the New field. The Design is applied to the Site and its child assets and is used when the user clicks on the hyperlink.
Creating a Hyperlink to a User-Defined Paint Layout
A user-defined Paint Layout is a layout configured on an asset, that can be applied by appending the SQ_PAINT_LAYOUT_NAME query string parameter to the URL of the asset. For example, if the Layout Code of the user-defined Paint Layout is paint_layout, the following URL format would paint this layout on the content of the asset:
http://foo?SQ_PAINT_LAYOUT_NAME=paint_layout
Alternatively, you can modify the design of your Site to add a hyperlink within the content of your asset, which will apply the user-defined Paint Layout to its content. This will allow a user to apply the Paint Layout to the asset, themselves. To do this, the following code is added into the parse file of the Design:
<a href="<MySource_PRINT id_name="__global__" var="asset_link" full_url="true" />?SQ_PAINT_LAYOUT_NAME=paint_layout"> User Defined </a>
When a user clicks on the hyperlink within the Design of the asset, the page will reload with the paint_layout user-defined Paint Layout applied to its content.
For more information on creating a user-defined Paint Layout, refer to the Paint Layouts chapter in the Asset Screens manual.
Viewing an Asset Without a Design Applied
To view the content of an asset without the applied design, you can append the SQ_ASSET_CONTENTS parameter to the URL of your asset, like so:
www.example.com/path-to-asset/?SQ_ASSET_CONTENTS
When this parameter is used, the content of the asset will be displayed without the design. Any caching rules and Paint Layouts on the asset will still be respected.
You can add asset IDs to this URL parameter to specify the content containers to print. In the example below, we are only printing the content of the #123 and #234 containers. Please note that you can't specify a container that is being nested in the current page.
www.example.com/path-to-asset/?SQ_ASSET_CONTENTS=123,234
To override any default paint layouts, you can append the SQ_PAINT_LAYOUT parameter to the URL of your asset. In the example below, the URL parameter will override default paint layout of the asset with layout #456.
Alternatively, you can specify a user defined layout name using the SQ_PAINT_LAYOUT_NAME URL parameter.
www.example.com/path-to-asset/?SQ_ASSET_CONTENTS=123&SQ_PAINT_LAYOUT=456 www.example.com/path-to-asset/?SQ_ASSET_CONTENTS=123&SQ_PAINT_LAYOUT_NAME=mylayout
The SQ_ASSET_CONTENTS_RAW parameter can be added to the URL of your asset to print the asset without its design and any applied Paint Layouts, while still respecting caching rules.
Like the SQ_ASSET_CONTENTS parameter, you can append content container IDs to this parameter to specify the content to print.
www.example.com/path-to-asset/?SQ_ASSET_CONTENTS_RAW www.example.com/path-to-asset/?SQ_ASSET_CONTENTS_RAW=123