Dizaina saudzētājs no lielizmēra bildēm

Lappuse 1 no 1
1

Skorpions

Piektdiena, 23.09.2011, 5:06:11 | Ieraksts #1

PRASTS BIEDRS

Foruma ieraksti: 1

UWM Reputācija:

uWEBMEISTARS ordeņi:

1. līmenis

2. līmenis

3. līmenis

Jaunākie apbalvojumi:
Lietotājs nav saņēmis apbalvojumus

@Skorpions raksta .. :

Ļoti bieži, mūsu portāla lietotāji negrib saprast, kad viņu ievietotie SuperGigantiskie attēli forumos un rakstos var izbojāt visu dizainu. Tas pats attiecās arī uz citiem ārējiem resursiem, kuru informāciju mēs gribam ievietot savos resursos ar RSS palīdzību.
Parasti tie ir attēli, kas rakstos vai forumos tiek ievietoti ar BB kodu palīdzību IMG un /IMG. Tieši šī iemesla dēļ, mums ir nepieciešams kaut kādā veidā savu portālu pasargāt, lai viņu attēli neizbojā kopējo stilu.

Šo problēmu var atrisināt sekojoši:

1. IDentifikatora parametra piešķiršana:

Savos CSS-os, pašā augšā ieliekam šādu kodiņu:

Code

#imgfix img{max-width:500px}

šis kods, attēlu samazinās automātiski līdz izmēram 500px. Kā augstumā, tā platumā. Respektīvi, ja lietotājs ieliks attēlu, kura parametri būs 1600X900, tad attēlots tas tiks 500x281. Bet ja attēla izmērs būs 900x1600, tad samazinās uz 281X500. Respektīvi, lielāko pikseļu skaitu aizvieto ar 500 un samazina atlikušo malu līdz automātiskam izmēram.

Šajā kodā "max-width:500px" attēlu samazina kā uz vienu, tā uz otru pusi. Bet ko darīt gadījumos, ja mums platums un augstums ir jābūt ierobežotā tēlpā. Teiksim, mums ir kaut kāds lauks, kur attēls nedrīkst pārsniegt 80px augstumā un 145px platumā?
Šajā gadījumā, mēs imgfix piešķiram - kā augstuma, tā platuma parametrus ar sekojošu kodu:

Code

#imgfix img{max-height:80px; max-width:145}

Šis kods, mums attēlu automātiski samazinās līdz zemākā attēla parametram, neļaujot pārkāpt 80px robežu.

Principā, IDenfikātoru #imgfix, jūs varat nosaukt kā gribat. Saucat viņu kaut pa naktspodiņu. Galvenais, lai paši saprotat- kas tas par podiņu ir, un ko tas podiņš dara jūsu webā.

Code

#naktspodiņš img{max-width:500px}
#naktspodiņš img{max-height:80px; max-width:145}

Šādu IDenfikātoru, jūs varat izveidot katram modulim, katram laukam, un citam DIV masīvam atsevišķu. Galvenais ir šo lauku apzīmēt ar noteikta IDenfikātora nosaukumu. Man portālā iekš CSS-a stāv sekojoši Identifikatori:

Code

#imgfix_NEWS img{max-height:300px; max-width:620}
#imgfix_WEBCATALOG img{max-height:80px; max-width:145}
#imgfix_FORUM img{max-width:500px}
#imgfix_MUSIC img{max-height:100px; max-width:100}
#imgfix_AVATAR img{max-height:110px; max-width:110}

Tā tad - imgfix + moduļa nosaukums. Kas ļauj man orientētie - kuru IDentifikatoru, kuram modulim varu pielietot.

2. IDentifikatora piesaiste šablonam:

Dotajam IDentifikatoram būs jāstrādā kaut kādā noteiktā laukā, vai vietā. Tāpēc mēs viņu ieslēgsim DIV masīvā.
Teiksim, par piemēru paņemsim moduli NEWS > Materiālu skats (zaļā lapa). Tur mums ir operators $MESSAGE$, kas atbild par materiāla saturu.
Ja jūsu šablonos, operators $MESSAGE$ nav iekļauts kaut kādā DIV masīvā, tad viņš jums būs jāiekļauj, piešķirot tam unikālo ID "imgfix_NEWS". Un kā jau mēs iekš CSS noteicām, tad šis ID mums atbilst parametriem: max-height:300px; max-width:620

Code

<div id="imgfix_NEWS">$MESSAGE$</div>

Gadījumā, ja operātors jau atrodās iekļauts kaut kādā DIV masīvā, teiksim oriģinālajos šablonos ir šāds:

Code

<div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">$MESSAGE$</div>

Tad pie šī DIV, mēs klāt pieliekam to IDentifikatoru "imgfix_NEWS"

Code

<div id="imgfix_NEWS" class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">$MESSAGE$</div>

-----------------------

Principā, tas arī ir viss!
Visi attēli, kas izies ārpus mūsu noteiktajiem parametriem tiks samazināti tanīs vietās, kur atradīsies

Code

<div id="imgfix_YYYYY">XXXXXX</div>

Vienīgi paši atceramies - kās kāds ID mums ir.

Code

Un atceramies, kad operators $MESSAGE$ mums neatrodas tikai materiālu skatā (zaļajās lapās), bet arī kaut kādos informeros, Materiāls ar komentāriem un citās HTML šablonos. Tur mums tos arī vajadzēs labot.

Un bez operatora $MESSAGE$, mums jau ir arī citi operatori, kas atbild pa attēliem... teiksim $OTHER1$ vai $IMG_URL$....

Kvešns uwgetboored