Korazci za integraciju novog projekta
1. PROMENA DOMENA U EKSTENZIJI
2. PROMENA JS FAJLOVA
3. CSS FAJLOVI I NJIHOVO INKLUDOVANJE
4. PARSAL HEADER CONTENT
          5. logo
          6. Meni
7. Backend Layouts-e
8. Kod glavnog slajdera i banera moze da se desi da slika se vuce iz css-a
9. tx news
          10. News delovi rekorda
11. Problemi i napomene
12. DCE editor za kontent elemente
13. CSS i Jquery trikovi
14. Mail form defoult




1. PROMENA DOMENA U EKSTENZIJI

skine se ekstenzija na desktop i tu se ide srch kroz fajlove i replase stari domen sa novim
domenom projekta.
uglavnom se menja samo u ovom fajlu:
C:\Users\darkf_000\Desktop\typo3 ucenje\cool tool ekstenzija\tool_provider_savhsom\Configuration
\TypoScript\lib\General.ts

    *** doda se u edit the whole template ekstenzija i cekira se options tab sve!

    *** ako nije setovan munjica za empty all caches, ide se u instal tool, all configuration i kuca
    se u srcu caches,i klikne se boolian:

[SYS][clearCacheSystem] = 1
Boolean: If set, the toolbar menu entry for clearing system caches (core cache, class cache, etc.) is visible for admin users.

    *** treba srediti kompajler css ili izgenerisati ceo main css,
    sredjuje se tako sto folderi moraju da imaju 755 privilegije dok fajlovi 644


2. PROMENA JS FAJLOVA

Configuration/TypoScript/lib/Scripts.ts u tom fjlu se zameene svi js fajlovi.
paziti na Jquery!

pronaci koji je jQueri i staviti ga u prvi
zamenjuju se fajlovi u putanjama najbolje tako sto se starima doda niz recimo
dddddddddddddd kako bi znao gde si stao.
posle zamnjivanja ide reimenovanje naziva.
Paziti naziv da se ne ponavlja 2 puta
poslednji napraviti main.js koji ce da bude moj

3. CSS FAJLOVI I NJIHOVO INKLUDOVANJE

nalaze se u istom fajlu kao i iznad js fajlovi.

ako se koristi sass onda je main.css
dev = EXT:tool_provider/Resources/Public/css/style.php/main.scss
i iz tog foldera treba sve da se iscisti na serveru

ako se ne koristi sas onda se koristi main.css samo se odkomentarise.

4. PARSAL HEADER CONTENT

html se razbije na tri dela i podeli se u ta tri fajla
i onda se krece od logoa.

5. logo

se uploaduje u public/images gde se prethodno pobrisu sve slike sa
predjasnjeg projekta
onda se ide u Configuration/TypoScript/lib/libraries.ts i tu se setuje novi logo
potom u parsalu heder se samo stavi  {logo -> f:format.raw()}

*** stvari koje mogu da se ubacuju u parsale preko kontenta u bekendu!
u typoscriptu se stavi (pageContent.js):

lib.fluidText = RECORDS
lib.fluidText {
    tables = tt_content
    source = 68
}
lib.impressum = RECORDS
lib.impressum {
    tables = tt_content
    source = 491
    wrap = <div class="header-impressum">|</div>
}

i poziva se u fluidu:

<f:cObject typoscriptObjectPath="lib.fluidText" />
<f:cObject typoscriptObjectPath="lib.impressum" />


6. Meni

*** Meni, root strana mora da bude parent svim ostalim stranama!!! nalazi se u parsalima mobil i desktop meni

koristim vhs i ovo je u posebnom fajlu objasnjeno
prvaimo u parsalima posebne partiale za meni i onda ga pozivmo u parsalu heder:
<f:render partial="DestkopMenu" arguments="{_all}" />

Da bi vhs meni krenuo od neke druge stranice a ne od roota treba samo da se u pocetnom vhs menu wrapu doda parametar, tj id stranice od koje da se krene, nju iznad i ispod vrapovari separator stranicama:

<v:page.menu pageUid="85" levels="2" expandAll="true" >

7. Backend Layouts-e oni se nalaze u
connfig/pageTsConfig/libBackendLayouts.ts

Svako templejt ima svoj be lejaut kao sto se vidi

Dalje se prave promenjive od pozicija u layoutu i to u TypoScript/lib/pageContent
i potom se te promenive
        topContent < styles.content.get
        topContent.select.where = colPos = 1

 pozivaju se u templejtu:
{topContent -> f:format.raw()}

