elp’s blog

If you are using the popular extension “tt_news”, you probably want the news title as page title on the single view of the news entries. Especially for SEO and sharing (Facebook, Twitter,…) it is very useful to have this information in the TITLE – tag of the page.

All you have to do is to overwrite the default page title with the custom news title – but it is tricky if you want this behaviour for all configured languages on your page!

I’ll simply post my typoscript configuration here with some comments – if you have further questions, feel free to post them…


#######################

### first check, if we have a news id in the querystring
[globalVar = GP:tx_ttnews|tt_news > 0]

lib.newstitle = CONTENT
lib.newstitle {
table = tt_news
select {
selectFields = title
languageField = sys_language_uid

# id(s) of the page with the tt_news records

pidInList = 120,121
andWhere {

# grab the querystring vars and assign it to uid

data = GP:tx_ttnews|tt_news
wrap = uid = |
}

# define the language

languageField = sys_language_uid

}
renderObj = COA
renderObj {
10 = TEXT
10.field = title
}
}
[global]


Now we have a typoscript object named “lib.newstitle” containing the title
of the current displayed news entry. But CAUTION: this works for the default language only, if we want additional languages, we have to alter the select statement to use the “l18n_parent” id for the given data item:


[globalVar = GP : L = 1,GP : L = 2, ...]
lib.newstitle.select.andWhere.wrap = l18n_parent = |
[global]


Just insert all you configured language ids.
Finally, we have to assign the “lib.newstitle” string to our page (assuming, that our title is configured in page.headerData.10) :


[globalVar = GP:tx_ttnews|tt_news > 0]
page.headerData.10 >
page.headerData.10 = COA
page.headerData.10 < lib.newstitle
page.headerData.10.wrap =
[global]


That’s it – hopefully, this will save some time for you…

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

The loading time of a website gets a lot of attention these days, at least since google said, that the loading speed is a factor for the ranking position. With compression of text files (CSS, HTML, JS) you can speed up the performance easily.

If the site is hosted on an Apache 2 webserver, there is an easy to add compression to your existing files without modifying or wrapping them – the only requirement is that Apache is compiled with mod_deflate (which should be standard on quality webhosting providers).

Simply add the following snippet to your .htaccess file:

# BEGIN Gzip
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|iso|tar|bz2|sit|rar|png|jpg|gif|jpeg|flv|swf)$ no-gzip dont-vary
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.[0678] no-gzip

# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48, the above regex won’t work. You can use the following
# workaround (comment the above line and uncomment the below line) to get the desired effect:
# BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Make sure proxies don’t deliver the wrong content
Header append Vary User-Agent env=!dont-vary

</IfModule>
# END Gzip

The “BrowserMatch” should prevent compression for older Browsers (inluding Internet Explorer), because there are issues with javascript compression (but it seems, that only certain versions of IE 6 are concerned…)

The documentation of Aptana 2.0 is poor at the moment, i did not find any docs on the new PDT PHP extension. Maybe someone has the same troubles getting php debugging to work – here is how i got it finally running:

I use the following system setup for local php development, testing and debugging:

OS:
Windows 7 (64-bit)

IDE:
Aptana Studio 2.0.2 with pdt extension

Server:
LAMP (ubuntu server 9, 32-bit) in a virtual machine (VMware server 2), PHP 5.2.10

To get a working debug configuration for php, the following steps are necessary:

