[ owim @ 29.04.2011. 03:43 ] @
Zdravo svim WP-ovcima!

Početnik sam na WP.com-u, free account. Problem:

1) Želim na stranici da prikažem sliku koja se nalazi na netu i da je prikažem u manjoj veličini, podešavanjem width i height vrednosti -- browser to "zanemari", uvek prikaže sliku u punoj veličini, iako u HTML kodu pišu vrednosti koje sam izabrao.

2) Ovo se ne dešava ako sliku učitam u wp.COM Media Gallery, onda mogu da joj menjam width i height, pravilno će se prikazati.

(U oba slučaja ne editujem izvornu sliku, već njen prikaz.)

Zašto se ovo dešava?

Mogu problem da rešim zaobilazno, da sve slike DL-em, obradim, onda UL na Net u željenoj rezoluciji -- to traje. Daleko brže mi je da nažem željene slike na netu, učitam ih u svoj ImageShack account i linkujem na te slike, koje su raznim veličinama, ali ih resize-ujem u prikazu, ne fizički. Ovaj način je daleko brži jer sve slike su bile i ostaju online, mogu da se fokurisam na tekst i sadržaj a ne formu.

wp.COM ima 3GB prostora i zato koristim ImageShack kao svoje "online skladište slika". Nisam u fazonu da apgrejdujem na wp.ORG.

Još jednom, u oba slučaja sam iz broswer-a pogledao izvorni HTML kod stranice i stoje vrednosti za slike koje sam ja upisao, ali će umanjena slika biti prikazana samo ako je iz wp.COM Media Gallery. WTF? Naravno, probao sam sve browser-e.

* * *

Problem je jednostavan, ako treba mogu slikama da prikažem, možda su malo veće.

Našao sam sliku koju želim da dodam i ona je rezolucije 1600 x 1600, što je naravno preveliko.


Slika dole pokazuje kako sam je u WP editoru sa smanjio u prikazu (ne fizički) sa originalnih 1600 x 1600 na zaokruženu vrednost:





Slika dole pokazuje kako se vidi prava velikičina u WP editoru:





Inače i u HTML kodu "koji stoji ispod", proverio sam, unete su gore zaokružene vrednosti za širinu i dužinu slike.

Međutim, slika dole pokazuje da se u browser-u učita puna slika, a ne smanjena, taman toliko da stane na ekran:





Slika od 1600x1600 je smanjena na max veličinu koja se prikazuje na ekranu, a ne na onu koju sam izabrao. Slika se nalazi na ImageShack serveru.

Ovako je sa svim eksternim slikama. Da li je do teme, do WP editora, do mene...?

* * *

Evo na primeru druge slike, iz Forefoxa sam pogleda HTML kod i pisale su vrednosti koje sam uneo, zašto browser to ne poštuje?

Ovo sam uneo u WP editoru (smanjio prikaz slike):





Ovo je slika koja se prikaže iz svakog brauzera (nije 337x337), već džinovska:





Ovo je source code slike iz brauzera gde stoji veličina koju sam ja izabrao. Pa ko tu onda zeza? U kodu piše 337x337:





Ne kapiram! Help i hvala! Izvinjavam se na velikim slikama ovde, ali takve su kakve su, hteo da demonstriram.
[ ivan.a @ 29.04.2011. 05:13 ] @
Mislim da je to do tvog template-a ili nekog plugina koji nešto radi sa slikama.

Pošto na svakoj slici imaš okvir (na naslovnoj), a kada ubacuješ sliku u tekst nemaš, verujem da je u pitanju neki dodatak za template.

Što ne probaš sliku sa default template-om? Time bi bar eliminisao neke potencijalne probleme.
[ owim @ 29.04.2011. 09:41 ] @
Citat:
Pošto na svakoj slici imaš okvir (na naslovnoj), a kada ubacuješ sliku u tekst nemaš, verujem da je u pitanju neki dodatak za template.