Napomena! koliko ce biti kolona i redova regulise se na pocetku belayouta:


*** Kako se pravi novi be layouts i inner template

iskopira se be layouts i pazi se da se zove kao sto ce se zvati templejt : 


onda se koristi postojeci ili napravi poseban layouts za inner stranicu i on se poziva u templejtu iste: 

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Main" />
    <f:section name="main">
       
    </f:section>
</html>

paziti kod bekend lajouta sta sve ukljucuje u redove a sta u kolone!

2 Reda :

rows {
    {
        columns {
            {
                name = Gornja Sekcija
                colPos = 9
                colspan = 1
            }
        }
    }
    {
        columns {
            {
                name = Donja Sekcija
                colPos = 10
                colspan = 1
            }
        }
    }
}

Jedan red 2 kolone:

rows {
    {
        columns {
            {
                name = Content
                colPos = 0
            }
            {
                name = Image
                colPos = 4
            }
        }
    }
}
 

8. Kod glavnog slajdera i banera moze da se desi da slika se vuce iz css-a i onda treba
da se uradi sledece:

temp.image = IMG_RESOURCE
temp.image{
    file.width = 1920c
    file.maxW = 1920c
    file.import.data = levelmedia:-1,slide
    file.treatIdAsReference = 1
    file.import.listNum = 0
    file.import.override.field = media
    required = 1
}

lib.banner.image < temp.image

i u templejtu:

 <div class="banner" style="background-image: url({f:cObject(typoscriptObjectPath: 'lib.banner.image')})">

9. tx news

Prvo se instalira iz repozitorijuma!

2 avgust 2017 news system news 4.3.0

Onda se ide u configuration/typoscript/constant.ts . napomena!!! cool tool ekstenzija mora biti inkludovana poslednja kako bi gazila sve redom!!!

i poveze se novi pat za templejte:

plugin.tx_news {
  view {
    templateRootPath = EXT:tool_provider/Resources/Private/Templates/news/
    partialRootPath = EXT:tool_provider/Resources/Private/Partials/news/
    layoutRootPath = EXT:tool_provider/Resources/Private/Layouts/news/
  }
}


I onda se iskopiraju iz kora tx_newsa templejti u odgovarajuce putanje

sada se ide u Templates/News/list.html

i pejstuje se kod izmedju tagova:

<f:section name="content">
   <!--TYPO3SEARCH_end-->

    <!--TYPO3SEARCH_begin-->
</f:section>
i tu se setuje za svaki list news koji cemo imati, i to tako gde im se dodeljuju brojevi za svaki case. stavljaju se u list folder i onda ide ime parsala bez ekstenzije(Slider):

<f:if condition="{news}">
    <f:then>
        <f:if condition="{settings.templateLayout} == 1">
            <div id="main-slider" class="flexslider">
                <ul class="slides">       
                    <f:for each="{news}" as="newsItem" iteration="iterator">
                        <f:render partial="List/Slider" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
                    </f:for>
                </ul>
            </div>           
        </f:if>
        <f:if condition="{settings.templateLayout} == 2">
            <f:for each="{news}" as="newsItem" iteration="iterator">
                <f:render partial="List/HomeNewsTop" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
            </f:for>
        </f:if>
    </f:then>
    <f:else>
        <div class="no-news-found">
            <f:translate key="list_nonewsfound" />
        </div>
    </f:else>
</f:if>

Potome se u PageTsConfig/lib/general.ts ili u bekendu u root page propertiju u tabu resource doda Page TSConfig:

tx_news.templateLayouts {
    1=slider
    2=homeNewsTop
    3=homeNewsMiddle 
    4=homeNewsBottom
}

Potom se u listu folderu prave templejti za njuzove i to tamo se stavlja templejt samo za pojedinacne njuzove dok wraperi celog lista
treba da se stave u list.html .  primeri sa sajta milica.darkforestweb.com:

1.
{namespace n=GeorgRinger\News\ViewHelpers}
<li class="col-lg-3 design" data-id="id-0" data-type="web">
    <div class="item-thumbs">
        <f:for each="{newsItem.falMedia}" as="image" iteration="imageIteration">
            <!-- Fancybox - Gallery Enabled - Title - Full Image -->
            <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="{newsItem.title}" href="<f:uri.image src="{image.uid}" treatIdAsReference="1" />">
            <span class="overlay-img"></span>
            <span class="overlay-img-thumb font-icon-plus"></span>
            </a>
            <!-- Thumb Image and Description -->
             <f:image src="{image.uid}" treatIdAsReference="1" title="{newsItem.title}" alt="{newsItem.teaser}" minWidth="{settings.media.maxWidth}c" minHeight="{settings.media.maxHeight}c" maxWidth="{settings.media.maxWidth}c" maxHeight="{settings.media.maxHeight}c" width="{settings.media.maxWidth}c" height="{settings.media.maxHeight}c" />

        </f:for> 
    </div>
