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 -->
  • No labels