Archive

Archive for the ‘Uncategorized’ Category

Cropping of images in typo3 with typoscript

June 17th, 2010
1 comment

This posting is based on version 4.3.3 of typo3.

It is often necessary to display thumbnails with fixed width and height values for each image (e.g. some image gallery…), which is a challenge if you have images of different formats (4:3, 16:9,…).

Typo3 offers the “cropping” function, which means the original image is scaled to a given width and height – to preserve the proportions of the image, it automatically resizes the images to match the given values.

E.g. if you want to scale all images in a content element of type “Image” to 160 x 120, you can use the following Typoscript code:


tt_content.image.20 {
1.file.width.field >
1.file.width = 160c
1.file.height = 120c
1.file.width.override.field = imagewidth
1.file.height.override.field = imageheight
}

It is very important to add the postfix “c” (for crop) to the pixel value.

In a concrete project, i had the challenge to render the thumbnails only for certain “Image” elements, not for the whole site. I chose to use the “Frame” (section_frame) property of the content element. So if you want to apply above settings only to content elements, which fit a defined section_frame value, you can use the following Typoscript:

tmp.CONTENT.HEADER.CONTENT < tt_content.image.10
tmp.CONTENT.IMAGE.CONTENT < tt_content.image.20
tt_content.image = CASE
tt_content.image {
key.field = section_frame
# id of the frame
3 = COA
3 {
10 >
10 < tmp.CONTENT.HEADER.CONTENT
20 >
20 < tmp.CONTENT.IMAGE.CONTENT
20 {
# cropping f. gallery
1.file.width.field >
1.file.width = 160c
1.file.height = 120c
1.file.width.override.field = imagewidth
1.file.height.override.field = imageheight
}
}
# rendering for all other frame values
default = COA
default {
10 >
10 < tmp.CONTENT.HEADER.CONTENT
20 >
20 < tmp.CONTENT.IMAGE.CONTENT
}
}
tmp.CONTENT.HEADER.CONTENT >
tmp.CONTENT.IMAGE.CONTENT >

In the above example, the value 3 is the selected value for section_frame. Its important to copy the existing values to the new COA object and then override the needed settings.

I spent some time to find a solution for this specific problem – hopefully this will help somebody to save some time….

admin Programming, Uncategorized , ,

Zend MVC Framework – forms with dojo / dijit decorators tutorial

May 28th, 2009
3 comments

I started developing my first application with the Zend Framework using the MVC approach – following the tutorial (http://framework.zend.com/docs/quickstart) is a good entry point, but as soon as you need some “advanced” features, it gets a little tricky.
In my application i will use the integrated Dojo-library, which offers powerful form elements and ajax features – but the integration of Dojo into my applicaion took me a lot of research in the docs – so here is my way to get it work (based on ZF 1.8.1):

Directory structure & Bootstrap

Copy the directory externals/dojo (which comes with the ZF package) to your public directory – in my case, this was /public/js/dojo

Now we need to add an entry to the Bootstrap.php to register the Dojo-ViewHelpers to our application:

protected function _initViewHelpers() {
$this->bootstrap('view');
$view = $this->getResource('view');
$view->addHelperPath(dirname(__FILE__) . '/views/helpers', 'MRV_View_Helper');
$view->addHelperPath('Zend/Dojo/View/Helper', 'Zend_Dojo_View_Helper');
$viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer() ;
$viewRenderer->setView($view) ;
Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);
}

Register dojo in the layout / view

The dojo – javscript sources must be available in our views – the best way to achieve this is to load them in the main layout – file – in my case layouts/scripts/layout.phtml

<?php
if ($this->dojo()->isEnabled()) {
$this->dojo()->setLocalPath($this->baseUrl().'/js/dojo/dojo/dojo.js')
->addStyleSheetModule('dijit.themes.tundra');
echo $this->dojo();
}
?>

Important: Don’t forget to add the base class name of the dijit theme to your DOM – otherwise, the styles will not be loaded correctly:

…
<body class=”tundra”>
…

Use Dijit widgets in your form

To add widgets to our form, the procedure is mainly the same like adding an Zend_Form to the application – the main difference is to derive the class from Zend_Dojo_Form instead of Zend_Form:

class MRV_Form_UserLogin extends Zend_Dojo_Form
{
public function init()
{
$password = $this->addElement('PasswordTextBox', 'password', array(
'filters'    => array('StringTrim'),
'regExp'         => '^[A-Za-z0-9]{3,}$',
'required'   => true,
'label'      => 'Password:',
'invalidMessage' => 'Invalid password; ' .
'must be at least 3 alphanumeric characters',
));
}
}

This example adds a dijit pasword text box with nice javascript validation to our form. Starting your application, you should see the form with the dijit element. For a detailed description of available dijit form decorators, visit the zend framework documentation

admin Programming, Uncategorized , , , ,

elp.co.at – everything new

March 6th, 2009
No comments

I decided to setup a new site based on wordpress – and hopefully, it will be maintained with more effort than the old one. I migrated some of the most interesting articles of my old site (mostly legacy stuff) to this blog – it may be useful to somebody.

elmar

admin Uncategorized