.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt =========== EXT: Puzzle =========== :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed by: Stanislas Rolland :Changed: 2016-03-12T08:29:50.440000000 :Author: Stanislas Rolland :Email: typo3(arobas)sjbr.ca :Info 3: :Info 4: EXT: Puzzle .. _generated: ((generated)) ============= .. _Table-of-Contents: 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** .. _Copyright: Copyright ========= Extension Key: **sr\_puzzle** Copyright 2003-2016, Stanislas Rolland, This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 a GNU/GPL CMS/Framework available from www.typo3.com .. _Introduction: Introduction ============ .. _What-does-it-do: 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: 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. .. _Users-manual: Users manual ============ First, the extension needs to be installed and configured: see the Configuration section. Second, limited customisation may be done: see the Administration section. After these two steps, you are ready to insert puzzle content elements on your pages. .. _Creating-a-Puzzle-content-element: 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: |img-1| 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: Configuration ============= .. _Configuration-steps: 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: Typoscript Constants Reference ------------------------------ .. ### BEGIN~OF~TABLE ### .. _TemplateFile: TemplateFile ^^^^^^^^^^^^ .. container:: table-row Property TemplateFile (REMOVED) Data type string Description HTML template file for display of the puzzle. Note: the extension now uses Fluid templates rather than HTML templates. Default .. _puzzleX: puzzleX ^^^^^^^ .. container:: table-row Property puzzleX Data type int Description This is the absolute horizontal offset of the puzzle from the left side of the containing frame. Note: May be overridden on the puzzle content element form. Default 250 .. _puzzleY: puzzleY ^^^^^^^ .. container:: table-row Property puzzleY Data type int Description This is the absolute vertical offset of the puzzle from the top side of the containing frame. Note: May be overridden on the puzzle content element form. Default 100 .. _solutionWidth: solutionWidth ^^^^^^^^^^^^^ .. container:: table-row Property solutionWidth Data type int Description This is the width of the small puzzle solution model. If both the puzzle solution width and height are equal to zero, then the solution width will default to 100. Default 100 .. _solutionHeight: solutionHeight ^^^^^^^^^^^^^^ .. container:: table-row Property solutionHeight Data type int Description This is the height of the small puzzle solution model. If both the puzzle solution width and height are equal to zero, then the solution width will default to 100. Default None .. _congratulationsWidth: congratulationsWidth ^^^^^^^^^^^^^^^^^^^^ .. container:: table-row Property congratulationsWidth Data type int Description This is the width of the congratulations window that pops up when the puzzle is solved. See enablePopUp constant. Default 150 .. _congratulationsHeight: congratulationsHeight ^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row Property congratulationsHeight Data type int Description This is the height of the congratulations window that pops up when the puzzle is solved. See enablePopUp constant. Default 150 .. _congratulationsVertOffset: congratulationsVertOffset ^^^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row Property congratulationsVertOffset Data type int Description This is the offset from the top of the screen of the congratulations window that pops up when the puzzle is solved. See enablePopUp constant. Default 250 .. _congratulationsHorOffset: congratulationsHorOffset ^^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row Property congratulationsHorOffset Data type int Description This is the offset from the left of the screen of the congratulations window that pops up when the puzzle is solved. See enablePopUp constant. Default 250 .. _enablePopUp: enablePopUp ^^^^^^^^^^^ .. container:: table-row Property enablePopUp Data type boolean Description If set, a congratulations pop-up window will be opened when the puzzle is solved. The page id is specified on the puzzle definition form. Default 1 .. _enableAlert: enableAlert ^^^^^^^^^^^ .. container:: table-row Property enableAlert Data type boolean Description If set, a Javascript alert window will pop up when the puzzle is solved. The text of the message in defined by the label successMessage in pi1/locallang.php. Default 0 .. _enableLinkAfter: enableLinkAfter ^^^^^^^^^^^^^^^ .. container:: table-row Property enableLinkAfter Data type boolean Description If set, the puzzle page will be replaced by a linked page when the puzzle is solved. The page id to link to is specified on the puzzle definition form. Default 0 .. ###### END~OF~TABLE ###### .. _Fluid-template-variables: 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: 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. .. _Known-Problems: Known Problems ============== When using a Linux client, the congratulations pop-up window does not open with the specified width and height. .. _Change-Log: Change Log ========== See: `http://forge.typo3.org/projects/extension- sr\_puzzle/repository/entry/trunk/ChangeLog `_ |img-2| EXT: Puzzle - 8 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.jpeg .. :align: left .. :border: 0 .. :height: 419 .. :id: Image1 .. :name: Image1 .. :width: 550 .. |img-2| image:: img-2.png .. :align: left .. :border: 0 .. :height: 32 .. :id: Graphic1 .. :name: Graphic1 .. :width: 102