Hvala. Lepo si primetio okvir. Međutim, i kad učitam u wp.COM istu tu sliku (na wp server u Media Gallery) i stavim je u post, onda mogu da je risajzujem na opisani način i umanjena se prikaže u brauzeru, a i dalje ima okvir -- čini mi se da nije do templejta. Skroz sam zbunjen.
[ Br@nkoR @ 29.04.2011. 10:59 ] @
Ukoliko je to sajt iz potpisa, onda je problem u css fajlu, gde css-om poništavaš dimenzije koje si uneo u html kod:
Citat:

.post .entry img{background:#fff;border:solid 10px #e2e2e2;height:auto;max-width:621px;padding:2px;width:auto;}


EDIT: Zaboravio sam da napomenem, obrati pažnju i na max-width definiciju.

[Ovu poruku je menjao Br@nkoR dana 29.04.2011. u 12:16 GMT+1]
edit: typo


[Ovu poruku je menjao Br@nkoR dana 29.04.2011. u 16:18 GMT+1]
[ owim @ 30.04.2011. 02:04 ] @
@BrankoR,
Hvala na odgovoru, nemam dovoljno znanja da pregledam ceo HTML kod, hvala za CSS primedbu. Napravio sam novu test-stranicu koju sam hteo ovde da pokažem, ali ako je objavim svi prijavljenji mejlom će dobiti link. Kad je "private" opet je nećete videti. Zato screen shot:





Kako/zašto sada može promena veličine?
Citat:
obrati pažnju i na max-width definiciju

A to je?

[Ovu poruku je menjao owim dana 30.04.2011. u 06:31 GMT+1]
[ ivan.a @ 30.04.2011. 04:09 ] @
Znači ipak je do template-a (njegov .css). Da si probao default template znao bi da je to u pitanju.

Dakle, traži fajl (obično je) style.css u tvom template folderu (wp-content/themes/TVOJ_TEMPLATE).
Dodatak: Br@nkoR je već našao...css se nalazi na adresi ../choco/style.css

Otvori fajl sa nekim editorom i kucaj u search
Citat:
post .entry img{background:#fff;

Kada nađeš sledeću liniju:
Citat:
.post .entry img{background:#fff;border:solid 10px #e2e2e2;height:auto;max-width:621px;padding:2px;width:auto;}

Ukloni
Code:
height:auto;max-width:621px;

i
Code:
width:auto;


[ owim @ 30.04.2011. 05:30 ] @
Hvala na jasnom ukazivanju gde je problem -- sve razumeo, iako ne kapiram zašto eksterne slike ne mogu da risajzujem a one učitane u wp.com Media Gallery mogu. Razumem da je CSS teme dominantan u odnosu na moje setovanje veličine slika.
Citat:
traži fajl (obično je) style.css u tvom template folderu (wp-content/themes/TVOJ_TEMPLATE).

Na žalost, ne mogu da menjam CSS izabrane teme bez da platim 15 dolara godišnje. (Koristim wp.COM, free nalog.)
Citat:
If you would like the ability to save your changes and make your design visible to the public, please purchase the Custom CSS Upgrade.

Pretpostavljam da sam wp.ORG korisnik da bih to mogao. D'oh!
[ Br@nkoR @ 30.04.2011. 08:34 ] @
Eksterne slike, ti im fizički ne menjaš dimenzije, već im menjaš samo dimenzije u html kodu, slike su i dalje prave veličine, pokušaj desni klik mišem na sliku pa "Open image in new tab" i videćes. Dakle ukoliko je eksterna slika dimenzija 1600x1600 a ti u html napišeš 337x337 ti i dalje učitavaš tu sliku dimenzija 1600x1600 samo što je browser na osnovu html odnosno css koda smanjio na definisanu veličinu. A kod tebe je problem što podešene veličine u html kodu imaju manju "težinu" od onih definisanih u css kodu i isti ih poništava.

Kod uploada slika na tvoj nalog, pomoću media gallery, ti menjaš fizički veličinu slike, proveri kao što sam gore napisao, i tu se isto javlja gore navedeni problem da css definicija ima veću težinu od html definicije, ali to se ne vidi jer su dimenzije slike iste kao one definisane u html kodu.

CSS definicija max-width označava maksimalnu dozvoljenu širinu nekog elementa, pa tako možeš videti da se eksterne slike, koje su šire od max-width, nisu promenile veličine na svoje maksimalne (stvarne) vrednosti, već na veličinu definisanu pomoći max-width, ukoliko je stvarna dimenzija "umanjene" eksterne slike manja od max-width-a, ona neće biti uvećana već će imati stvarne dimenzije.

Pošto "ne možes" da menjaš css kod, vidim da možeš da menjaš html kod, jednio što mi pada na pamet je da u html kodu dodaš style atribut img tagu i u istom definišeš dimenzije slike kako bi iste imale veću "težinu" od onih deifinisanih u css, nešto kao:
Code:

<img class="aligncentar" src="http://static.politika.co.rs/u...i/1/jasmina-vujic-politika.jpg" width="337" height="337" alt="" style="width:337px !important; height:337px !important;"/>

Jeste ovo malo naporno, ali ti možeš napisati i Javascript kod koji će ovo automatski raditi, dakle proći kroz sve img tagove i videti gde su definisani width/height atributi i na osnovu njih definisati odgovarajući style atribut, ukoliko se ne snađeš za ovo da napišeš kaži napisaću ti, nije problem.

Pozdrav.
[ owim @ 30.04.2011. 15:14 ] @
Citat:
Eksterne slike, ti im fizički ne menjaš dimenzije, već im menjaš samo dimenzije u html kodu, slike su i dalje prave veličine

Napisao sam na početku da mi je sasvim jasno da im ne menjam fizički veličinu, već veličinu prikaza. Obrazložio sam da mi lakše da ne skidam slike, obrađujem ih, uploadujem i onda linkujem u blog. Kada je fotke već online, prebacim ih u svoj ImageShack i linkujem u blog odatle.

Citat:
pokušaj desni klik mišem na sliku pa "Open image in new tab" i videćes. Dakle ukoliko je eksterna slika dimenzija 1600x1600 a ti u html napišeš 337x337 ti i dalje učitavaš tu sliku dimenzija 1600x1600 samo što je browser na osnovu html odnosno css koda smanjio na definisanu veličinu.

Tako je, kada sam to uradio dobio sam "sliketinu" u novom tabu.

Citat:
A kod tebe je problem što podešene veličine u html kodu imaju manju "težinu" od onih definisanih u css kodu i isti ih poništava.

Skroz jasno.
Citat:

Kod uploada slika na tvoj nalog, pomoću media gallery, ti menjaš fizički veličinu slike

Nope. Slika i dalje ima svoju max rezoluciju. Neka primer bude slika šahovskih figura, zove se shah.jpg i rezolucije je 1800x1600. Ja je uploadujem u Media Galleru "as-is", takvu kakva jeste. Dve slike koje se vide u prethodnom postu (šahovske figure) su jedna ista velika slika iz Media Gallery, samo što sam podesio visinu i širinu, isto kao i za eksterno linkovane. E, to nisam razumeo, zašto tu radi, ako CSS ima veću težinu od HTML definicije?

Citat:
i tu se isto javlja gore navedeni problem da css definicija ima veću težinu od html definicije, ali to se ne vidi jer su dimenzije slike iste kao one definisane u html kodu.

Nije tako, ne javlja se isti problem, slika se prikaže u veličini koju sam odredio sa width/height (kao na slici gore). Iz Media Gallery ubacio sam istu sliku u tri veličine. Desni klik na slike, otvorim ih u novom tabu, otvore se u smanjenoj (definisanoj) veličini. Ovo stoji kao URL (vidim ih samo ja).

mala:
http://owim1.files.wordpress.com/2011/02/shah.jpg?w=150&h=133

srednja:
http://owim1.files.wordpress.com/2011/02/shah.jpg?w=300&h=266

"original size" (tj. max-width, ona je width 1800, ali je max-width podešen na 645 i zato je "seče"):
http://owim1.files.wordpress.com/2011/02/shah.jpg?w=645&h=573

Kad desnim tasterom na isti način otvorim onu sliku koju sam linkovao sa sajta Politike i zadao joj veličinu, kao URL se ispiše:
http://static.politika.co.rs/u...i/1/jasmina-vujic-politika.jpg

Dakle, potpuno je ignorisao moj width i height.

Citat:
CSS definicija max-width označava maksimalnu dozvoljenu širinu nekog elementa, pa tako možeš videti da se eksterne slike, koje su šire od max-width, nisu promenile veličine na svoje maksimalne (stvarne) vrednosti, već na veličinu definisanu pomoći max-width, ukoliko je stvarna dimenzija "umanjene" eksterne slike manja od max-width-a, ona neće biti uvećana već će imati stvarne dimenzije.

Ovo sam provalio kao efekat, nisam znao da je to max-width parametar. Hvala!


Zaključak
1. Slike moraju da budu na wp.com serveru da bih mogao da ih prikažem u drugoj veličini (bez fizičkog editovanja). To znači da kupim SpaceUpgrade:
The following prices are per blog, per year:
* 5GB Space Upgrade: $19.97
* 15GB Space Upgrade: $49.97
* 25GB Space Upgrade: $89.97
* 50GB Space Upgrade: $159.97
* 100GB Space Upgrade: $289.97
2. Platim CustomCSS 15 $/god
3. Svaku sliku s neta skinem, editujem u veličinu u kojoj želim da bude prikazana, uploadujem u ImageSHack i linkujem. Free.
4. Promenim temu, možda neka ima CSS koji nije dominantan u odnosu na HTML.

x. Pređem na wp.ORG gde bi sve bilo na mom host-provajderu. Ne znam da li bih i onda mogao da linkujem slike sa strane i menjam im veličinu i da li bih mogao da editujem CSS teme bez plaćanja (nisam u wp.ORG priči).


Tvoj zaključak?
[ Milan Kragujevic @ 30.04.2011. 15:38 ] @
Self-hosted varijanta (tzv "wp.ORG") ti dozvoljava da radiš blago rečeno SVE.
A imaš besplatnih hostinga koliko hoćeš, plus iz.rs domen

Ako hoćeš, evo načina da imaš male slike, bez resajza:
Hotlinkuješ slku ovako:
http://owim1.milankragujevic.c.../www)&h=height&w=widht
- Eto.
A moja skripta smanji sliku, i kešira je kod mene.


[Ovu poruku je menjao Milan Kragujevic dana 30.04.2011. u 17:14 GMT+1]
[ Br@nkoR @ 30.04.2011. 16:11 ] @
Nemam nalog na .wordpress.com ali imam instaliran kod sebe na localhost-u wp, pa ne znam sve detalje oko tog servisa, a takođe i ne poznajem toliko dobro wp jer ga ne koristim, sve ove zaključke donosim na osnovu analize html i css koda, pa možda i u nečemu grešim :).
Citat:

Nope. Slika i dalje ima svoju max rezoluciju. Neka primer bude slika šahovskih figura, zove se shah.jpg i rezolucije je 1800x1600. Ja je uploadujem u Media Galleru "as-is", takvu kakva jeste. Dve slike koje se vide u prethodnom postu (šahovske figure) su jedna ista velika slika iz Media Gallery, samo što sam podesio visinu i širinu, isto kao i za eksterno linkovane. E, to nisam razumeo, zašto tu radi, ako CSS ima veću težinu od HTML definicije?

A kako joj menjaš dimenzije. Hajde probaj ovako, upload-uj sliku i zatim joj dimenzije smanji u samom html a ne pomoću media gallery, šta će se desiti? Ono što vidim, kod sebe na localhostu, je da menjanjem dimenzija uploadovanih slike u mg-u on ih fizički menja, dok linkovane ne menja, samo postavi link do te slike.

Citat:
Nije tako, ne javlja se isti problem, slika se prikaže u veličini koju sam odredio sa width/height (kao na slici gore)

Ne čitaš šta sam napisao
Citat:
i tu se isto javlja gore navedeni problem da css definicija ima veću težinu od html definicije, ali to se ne vidi jer su dimenzije slike iste kao one definisane u html kodu.



Citat:
Iz Media Gallery ubacio sam istu sliku u tri veličine. Desni klik na slike, otvorim ih u novom tabu, otvore se u smanjenoj (definisanoj) veličini. Ovo stoji kao URL (vidim ih samo ja).

mala:
http://owim1.files.wordpress.com/2011/02/shah.jpg?w=150&h=133

srednja:
http://owim1.files.wordpress.com/2011/02/shah.jpg?w=300&h=266

"original size" (tj. max-width, ona je width 1800, ali je max-width podešen na 645 i zato je "seče"):
http://owim1.files.wordpress.com/2011/02/shah.jpg?w=645&h=573

Svim ovim slikama su fizički smanjene veličine, snimi je na svoj računar pa pogledaj.


Da li možeš da menjaš html kod stanice?
Ukoliko možeš da menjaš, stavi sledeći kod u head deo stanice i vidi da li će rešiti problem.

Code:
<script type="text/javascript">
function fixImageDimension() {
  var imgs = document.getElementsByTagName('img');
  for(var i = 0, len = imgs.length; i < len; i++) {
    var img = imgs[i];
    if(img.getAttribute('width') != null && img.getAttribute('height') != null) {
      img.setAttribute('style', 'width: ' + img.getAttribute('width') + 'px !important; height: ' + img.getAttribute('height') + 'px !important;')
    }
  }
}
if(document.addEventListener) {
  document.addEventListener('DOMContentLoaded', fixImageDimension, false );
} else if(window.attachEvent) {
  document.attachEvent('onreadystatechange', fixImageDimension);
}
</script>


Pozdrav



edit: izmenio kod

[Ovu poruku je menjao Br@nkoR dana 30.04.2011. u 17:36 GMT+1]
[ owim @ 30.04.2011. 16:47 ] @
Citat:
A kako joj menjaš dimenzije. Hajde probaj ovako, upload-uj sliku i zatim joj dimenzije smanji u samom html a ne pomoću media gallery, šta će se desiti? Ono što vidim, kod sebe na localhostu, je da menjanjem dimenzija uploadovanih slike u mg-u on ih fizički menja, dok linkovane ne menja, samo postavi link do te slike.

Dimenzije mogu da menjam iz Wordpress vizuelnog web editora (WYSIWYG), iz Image propreties prozora ili direktnim editovanjem HTML koda, samo se prelazi s taba "Visual" na "HTML", sve izmene se odmah vide u drugom tabu (pokazao sam na prvim slikama gore i zaokružio).

Citat:
Svim ovim slikama su fizički smanjene veličine, snimi je na svoj računar pa pogledaj.

U pravu si! Nisam ovo očekivao. On fizički izmeni slike ako su iz MG.

Citat:
Da li možeš da menjaš html kod stanice?

Da, s ograničenjem. Ne mogu da menjam Head. Samo sadržaj posta u blogu i ništa viđe. Ne mogu tvoj kod da upišem u Head.

Citat:
Hotlinkuješ slku ovako:
http://owim1.milankragujevic.c.../www)&h=height&w=widht
- Eto.
A moja skripta smanji sliku, i kešira je kod mene.

Ovo radi!
[ Br@nkoR @ 30.04.2011. 17:10 ] @
Citat:
owim: Da, s ograničenjem. Ne mogu da menjam Head. Samo sadržaj posta u blogu i ništa viđe. Ne mogu tvoj kod da upišem u Head.

Pokušaj i ovo što sam napisao u jednoj od prethodnih poruka

Code (html):
<img class="aligncenter" src="http://static.politika.co.rs/u...i/1/jasmina-vujic-politika.jpg" alt="" width="270" height="270"  style="width:270px !important; height:270px !important;">

Dodavanje odgovarajućeg style atributa img tagu.

Pozdrav
[ owim @ 03.05.2011. 03:15 ] @
Zdravo svima, da izvestim šta sam probao u međuvremenu.

Probao sam razne teme. Mnoge se ponašaju kao moja sadašnja i ne dozvoljavaju editovanje veličine slike sa eksternog linka. To baš one koje mi se sviđaju. Ima onih koje nemaju max-width pa se neke od slika koje sam linkovao prošire van površine bloga.

Defult tema, Kubrick, omogućava da se linkuju eksterne slike i poštuje width i height parametre u HTML-u. (Izvinjavam se što ovo nisam odmah proverio iako mi je rečeno.) Kubrick, nije jedina, otkrio sam još nekoliko kod kojih to može.

@Br@nkoR, kod koji si mi dao da upišem kao dodatne parametre za sliku -- radi! Hvala! JavaScript kod nemam gde da upišem, probao sam, nemam pristup Head delu. To je verovatno u CSS-u koji ne mogu da editujem.

@Milan Kragujevic, skript koji si napravio lepo radi, hvala!

Lepo je imati ES-zajednicu!
[ Br@nkoR @ 03.05.2011. 09:40 ] @
Citat:
owim:
@Br@nkoR, kod koji si mi dao da upišem kao dodatne parametre za sliku -- radi! Hvala! ;) JavaScript kod nemam gde da upišem, probao sam, nemam pristup Head delu. To je verovatno u CSS-u koji ne mogu da editujem.

Nema na čemu, za javascript kod koji sam dao, mislio sam da se postavi u HTML kod stranice unutar head html tagova, ali pošto ne možeš da menjaš css fajlove ne verujem da možeš da menjaš ni template fajlove. Ti možeš ovaj javascript kod postaviti i u html kod samog posta koji možeš da edituješ, ali pitanje je kako će se ponašati na glavnoj stranici gde se nalazi lista više postova, zbog višestruke definicije iste funkcije, nisam testirao pa ne znam. Možda je moguće probati, prvo ispitati da li je navedena funkcija definisana, pa ukoliko nije definisana definisati je i pozvati. A takođe je pitanje da li se unutar posta može dodati javascript.

Ali sve ovo je naporno, kao i za css kod koji sam dao, kada moraš raditi za svaki post posebno, ništa bez izmene samog css ili templeta.

Pozdrav.

[Ovu poruku je menjao Br@nkoR dana 03.05.2011. u 11:10 GMT+1]
[ owim @ 03.05.2011. 10:57 ] @
Citat:
za javascript kod koji sam dao, mislio sam da se postavi u HTML kod stranice unutar head html tagova

Nemam pristupa njima. Evo kako izgleda WP HTML editor koji mi je na raspolaganju, ovo je početak poslednjeg posta sa mog bloga:



Citat:
pošto ne možeš da menjaš css fajlove ne verujem da možeš da menjaš ni template fajlove

Ne dok ne platim CSS upgrade. Ne znam šta se dešava ako pređem na wp.ORG -- da li onda mogu isti ovaj template da menjam, to može da mi kaže neki wp.ORG korisnik ovde, kao što je MIlan, koji je napisao da "može sve" .

Citat:
Ti možeš ovaj javascript kod postaviti i u html kod samog posta koji možeš da edituješ, ali pitanje je kako će se ponašati na glavnoj stranici gde se nalazi lista više postova, zbog višestruke definicije iste funkcije, nisam testirao pa ne znam. A takođe je pitanje da li se unutar posta može dodati javascript.

Tvoj JavaScript stavio sam na početak posta kog vidiš gore i ništa nisam dobio -- prilikom snimanja 3/4 koda je obrisano a ono što je ostalo ničemu nije služilo.

Citat:
Ali sve ovo je naporno, kao i za css kod koji sam dao, kada moraš raditi za svaki post posebno, ništa bez izmene samog css ili templeta.

Slažem se!
[ owim @ 03.05.2011. 14:53 ] @
A i ja sam "slučaj" -- danas sam provalio da moj ImageShack, na kojem držim sve slike, ima mogućnost fizičkog resize-ovanja. Istina, mogu da biram između nekoliko ponuđenih rezolucija, ali i to je wow -- sada ne moram da mislim o slikama, već mogu brzo da se usmerim na sam zadatak-blog-tekst-ideju.
[ Milan Kragujevic @ 03.05.2011. 16:29 ] @
Jel to znači da mogu da brišem onu skriptu?
[ owim @ 03.05.2011. 23:30 ] @
Citat:
Milan Kragujevic: Jel to znači da mogu da brišem onu skriptu?

Ako želiš. Ne moraš. Korisna je. Možda će još neko, pa i ja, poželeti da je koristi .
[ Milan Kragujevic @ 03.05.2011. 23:43 ] @
Ok..
Ne smeta mi
Samo da podesim da autmatski briše cache na svaka 3 dana
Da ne bi prepunila server