EXT: Puzzle¶

Table of Contents¶

Copyright 2

Introduction 3

What does it do? 3

Requirements 3

Example 3

Users manual 4

Creating a Puzzle content element 4

Configuration 5

Configuration steps 5

Typoscript Constants Reference 5

Fluid template variables 5

Upgrading to version 6.0 6

Known Problems 7

Change Log 8

What does it do?¶

The Puzzle extension adds a new type of content element to TYPO3. This content element inserts a puzzle on a page:

• you specify the image and the dimensions of the puzzle;
• you specify the size of the puzzle pieces: the plugin will brake down the image in square pieces of uniform size;
• the pieces are shuffled and displayed in a absolutately positionned area of the page: you may specify the horizontal and vertical offset of this area relative to the window sides;
• lastly, you may specify a page to be displayed in a popup window when the player solves the puzzle, and/or a page to link to in the same window as the puzzle, and/or a Javascript alert window may pop up.

Requirements¶

ImageMagick must be available in the Typo3 configuration for the extension to operate properly.

Version 6.0.0 requires TYPO3 6.0.

Version 2.0.0 of the extension will work with TYPO3 4.0.0-4.7.99.

Version 1.0.0 of the extension will work with TYPO3 3.5.0-3.8.2.

Creating a Puzzle content element¶

You create a Puzzle content element the same way as any other type:

• select the type Puzzle;
• after being redisplayed, the content element creation form should look like the following:

The Puzzle image section of the form allows you to insert the image file of the puzzle and to specify the dimensions of the puzzle (specifying the width OR the height is sufficient), the size of its pieces and its horizontal and vertical offset form the side of the page frame on which it is displayed. Only one image should be inserted. Specifying the width OR the height of the puzzle should be sufficient.

Lastly, depending on your configuration setup, you may need to specify the congratulations page to be displayed in a popup window when the puzzled is solved, and/or the page to link to when the puzzle is solved.

Configuration steps¶

These are the steps to configure the Puzzle plugin:

Install the extension using the Extension Manager and run the update script (removed in version 6.1). Note that when upgrading to version 6.0+, the update script will make irreversible updates to the database .

Include static template “Puzzle Setup” in your TypoScript template, and configure the plugin using the TypoScript Constants Editor. Review the plugin settings described below.

Include default CSS styles by including static template “Puzzle CSS Styles” in your TypoScript template, or adapt these default selectors according to the visual design of your site and include them in the style sheets of your site.

Adapt the Fluid templates to your needs. You may copy them to a location of your choice, adapt them, and configure the new location using the TypoScript Constants Editor.

Typoscript Constants Reference¶

Fluid template variables¶

The following objects are available in the Fluid template:

• settings: an object providing all the properties of the plugin settings, plus the additional property pieceSize: the size of the puzzle pieces;
• puzzle: an array of properties of the current puzzle.

The puzzle has the following properties:

• imageNotFound: if set the configured image was not found;
• totalHeight: the total height of the puzzle;
• image: the path to the image of the puzzle;
• solutionImageTitle: the configured title for the solution image;
• solutionImageAlternateText: the configured alternate text for the solution image;
• nbPiecesVertical: the number of puzzle pieces on the vertical axis;
• nbPiecesHorizontal: the number of puzzle pieces on the horizontal axis;
• imageExtension: the file extension of the image and of the puzzle pieces.

Upgrading to version 6.0¶

Install the new version.

Run the update script (removed in version 6.1). Beware that the script will make IRREVERSIBLE updates to the database.

The update script will update all occurrences of the plugin in table tt_content changing the plugin CType from “tx_sr_puzzle_pi1” to “srlpuzzle_puzzle” and adding the data of a flexform based on the values of the fields previously added by the “tx_srpuzzle_pi1” plugin.

The update script will also update the constants and setup fields of all TypoScript templates replacing, in the constants fields, all occurrences of “tx_srpuzzle_pi1” with “tx_srpuzzle”, and, in the setup fields, all occurrences of “tx_srpuzzle_pi1” with “tx_srpuzzle.settings”. After this update, you may need to move array _LOCAL_LANG from plugin.tx_srpuzzle.settings to plugin.tx_srpuzzle.

Static template “Puzzle Setup” must now be included on the TypoScript template of any page containing the plugin. If you want the default CSS of the plugin to be included on these pages, you must also include static template “Puzzle CSS Styles”.

The plugin does not use an HTML template anymore. If you had modified the HTML template, you may need to adapt the Fluid templates provided by the extension.

You may also need to adapt your style sheets as the plugin CSS selectors were modified. In particular the main selector was changed from tx-srpuzzle-pi1 to tx-srpuzzle.