• install the aptana PHP Debugger Binaries (PDT) via the plugin manager (my studio start page – plugins – featured plugins)
• install Zend Debugger on the server (i followed the tutorial found here) – make sure, that the IP of your development machine is added to the allowed hosts section of the zend debugger.
• add a new php server configuration in Aptana Studio
  Preferences – PHP- PHP Servers: simply add a new entry by giving a name and the http – address (e.g. http://ubuntulocal/)
• add a new debug configuration for your project
  click on the arrow next to the “bug” – symbol (debug configurations), setup a new configuration, choose “Zend Debugger” as Server Debugger and your configured server as “PHP Server”. In the “File” section, choose the path to the starting script of your app and check the right http-address in the “URL” section (“Auto Generate” is checked by default, in my case, this would result in a wrong url – just enter the right one manually). Finally make sure that ” Open in Browser” is active in the “Advanced” tab.

After saving the configuration your debug session should start by pressing the “Debug” button – the execution of the script should break at an automatically added breakpoint at the first line (you can change this behaviour in the debug configuration) and Aptana switches to the “Debug” view, where you can proceed with debugging.

Recently, a weird problem occured in my current typo3 – project. The caching was configured properly (out of the box configuration) and all caching tables were written as they should – but with a very confusing behaviour: the whole page was generated completely new by typo3 on each page request, which caused high server load. The error was not caused by an overriden no_cache-value or one of the other usual suspects (USER_INT, config – directives). After spending days trying to find a fix for the problem, i finally found a solution:

The problem was the configuration of the typo3 – installation, which is set to use utf-8 in the database backend and frontend output. All databse tables were correctly set to utf-8 and the rendering of special chars worked liked a charm – but there seemed to be a missmatch in rendering the page content and generating the cache content. Because of this missmatch, the pages were correctly saved in the table page_cache, but the entry was renewed on every page request. To solve this problem, you have to set the value of the [setDBinit] directive as followed when using utf-8 (either in the typo3 install tool or via localconf.php):

---

[setDBinit]
SET character_set_client = utf8
SET character_set_results = utf8
SET character_set_connection = utf8

---

Normally, the value SET NAMES = utf8 should do the trick, but that didn’t work for me. After setting this value and clearing up the whole system cache, your pages should be served from the cache.

For a complete tutorial how to configure typo3 to use utf-8 consistently, take a look at
http://www.typo3-media.com/blog/article/utf8-and-typo3-updated.html
(this tutorial still uses the “SET NAMES” directive, be sure to change it….)

Typo3 offers a nice feature to edit content elements of a page directly in the preview mode – but this functionality is only available for admins per default. In my projects, it’s important for all users to have this feature. As so many tasks in typo3, it is not very obvious how to enable it – so here is a (very short) tutorial, how it works to add it for backend-groups.

First step – default template

In the default template (which is typically the site’s root), you have to enable the admin panel, which is done by the following command in the typoscript- setup:

config.admPanel = 1

Second step – enable and configure the panel for the usergroup

Switch to the user admin, select a user, who is a member of the group to which you want to add the feature, select the assigned group and press the “edit” symbol. The configuration dialogue for the user group pops up – now select the “options” tab and enter the following typoscript:

admPanel {
enable.all = 1
enable.edit = 1
module.edit.forceNoPopup = 0
module.edit.forceDisplayFieldIcons = 1
module.edit.displayIcons = 1
module.edit.forceDisplayIcons = 1
enable.cache = 1
enable.preview = 1
enable.publish = 1
enable.tsdebug = 1
enable.info = 1
hide = 0
}


This is just an example setting, please refer to the typoscript reference for a complete list of options. After saving, you can switch to an user who is a member of the group, select a page in preview mode – voila  – now you should see a panel where you can move, edit, hide and delete content elements.
If you do not use groups, you can simply set the above typoscript to a single user – but using groups always makes sense.

I hope this saves some time for someone who runs into a similar issue. Thankyou, Rüdiger!

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

Recently, i started working on a project using the ASP.NET based portal framework dotnetnuke. My part is mainly the development of custom modules. Although the framework’s architecture makes it easy to extend the functionality, the available documentation is far from being complete. Finding necessary hints and tipps in discussion boards and blogs, i’ll try to do my part offering useful tipps for developers.

Accessing current portal settings (C#)
if you plan to use elements of the current active skin of the portal in the views of your module, you need an instance of the current portal settings.

PortalSettings settings = (PortalSettings) HttpContext.Current.Items["PortalSettings"];


So if you want acces to your skin path, this is the way you go:

String path = settings.ActiveTab.SkinPath;

Accessing the portal’s active culture
You may need the current active culture (language settings) in your module. Dotnetnuke uses built-in .NET localization, but it’s not so obvious
how to get the current setting – you have to fetch it from the current thread:

CultureInfo culture = Thread.CurrentThread.CurrentUICulture;

e.g. the following will return “en-US” for standard english culture

Thread.CurrentThread.CurrentUICulture.Name

Using API for sending e-mails
DotNetNuke.Services.Mail.Mail.SendMail

A simple example using the default settings configured in the portal backend:
DotNetNuke.Services.Mail.Mail.SendMail(FromAddress, SendToAddress, "", "my subject", "this is the mailbody", "", "", "", "", "", "");

The official documentation for module development can be found here!

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

The Internet Explorer 6 is a “no-go” for web-programmers (especially the html / css – geeks) – poor implementation of W3C – Standards and horrible javascript support causes heavy troubles on modern web-frontends. But now there is something going on: Finn.no, Norway ’s largest classifieds-site, is displaying a tip on their homepage to all IE6 users, encouraging them to upgrade their browser. Not only so, but they have initiated a campaign, prompting several of the most visited Norwegian sites to follow suit. Dave Auayan started the “Internet Explorer 6 Death March”, which should be supported by every web-professional – maybe one day there will be no necessity to do any “cross-browser-scripting”.

• IE6  – Do NOT Want!

  http://ie6.forteller.net/index.php?title=Main_Page

• Dave Auayan – IE 6 Death March

  http://iedeathmarch.org/