</li>

2.
{namespace n=GeorgRinger\News\ViewHelpers}
<div class="col-lg-3">
  <div class="box">
    <div class="box-gray aligncenter">
      <h4>{newsItem.title}</h4>
      <div class="icon">
        <i class="fa {newsItem.author} fa-3x"></i>
      </div>
      <p>
       {newsItem.teaser}
      </p>
    </div>
    <div class="box-bottom">
      <n:link newsItem="{newsItem}" settings="{settings}" class="more" title="{newsItem.title}">
        <f:translate key="more-link"/>
      </n:link>
    </div>
  </div>
</div>
3.
{namespace n=GeorgRinger\News\ViewHelpers}
<li>
    <f:if condition="{newsItem.falMedia}"> 
        <f:for each="{newsItem.falMedia}" as="image" iteration="imageIteration">
            <f:if condition="{imageIteration.isFirst}">
                <f:image src="{image.uid}" treatIdAsReference="1" title="{newsItem.title}" alt="{image.originalResource.alternative}" maxWidth="{settings.media.maxWidth}c" maxHeight="{settings.media.maxHeight}c" width="{settings.media.maxWidth}c" height="{settings.media.maxHeight}c" />
            </f:if>
        </f:for>
    </f:if>
    <div class="flex-caption">
        <h3>{newsItem.title}</h3>
        <p>{newsItem.teaser}</p>
        <n:link newsItem="{newsItem}" settings="{settings}" class="btn btn-theme" title="{newsItem.title}">
            <f:translate key="more-link"/>
        </n:link>
    </div>
</li>

napomena, ovo mora biti setovano u news plaginu :




News delovi rekorda:

Header --> title  --> {newsItem.title}
Alternativni title --> alternativeTitle--> {newsItem.alternativeTitle}  / ovo moze da bude jos jdan naslov
Teaser --> teaser --> {newsItem.teaser}
Author Name--> author--> {newsItem.author}
Author Email--> authorEmail--> {newsItem.authorEmail}
Rich Text Editor--> bodytext--> {newsItem.bodytext}
Related Links --> relatedLinks-->{newsItem.relatedLinks } a radi se ovako:
<href="#" class="button">Read More</a>
<f:if condition="{newsItem.relatedLinks}">
    <f:translate key="related-links" />
    <f:for each="{newsItem.relatedLinks}" as="relatedLink">
            <f:link.page pageUid="{relatedLink.uri}" class="button" title="{relatedLink.title}" target="{n:targetLink(link:relatedLink.uri)}">{f:if(condition: relatedLink.title, then: relatedLink.title, else: relatedLink.uri)}</f:link.page>
            <f:if condition="{relatedLink.description}"></f:if>
    </f:for>
</f:if>


Date & Time --> datetime --> {newsItem.datetime} --> mora u fluidu da se poziva sa : 
<f:format.date format="d/m/y">{newsItem.datetime}</f:format.date> --> pokazuje ceo datum kojim hocemo redom
<f:format.date format="d.m.Y - H:i:s">{newsItem.datetime}</f:format.date> pokazuje datum sa satima minutima i sekundima

<f:format.date format="d">{newsItem.datetime}</f:format.date>  --> pokazuje samo dane
<f:format.date format="m">{newsItem.datetime}</f:format.date>  --> pokazuje samo mesece
<f:format.date format="Y">{newsItem.datetime}</f:format.date>  --> pokazuje samo godinu

<f:format.date format="%d. %b %y">{newsItem.datetime}</f:format.date> --> pokazuje mesece tekstom skraceno i godine brojom skraceno:
12. Aug 17
<f:format.date format="%d. %B %Y">{newsItem.datetime}</f:format.date> --> pokazuje mesece tekstom i pun datum:
12. August 2017

Media file --> falMedia --> {newsItem.falMedia} treba preko fluida:

<f:for each="{newsItem.falMedia}" as="image" iteration="imageIteration">
    <f:if condition="{imageIteration.isFirst}">
        <f:image src="{image.uid}" treatIdAsReference="1" title="{newsItem.title}" alt="{image.originalResource.alternative}"   />
    </f:if>
