Tuesday, November 26, 2013

Day 10: News with the tt_news extension, more language problems

Today we're going to experience the magic of tt_news: the Typo3 extension for adding a news module to your site with minimal fuss.

Start unter "Admin Tools" / "Extension Manager". From the dropdown on the upper left-hand side, pick "Get Extensions". Type in the search field "tt_news" and click on "Go". There are a lot of extentions with this as part of their name. At the top of the list, however, is the right extension - you can verify this by looking at the column called "key". The "key" of an extension is that extensions unique name.

If you click on the little down-pointing arrow next to "tt_news", you'll get a loooong list of all the versions of tt_news, ever, and their status. Perhaps you will be as astonished as I was to see that the latest "stable" version is from early 2005: "News 2.0.6". The latest of many "beta" versions is version 3.5.1, from late 2013. I picked this one to "import and install". (To import and install, click on the left-pointing arrow under the column "Actions").

After downloading the extension, log off the backend and then log back on. You'll see now on the left-hand side under the "Web" category, a new module "News Admin". Additionally, under "Admin Tools" / "Extension Manager" / "Manage Extensions", you'll see that our list of available extensions has been supplemented with the "News" module. If you click on it, you can configure it. In the tutorial for "Praxiswissenschaft Typo3", however, the default configurations are used.

Now comes the hard fun part. Setting up an actual news site in Typo3 requires a lot of really specific steps. However, it only takes about 10 minutes, and compared to programming a news module from scratch (which I've actually had to do way too many times), the Typo3 news module is actually totally awesome. Here are the steps for setting up a site to display a list of news headers with a short excerpt of text, with a link to another site where one can read the entire article. On the page with the entire article, there's a link to go back to the list of all news.

So, pick the page from the page-tree where we want the news list. I'm going to call mine "Current". Click on the "Web" / "Page" icon on the left-hand side. You'll see the template where you can add new content records to the page. In the "main" section, click on the icon for "add a new record". Now under the tab "Plugins", pick "General Plugin". The page will ask you if you want to reload - yeah, sure, why not.

Now under the tab called "General" you can give the news-page a header. I used "Today". In the tab "Plugin", there's a dropdown labeled "Selected Plugin". Pick "News" out of this dropdown. Save! The "Plugin" tab that's now available has several sub-tabs: "General Settings", "Templates", "Category Settings", and "Other Settings". Under "General Settings" there's a dropdown labeled "What to display". Pick "Standard list view (LIST)".

Now, on the left-hand side under "Web", click on the "List" module. Click on the page "Actual" in the page tree. At the upper left-hand side of the mask, click on the plus, "add a new record". A tree-type list appears where you can pick what kind of content you want to add. Under the header "News", you can pick either "news" or "news category". Pick "news".

This is where can enter actual news content: title, text, etc. Make sure to unclick the checkbox "hide" so that our content will be visible. Save your changes.

Now we need to make a static template for the content. Unter "Web", click on "Template" and the root page. Click on "edit whole template record". You'll see some tabs: pick the tab called "Includes". On the lower right-hand side there's an area called "Available Items" where you can make selections. Select "News Settings (tt_news)" and save.

If you look at the frontend now, you'll just see an error (or in my case, nothing). That's because you still have to go through about 8 more steps to get this thing up and running. In order to see the whole news article that we would theoretically pick from the as-yet not existing news list, we need to create a sub-page under the page called "Actual". Right-click on the "Actual" page and select "Page-actions" -> "add".

In the mask, check "hide in menu", pick from the "Type" dropdpown the type "Standard", and save. Click on "Web" / "Page" now and in the content template in the main content area, click on the plus icon to "add a new record".  Click on the "Plugins" tab. Select the "News" plugin. From the mask that now appears, pick the "Plugin" tab (again - I know that it's gotten confusing) and then the tab "General Settings". There in the dropdown "What to display" pick "Detail view - SINGLE". Remeber to save, otherwise you'll have to start all over again.

Now click on "Actual" again, and "Web" / "Page". In the main content area, click on the edit symbol (the pencil) for the news content item. Click the "Plugin" Tab and then on the "Other Settings" tab. Click on the "folder" symbol next to the label called "PageId for single news display" in order to pick the page we just created for the single-news item. Save!

Think we're done yet?  WRONG. Do the whole song-and-dance for the single-news item subpage under "Actual". For whatever reason, you have to specify in the single-news item page under "PageId for single news display" that the page it should refer to is itself (eye-roll). Additionally, click on the folder symbol near the label "PageId to return to" in order to pick the parent page, "Actual" in oder to generate a useful link that will allow us to return from the single-news item detail to the news list.

NOW we have a usable news module for our frontend whose content can now be easily maintained by editors who lack the insane desire to mess around with the backend. I know that the setup seems... awkward, but it would have taken longer (and been more tedious) to program the same thing from scratch. Typo3 takes care of the things we've done a hundred times before so that we have more time to program new and challenging functionality, refactor and explore! The day's only half done and, again, I've learned something quite useful.

It was really bugging me that the images for the "trailer" had disappeared on introduction of an English-language version of all pages. The disappearance of the static-right hand content (also only from the English-language pages) was bugging me too, so after a few minutes of googling, I found 2 useless suggestions and 1 good one. I'll spare you the former but share with you the secret of my success.

Namely, the root (and other helper-pages like "static-right hand") from which subpages are supposed to inherit, need to have an English-language version too. Copy the content of helper-pages, if there is any, and as far as inherited images go, you need to click on the "Resources" tab of the English-version of the page.

There you'll see a pale version of the image that appears under the "Resources" tab of the original-language version of the page. To the right of this image there's a barely discernable icon called "localize". Click on this, wait a minute, clear the cache and refresh the front-page. Voila... now the site behaves as it should.

This seems to be more of a feature than a bug, but it would have been nice for the "Praxiswissen Typo3" tutorial - WHICH USES A MULTI-LANGUAGE SITE AS ITS EXAMPLE - to have mentioned this tiny little detail.

Next up: configure an indexed-search without being deterred by the trauma left over from setting up the "simple" search form!

No comments:

Post a Comment

Play nicely!