Sisältösivut
Sivun otsikon määrittely sisältösivulle:
<? $this->headTitle($this->translate('Tietoa meistä')); $this->content()->setHeading($this->translate('Tietoa meistä'));?>
- $this->content()→setHeading määrittää sivulle automaattisesti h1-tason otsikon. Määrityksen voi jättää pois, mikäli sivulle on määritelty muuten h1-tason otsikko.
Kuvan sijoittaminen sivulle /themes/custom/images -hakemistosta:
<img alt="Tähän tekstivastine kuvalle" src="<?=$this->imageSrc('tiedostonimi.jpg')?>">
Kuvilla on saavutettavuusvaatimusten mukaan oltava jokin vaihtoehtoinen teksti (alt-attribuutti). Vaihtoehtoisen tekstin avulla kerrotaan kuvan sisältämä tieto käyttäjille, jotka eivät jostain syystä näe itse kuvaa. Vaihtoehtoisen tekstin (alt-attribuutti) sisällön voi kuitenkin määritellä tyhjäksi seuraavissa tapauksissa:
- Kun kyseessä on koristekuva tai
- kuvan sisältö on merkityksetön muun sisällön suhteen eli kuva vain kuvittaa tekstisisältöä tai
- kuvan sisältö on kuvailtu muuten tyhjentävästi ympäröivässä tekstissä tai
- näkyvä kuvateksti on sama kuin alt-teksti olisi.
Tyhjä alt-teksti merkitään img-elementiin alt="" .
Linkitys näkymän sisällä:
<p>Linkki <a href="<?=$this->url('content-page', ['page' => 'help'])?>">ohjesivulle</a></p>
Tiedostolinkin sijoittaminen sivulle /themes/custom/files -hakemistosta:
<a href="<?=$this->fileSrc('tiedosto.pdf')?>">Lataa tiedosto</a>
Suosikkilistan upottaminen:
<?= $this->userlistEmbed(['id' => 395901]); ?>
RSS-upokkeet
RSS-syötteen asetukset tehdään Muut asetukset välilehdellä. Tämän jälkeen syöte sijoitetaan sivulle:
<?=$this->feed('news'); ?>
Useampi RSS-syöte voidaan myös esittää välilehdille eroteltuna:
<?=$this->feedTabs(['title' => 'Otsikko', 'ids' => ['Tapahtumat' => 'news', 'Uutiset' => 'carousel', 'Muuta' => 'carousel-small']])?>
Sisältösivun sisäinen navigaatio
Siältösivulle voidaan lisätä sivun sisäinen navigaatio, minkä avulla voi helposti siirtyä sivun osien välillä.
<div class="row"> <div class="col-sm-3 sidebar"> <div class="content-navigation-menu"> </div> </div> <div class="col-sm-9"> <div id="esim1" class="content-section"> <h2>Sivun ensimmäinen osa</h2> <p>Lorem ipsum</p> </div> <div id="esim2" class="content-section"> <h2>Sivun toinen osa</h2> <p>Lorem ipsum</p> </div> </div> </div>
Navigaatioon lisättäviin osioihin lisätään "content-section" -luokka ja osion tunniste "id" -attribuuttiin.
Navigaatiopalkki sijoitetaan automaattisesti "content-navigation-menu" luokan määrittämään elementtiin.
Navigaatiopalkin some-linkit
Navigaatiopalkissa on varattu tilaa omalle sisällölle sivupohjassa:
/themes/custom/templates/content/Additions/header-navibar.phtml
Sivupohjaan voi sijoittaa some-ikoneita seuraavasti:
<li class="custom"> <a href="https://facebook.com/omasivu" target="_blank"> <i class="fa fa-facebook-button"></i> <span class="sr-only visible-md visible-lg"><?=$this->transEsc('Facebook');?></span> <span class="hidden-sm hidden-md hidden-lg"><?=$this->transEsc('Facebook'); ?></span> </a> </li> <li class="custom"> <a href="https://twitter.com/omasivu" target="_blank"> <i class="fa fa-twitter"></i> <span class="sr-only visible-md visible-lg"><?=$this->transEsc('Twitter');?></span> <span class="hidden-sm hidden-md hidden-lg"> <?=$this->transEsc('Twitter'); ?></span> </a> </li>
Samaan tapaan lisätään omaa sisltöä muihin Addtions-sivupohjiin.
Footer (sivuston alatunniste)
Sivuston alatunniste sijoitetaan tiedostoon /themes/custom/templates/footer.phtml.
Kieliversiokohtaisia ulkoisia linkkejä tehdään seuraavasti:
<? if ($this->layout()->userLang === "fi"): ?> <a href="http://www.jokudomain.fi/ target="_blank">Linkki</a> <? endif; ?> <? if ($this->layout()->userLang === "sv"): ?> <a href="http://www.jokudomain.fi/sv" target="_blank">Länk</a> <? endif; ?> <? if ($this->layout()->userLang === "en-gb"): ?> <a href="http://www.jokudomain.fi/en" target="_blank">Link</a> <? endif; ?>
Selaa-palkki
Selaa-palkki näytetään etusivulla hakuosion alla ja siinä voi näyttää esimerkiksi linkkejä hakutuloksiin.
Palkkia muokataan tiedostossa /themes/custom/templates/search/home/browsebar.phtml
<!-- START of: finna - search/browsebar.phtml --> <div class="browsebar"> <div class="container"> <div class="browse-link text-center hidden-xs"><a href="Content/organisations"><i class="iconlabel finna-logo"></i><?=$this->transEsc('finna_material_providers')?></a></div> <nav class="navbar"> <span class="browsebar-title"><?=$this->translate('Browse')?></span> <div class="wrapper resize-drag nav-wrapper"> <ul class="nav navbar-nav nav-ul"> <li><a class="iconlabel format-1imageimage" href="Search/Results?lookfor=&type=AllFields&filter%5B%5D=~format%3A%220%2FImage%2F%22&filter%5B%5D=online_boolean%3A1"><?=$this->transEsc("format_Image_plural")?></a></li> <li><a class="iconlabel cc-license" href="Search/Results?sort=author&limit=50&view=grid&filter%5B%5D=online_boolean%3A%221%22&filter%5B%5D=~usage_rights_str_mv%3A%22usage_B%22&filter%5B%5D=~usage_rights_str_mv%3A%22usage_A%22&type=AllFields"><?=$this->translate('unrestricted_collections');?></a></li> <li><a class="iconlabel finna-street" href="Search/StreetSearch?go=1">Finna Street</a></li> <li><a class="iconlabel format-1journalarticle" href="Search/Results?type=AllFields&filter%5B%5D=~format%3A%220%2FJournal%2F%22"><?=$this->transEsc("format_Journal_plural")?></a></li> <li><a class="iconlabel format-1physicalobjectother" href="Search/Results?type=AllFields&filter%5B%5D=~format%3A%220%2FPhysicalObject%2F%22&filter%5B%5D=online_boolean%3A1"><?=$this->transEsc("format_PhysicalObject_plural")?></a></li> </ul> </div> </nav> </div> </div> <!-- END of: finna - search/browsebar.phtml -->