</f:for>

ovo je za jednu sliku.

More link:

<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
    More
</n:link>

11. Problemi i napomene

*** Ako rte nema ikonicu za upload slike treba da se urade sledeci koraci:

  1. In Extension Manager open the configuration of htmlAREA RTE and enablebasic.enableImages.

  2. In page-TSconfig add the following TypoScript:

    RTE.default {
        ## Enable the image button
        showButtons := addToList(image)

        ## Tags allowed outside p and div
        ## Adding img tag to the default list
        proc.allowTagsOutside := addToList(img)

        ## Do not remove img tags
        proc.entryHTMLparser_db.tags.img >
    }
    RTE.default.FE.showButtons < RTE.default.showButtons
    RTE.default.FE.proc.allowTagsOutside < RTE.default.proc.allowTagsOutside
    RTE.default.FE.proc.entryHTMLparser_db.tags.img >
*** Ako rte izbacuje html tagove mora da se pozove u fluidu :

<f:format.html>{content.bodytext}</f:format.html>
*** Takodje ako se pojavljuju glupi fantomski  p tagovi mora da se doda gornjem formatu <f:format.html parseFuncTSPath="lib.parseFunc">

lib.parseFunc mora da se stavi ili nece raditi linkovi!!!!


*** Ako rte resajzuje sliku na vise mra da se ide u instal tool all configuration i da se ovo setuje na 1:
$TYPO3_CONF_VARS['GFX']['im_noScaleUp']

*** default typo3 mail form nece da radi ako se odma ide na nju nego nekad treba prvo otici na neki drugi elemenat, recimo login formu, i onda se iz general taba izabere mail forma i onda ce da daje ikonicu i radi kako treba

12. DCE editor za kontent elemente

Instalira se DCE i onda iz levog dela klikne se na modul, tu se izabere da ne bude inline
i prave se fildovi i promenjive, koji se potom u templejtu pozivaju:
{field.desninaslov}


- za sliku pravi se promenjiva i poziva se u templejtu:

<f:for each="{dce:fal(field:'pictures', contentObject:contentObject)}" as="fileReference" iteration="iterator">
        <f:if condition="{iterator.isFirst}">
                <f:image src="{fileReference.uid}" alt="" treatIdAsReference="1"/>
        </f:if>

- Link, da bi radio u slici u falu mora da se vrapuje f:if :
<f:for each="{dce:fal(field:'pictures', contentObject:contentObject)}" as="fileReference" iteration="iterator"> <dce:typolink parameter="{fileReference.link}">
     <f:if condition="{iterator.isFirst}">
          <f:image src="{fileReference.uid}" alt="" treatIdAsReference="1" />
     </f:if>
</dce:typolink>
</f:for>
u dce elementu mogu da se nestuju ts libovi ili da se pozivaju parsali. ali bi trebalo dodati dva name spaceta:

{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace flux=FluidTYPO3\Flux\ViewHelpers}

Libovi se jednostavno nestuju na mesto u fluidu koje hocemo, recimo: 

<f:cObject typoscriptObjectPath="lib.logoMain" /> moze se samo staviti bilo gde, dok parsali:
<f:render partial="Menu" arguments="{_all}" /> gadjaju parsale od dce ekstenzije, zato ih treba izdvojiti isto ka iz za njuzove.

Znaci napravi se folder dce u layoutsima, parsalima i templatesima u cool tool ekstenziji i tu se iskopira sve iz dce ekstenzije


13. CSS trikovi 

*** Kako da pogodi svaki drugi element u nizu:

.container .textmedia:nth-child(22) > .accordion-item{...

*** kako da uvek meni bude na vrhu posle jednog skrola:

$(window).bind('scroll'function () {
    if ($(window).scrollTop() > 50) {
        $('.navbar-right').addClass('fixed');
    } else {
        $('.navbar-right').removeClass('fixed');
    }
});

gde treba napraviti jos css klasu .fixed

.fixed{
    position: fixed;
    top: 0;
    right: 20px;
    z-index: 50;
}

14. Mail form defoult

*** default typo3 mail form nece da radi ako se odma ide na nju nego nekad treba prvo otici na neki drugi elemenat, recimo login formu, i onda se iz general taba izabere mail forma i onda ce da daje ikonicu i radi kako treba

Polje da bi se prihvtlo mora da se klikne na zeleni check! :