Jeg var i gang med at lave et nyt design til Højen Portalen og ville gerne have en forside som gav et overblik over hvad der sker i vores lille by. Men da jeg både skulle have plads til Nyheder, arrangementer og indlæg fra vores lokale blad var det lidt svært.

Jeg ville gerne finde et modul som kunne vise et billede og den korte nyheds beskrivelse og så rulle videre til næste nyhed, efter lang tids søgen fandt jeg jpCarousel. Til at starte med kunne jeg slet ikke få det til at virke, og jeg brugte mange timer til at finde ud af hvordan det hang sammen. Manualen er ikke serlig god. Men her kommer min opskrift.

1. Start med at installere modulet, husk at inkluder det i din template.
2. Følgende indsættet i constant under din template

   plugin.tx_jpcarousel_pi1.pauseDuration = 1500
   plugin.tx_jpcarousel_pi1.visible = 1
   plugin.tx_jpcarousel_pi1.speed = 100
   plugin.tx_jpcarousel_pi1.carouselWidth = 450
   plugin.tx_jpcarousel_pi1.carouselHeight = 350
   plugin.tx_jpcarousel_pi1.itemMaxW = 440
   plugin.tx_jpcarousel_pi1.itemMaxH = 350
   plugin.tx_jpcarousel_pi1.useButtons = 0
   plugin.tx_jpcarousel_pi1.altTitlePreviousButton = Forrige
   plugin.tx_jpcarousel_pi1.altTitleNextButton = Næste
   plugin.tx_jpcarousel_pi1.carouselBgColor = black
   plugin.tx_jpcarousel_pi1.pathToJPcarouselCSS = fileadmin/templates/nyhoejen10/jpcarousel.css #stien til CSS filen

3. Lav nu en ny template til tt_news som ser sådan ud:

   
   <!-- 		IMPORTANT: The stylesheet link below is only for testing the template file directly in a browser while editing it. 		On the website the css styles for tt_news have to be include with the static TS template "default CSS style (tt_news)" or 		with an external file (see tt_news/res/tt_news_v2_styles.css) which you include via TypoSript in the "page" object.    -->
   <h1>NEWS TEMPLATES</h1>
   <h2>EXAMPLE</h2>
   <pre><strong>Common markers:</strong>
   These are substituted in all news item displaying templates:
   
   <em>Markers:</em>
   NEWS_UID - ID number (uid) of the news item
   NEWS_TITLE - News item title
   NEWS_AUTHOR - name of author
   NEWS_EMAIL - email of author
   NEWS_DATE - date
   NEWS_TIME - time
   NEWS_AGE - age of news item in minutes, hours, days or years
   NEWS_SUBHEADER - subheader, if empty main content is inserted here in LIST and LATEST
   NEWS_CONTENT - main content
   NEWS_LINKS - news links
   NEWS_CATEGORY - news item category
   NEWS_CATEGORY_IMAGE - news item category image
   NEWS_RELATED - links to related news
   NEWS_IMAGE - news item images
   NEWS_CATEGORY_ROOTLINE - category rootline
   
   PAGE_UID - Page id of the parent page (pid)
   PAGE_TITLE - Title of the parent page of the news item
   PAGE_AUTHOR - Page author, if any
   PAGE_AUTHOR_EMAIL - Page author email, if any
   
   <em>News Language Markers (see pi/locallang.php):</em>
   LATEST_HEADER - header for the LATEST element
   GOTOARCHIVE - link to archive page in latest template
   ARCHIVE_HEADER - same for AMENU
   MORE - more <img src='http://kaae.dk/wp-includes/images/smilies/icon_wink.gif' alt=';-)' class='wp-smiley' />
   TEXT_CAT - text output before categories and category images in LIST view (eg: 'categories:')
   TEXT_CAT_LATEST - the same in a shorter form for the LATEST element (eg: 'cat:')
   BACK_TO_LIST - link back to list-view in single-view template
   ARCHIVE_EMPTY_MSG - no items in archive
   SEARCH_EMPTY_MSG - message for empty search results
   TEXT_NEWS_AGE - text inserted before the age of the news item
   
   <em>Wrapped Subparts:</em>
   LINK_ITEM - link to the news item single display
   LINK_PREV - used in the pagebrowser
   BROWSE_LINKS - used in the pagebrowser
   LINK_NEXT - used in the pagebrowser</pre>
   <hr />
   <h3>TEMPLATE_LATEST</h3>
   <em>This is the template for the latest news, typically displayed on a frontpage.</em>
   
   <!-- ###TEMPLATE_LIST### begin 	This is the template for the latest news, typically displayed on a frontpage -->
   <div class="news-latest-container">
   <ul id="jpcarousel"> <!-- ###CONTENT### begin 		This is the part of the template substituted with the list of news: 	-->
   <!-- ###NEWS### begin 			Template for a single item 		-->
   	<li>
   <div class="news-latest-item">
   <h2><!--###LINK_ITEM###-->###NEWS_TITLE###<!--###LINK_ITEM###--></h2>
   <!--###LINK_ITEM###-->###NEWS_IMAGE###<!--###LINK_ITEM###-->
   <!--###LINK_ITEM###-->###NEWS_SUBHEADER###<!--###LINK_ITEM###-->
   
   </div></li>
   <!-- ###NEWS### end-->
   <!-- ###CONTENT###  end --></ul>
   </div>
   <!-- ###TEMPLATE_LIST### end -->
   
   <hr />
   

4. Lav nu en ny side som er skjult, hvor du indsætter tt_news list. Her vælger du den nye template som du lige har lavet. Under fanen skabelon sætter du billedet til Max width for images in news records (accepts optionSpli): 100 og Limit: 6
5. Nu indsætter du jpCarousel på forsiden, fortag indstillingerne som her under:
   Under Choose content element with list items, vælger du den side med nyheder som du lige har lavet.

   

6. Nu skal du gerne have to nyheder vist på samme tid der ruller til vestre efter et stykke. Du kan se her hvordan det ser ud http://nyhoejen.dk