DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

EXT: Responsive Template

Author:Christopher
Created:2010-12-18T19:57:23
Changed:2013-08-24T12:21:29
Classification:responsive_template
Description:The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists. If your manual is NOT in english, see next tab "language" ---- forEditors (use this for editors / german "Redakteure") forAdmins (use this for Administrators) forDevelopers (use this for Developers) forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) ----
Keywords:responsive, template, forAdmins, forIntermediates
Author:Klaus Heuer
Email:klaus.heuer@t3-developer.com
Language:en

img-1 img-2 responsive_template

Extension Key: responsive_template

Language: en

Version: 1.0.5

Keywords: responsive, template, forAdmins, forIntermediates

Copyright 2006-2013, Klaus Heuer, <klaus.heuer@t3-developer.com>

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.org

Table of Contents

`responsive_template 1 <#__RefHeading__5708_1738894311>`_

`Introduction 3 <#__RefHeading__5710_1738894311>`_

What does it do? 3

Screenshots 3

`Installation 4 <#__RefHeading__31507_818911409>`_

`UPDATE Instructions 6 <#__RefHeading__420_1863646183>`_

`FAQ 7 <#__RefHeading__31511_818911409>`_

`Further development 8 <#__RefHeading__477_413120346>`_

`ChangeLog 9 <#__RefHeading__31623_818911409>`_

Introduction

What does it do?

Responsive Template is an extension which delivers a complete template in a responsive web design layout. It is easy to install and comes with a couple of useful features:

  • One click to install , import Extension and add static file – thats all
  • Four different template layouts (1- , 2- and 3 cols Layouts) including backend layouts, templates are based on fluid.
  • A Responsive Slider plugin with complete backend modul.
  • Option for second/third Website Language incl. language menu (one tree fits all)
  • [NEW] Option for second Menue in left / right Col
  • [NEW] Option for Footer Page
  • No further Extensions necessary
  • Works optional with realUrl

If you update the extension please read the chapter update Instructions!

Screenshots

Frontend and Backend Example

img-3 img-4 You can find a live sample here:

http://www.responsive-design.t3-developer.com/

Installation

  • Import an activate the Extension via the Extension Manager.
  • Create a Page Template and include static (from extension) the *CSS styled content* and the *responsive Template*
  • Import of the Backend Layouts (new since version 1.0.5):Go to the Extension Manager and choose the responsive design Extension.Klick on “Excecute the Update Script” (The green round arrow sign in 6.1).You will asked for the pid of your template and then run the script. The backendlayouts are now imported on the template pid.
  • Set your personal page stuff in the template constant editor “responsive template”

((generated))

Choose a Page Template (1-, 2- or 3-cols)

Go to the “page edit” view and chose the Appearance Tab. Chose your layout in the select box “Page Layout”. The Backend shows the needed cols of the template, the frontend template will be automaticly set.

The responsive Slider

Create a folder in your Page Tree and add the pid in the template constants.In the section “Web” you find the new entry “Slider”. Add first a slider and than upload the images.

You can use the slider with images or images with additional text. If you fill out the “headline” field, headline and text is on a transparent black background area above the image.

Go to the page where slider should be included an add a new content element “plugin”. Chose “responsive slider”. After page reload you can select your slider in the plugin tab.

Sliders are possible in all cols!

Language Support

The extension is ready for a second or third webside language.Add on the root page of your installation the additional language records. There is no need for adding the base language there. Note the uids of your language records (normally “1” and “2”)

Choose your template → Constant Edit and activate the language support. Fill out all needed fileds in the constants.

After cache clearing you should see a new language menu on top of the page. The html codings for both languages are automaticly set.

The slider script is based on the orbit-slider which is under the Creative Commons Attribution-ShareAlike 3.0 License.

Feel free to use this extension for personal, non-profit or profit pages. Do what you want ;)

If you have questions, proposals for further versions, or a build a great side with this extension, please send me a mail at: klaus.heuer@t3-developer.com .

There is also a git page which the last version:

https://github.com/klaus-ger/responsive_template

UPDATE Instructions

Note:

If you update from a further version of the responsive_template please consider, that all changes you have done in the extension folder will lost!The Extension have now the option to work with a page as footer content.

Instructions:

  • Update the Extension via the Extensionmanager or replace the EXT

with the Files from GitHub.

  • Klick on “Execute the Update Script” in the Extensionmanager, line

responsive_template(The green round arrow sign in 6.1).

  • Check your constants in the Constants Editor (responsive_template)
  • NEW in this Version: You can add a page as “ footer content

”.Add a page in your root tree an set it ti “hide in menu”Add the pid of this page in the Constants “Pid of the Page you use as footer”You can now fill the left, center and right col of this page. This content will displayedin all pagefooters.

  • NEW in this Version: 2 col Layout – sidebar left There is a

new Pagelayout “2-col sidebar left”. In mobil view the sidebar is renderedafter the content.

  • NEW in this Version: Second Menu Option In the constants

you can now turn on a second Menu Option for the left- and right Col.The Second Menu will displays on all two-col Layouts on top of the sidebar.

  • NEW in this Version: General Meta Tags You can add some

meta tags in the constants.These tags will be rendered additionalto the meta tags you placed on the single pages.

FAQ

The extensions works with TYPO3 4.7 and 6.1.

With 6.0 you will have some problems because extension-update-scripts are not supported.

If have question please fee free to contact me klaus.heuer@t3-developer.com

Further development

This will be the last version which works with TYPO3 4.7!

*The problem with image sizes:* And the moment the images were resized on the respected view, but in fact, the system delivers the original file size. This is a unnecessary page load on mobil devices.

Therefore the further development is concentrated on this topic.

The plan is to integrate a lazy plugin, that means first load the page (without images) and then load the images in the needed file-size depending on the device.

There will be an new backend file uploader, which resize the images automaticly in different sizes for the different views. For example, if you upload a new image to the fileadmin folder with a 900px width, the system will resize the image to 360px width and 600px width and store all 3 versions. The lazy plugin is than able to deliver the respected image size to the mobil browser.

You can find the last development on GitHub: https://github.com /klaus-ger/responsive_template

If you have questions or proposels for further features, drop me a note to klaus.heuer@t3-developer.com

In the last months I have seen a lot of great results with this extensions – thanks for sharing.

August 2013, Klaus

ChangeLog

0.9.1

Version

0.9.1

Changes

First release.

1.1.1

Version

1.1.1

Changes

- The slider recognized now viewport changes- A sample mobil menu is now added (see also project site)- smaller Bug fixes

1.1.2

Version

1.1.2

Changes

- Add new page layout, sidebar left- Add Option for second menu

- Add Option for third website languag