Portalview-karuselliohje

Ohje vaihtuvakuvaisen karusellin rakentamiseen Portalviewissä

 

Portalview-näkymään on mahdollista lisätä ns. karuselli, eli kuva, joka vaihtuu itsekseen tietyin väliajoin tai erikseen vaihtonappeja painettaessa. Kuvan alle on mahdollista kirjoittaa tekstiä, joka sekin vaihtuu kuvan mukana. Tuohon tekstiin on myös mahdollista laittaa linkkejä.

Esimerkkeinä Portalview-karusellista kts. yliopiston pääsivu, ISA ja UNO sekä Kauppakorkeakoulu.

Portalview-karuselli toimii hyvin pitkälti samoin kuin Dynapage-karuselli. Sivun suunnittelun kannalta olennaisimmat erot ovat seuraavat:

  • Portalview-karuselleja voi sijoittaa vapaasti ympäri sivuja, siinä missä Dynapage-karusellit rajoittuvat sivun yläreunaan.
  • Portalview-karuselliin liitettävä teksti sijoittuu kuvan alle, kun taas Dynapage-karusellissa se on kuvan vieressä.
  • Kuvan Portalview-karuselliin vaatii hieman enemmän virittelyä (kts. "Kuvan lisääminen karuselliin" alla)

 

Alla tarkemmat ohjeet, jotka sisältävät muut olennaiset erot Dynapage-karuselliin.

 

Karusellin lisääminen

Siirry sarakkeeseen, johon haluat karusellin lisätä, ja valitse "Lisää uusi..."-valikosta kohta "Vaihtuva sisältö".

 

Karusellin asetukset

Erityistä:

  • "Valitse ensimmäinen näytettävä sisältö"
    • Näytetäänkö karusellikuvat satunnaisessa järjestyksessä vai käytetäänkö järjestystä, jonka voi määritellä kansion sisältönäkymässä.
  • "Ohita menettely ja näytä jatkuvasti"
    • Tämän avulla voi valita yhden kuvan näytettäväksi jatkuvasti, siten ettei se vaihdu tietyin väliajoin

Loput asetukset lienevät ilmeisiä.

 

Kuvan lisääminen karuselliin

Portalview-karusellit ovat itsessään kansioita, ja niihin suunnitellut kuvat laitetaan karusellikansioiden sisälle. Kuvat voi lisätä joko suoraan kuvina ("Lisää uusi..."-valikosta kohta "Kuva") tai sivuina ("Lisää uusi..."-valikosta kohta "Sivu"). Kuvien lisääminen suoraan kuvina EI OLE SUOSITELTAVAA, koska tällöin pienellä ruudulla kuvat eivät skaalaudu, vaan leikkautuvat. Lisäksi suoraan kuvina lisättyjen kuvien alle ei ole mahdollista kirjoittaa tekstiä.

Kuvien lisääminen sivuina:

  • Valitse "Lisää uusi..."-valikosta "Sivu". Täytä sivun tiedot kuten tavallisestikin, ja lisää sivun ylälaitaan haluamasi kuva tavallisella kuvanlisäystoiminnolla. Jos haluat kuvan alla näkyvän tekstiä, kirjoita haluamasi teksti suoraan kuvan alle. Jos haluat lisätä tekstiin linkkejä, lisää ne tavallisella linkinluontitavalla - ne tulevat näkyviin myös karusellikuvan tekstiin. Tallenna sivu.
  • Mikäli kuvaa sivulle lisätessäsi latasit karusellin hakemistoon ko. kuvan ("Lähetä tiedosto"-toiminnolla), se tulee näkyviin karuselliin juuri lisäämäsi tekstillisen kuvan lisäksi. Tämä ei yleensä ole toivottavaa. Kuvan saa pois karusellista valitsemalla sen (esim. sisältönäkymässä), klikkaamalla kuvan "Muokkaa"-välilehteä, edelleen klikkaamalle alle ilmestyvää "Asetukset"-välilehteä ja laittamalla sen alla ruksin kohtaan "Piilota sisältöpuusta". Muista tallentaa.

 

Karusellikuvien koosta

Perusohjeet ovat samat kuin Dynapage-kuvilla, eli:

  • Karusellikuvien kannattaa olla samankokoisia keskenään, koska muuten kuvan vaihtuessa ao. sarakkeen korkeus muuttuu. Vaihtuminen aiheuttaa kaiken sarakkeen alapuolisen sisällön hyppäämisen alaspäin, mikä on hyvin ärsyttävää varsinkin, jos karusellikuvat on säädetty vaihtumaan automaattisesti muutaman sekunnin välein.
  • Karusellikuvien tulisi olla nettiin optimoituja, ei suoraan digikamerasta otettuja (= liian isoja ja raskaita). Katso Kuvien käsittely verkkoon ja kuvakoot.

 

Kuvien leveys:

Kuvien sopiva leveys riippuu sarakkeesta, johon ne ovat tulossa, tarkalleen ottaen tuon sarakkeen leveydestä suhteessa koko sivun leveyteen. Muutamia olemassaolevia esimerkkejä:

  • Yliopiston pääsivun, ISA:n ja UNO:n kuvat: leveys 580 pikseliä, korkeus 280 pikseliä, jotkut vähän kapeampia.
  • Kauppakorkeakoulun sivun kuva: leveys 960, korkeus 180 pikseliä.

 

Yleisenä sääntönä suurinpiirtein:

Sarakkeen leveys

suhteessa sivuun

Sopiva kuvan leveys
20% 230px
25% 285px
30% 345px
40% 460px
50% 580px
60% 695px
70% 810px
80% 935px
90% 1050px
100% 1165px

(Perustuu elokuun 2012 asetuksiin Plone 4- sivujen leveydestä, saattaa muuttua tulevaisuudessa.)

  • Jos kuvat ovat sarakkeeseen liian leveitä esim. näytön pienuuden takia, ne skaalautuvat automaattisesti pienemmiksi - tämä siis sillä ehdolla, että ne on lisätty sivuina eikä kuvina.
  • Sen sijaan liian pienet kuvat eivät skaalaudu isommiksi, vaan jättävät tyhjää tilaa sarakkeen oikeaan reunaan.
  • Jos on epävarma koosta, kannattaa siis ennemmin tehdä hieman liian suuria kuin liian pieniä kuvia.