EXT: rgnewsimg¶

What does it do?¶

This extension allows to apply different design sets to the images of a single tt_news record. So you can split the images in 1 big image, 3 smaller images and display the remaining images as very small thumbnails.

Furthermore It is possible to switch the whole template including the whole TS you can apply to tt_news.

Please take a look at the demo & screenshots to get an impression of the extension!

Demo¶

Please take a look at the online demo at my website to get the best impression of this extension!

• in English: http://www.rggooglemap.com/en/dev/rgnewsimg.html
• in German: http://www.rggooglemap.com/dev/rgnewsimg.html

Screenshots¶

Image 1: A big headerimage and the usual small images

Image 2: A larger headerimage and 2 images at the right side and the rest at the left side.

Image 3: 2 header images followed by 3 images in a row and the rest is at the left side next to the text

Image 4: Backend to choose the layout

Install the Extension¶

Install the extension with the Extension Manager

Include the static TS (from extension) in the template record (your root TS or make an ext. template just for the page where you want the extension be displayed). **The steps for the real beginners are** :

Select your root/first page.

Click in the menu on the left side “Template” and choose “Edit whole record”.

Scroll down until you see the the same thing as in the screenshot shown.

Search for the “tt_news Image-Designsets” entry on the right side, click on it to get it on the left side.

Press “Save” and you are done.

Modify your news-templates. Basically you need new markers like ###NEWS_IMAGE_1###, ###NEWS_IMAGE_2###. For further information take a look at the chapter Configuration.

Use the Extension¶

After the installation you can just switch the Designsets in the news record and enjoy the results.

Modify the selection¶

It is very easy to modify the selection inside a tt_news record using the Page TsConfig!

Add a new item

The ID in this example is 10 and the text would be “New Designset”. If you want to add an image too, you need to create the entry in an ext_tables.php file because it is not possible with TsConfig.

TCEFORM.tt_news.tx_rgnewsimg_design.addItems.10 = New Designset

Remove an existimg item

This would remove the designsets 2 & 3

TCEFORM.tt_news.tx_rgnewsimg_design.removeItems = 2,3

Templates¶

If you want to use this extension you need to set some additional markers in the single view subpart of tt_news. The markers are called ###NEWS_IMAGE_1###, ###NEWS_IMAGE_2###, ###NEWS_IMAGE_3### and so on. You need one marker for every image set.

Non-used markers won't be displayed in the frontend (just up to ###NEWS_IMAGE_10###).

TypoScript¶

There are already 3 demo design sets included with the extension. You can see all 3 at my website http://www.rggooglemap.com/dev/rgnewsimg.html

Get the design sets in TS

Do get the chosen design set with TS you need to use the included condition which needs to be included first (which is already done in the static TS.

# TS Code
includeLibs.rgnewsimg = EXT:rgnewsimg/condition.php
[userFunc = user_rgnewsimg(1)]
...
[global]

The '1' stands for the selected design set with the key 1. You can also set one condition for more designsets by using this syntax:

# TS Code
[userFunc = user_rgnewsimg(4,5,6)]

Override the TS of a design set

To override the settings of the given sets you just need to use a code like this (which would override the settings of the design set #2.

# TS Code
[userFunc = user_rgnewsimg(2)]
plugin.tt_news {
        rgnewsimg = 1
        rgnewsimg {
                split = 1,2,4

                image1 {
                        file {
                                width = 200c
                                height = 200c
                        }
                }
                image3WithCaption.wrap = <div class="news-set2-img3">|</div>
                image3AllWrap.wrap = <div class="news-set2-img3all">|</div>
        }

}
[global]

Styling with CSS

For more information

Please take a look at the ext/rgnewsimg/static/setup.txt if you want to know what all is set by default.

Reference¶

# 1 image followed by 10
split = 1,10
# 2 images followed by 3 followed by 4
split = 2,3,4

image2 {
       file {
               width = 100
               height = 100
       }
       imageLinkWrap = 1
       imageLinkWrap {
               enable = 1
               bodyTag = <body bgColor="#ffffff">
               wrap = <a href="javascript:close();"> | </a>
               width = 500m
               height = 500
               JSwindow = 1
               JSwindow.newWindow = 1
               JSwindow.expand = 17,20
       }

}