Wysokość Diva - Zdjecie DIVa -> GD Opcje

[k0b3]

Witam

Nie chciałem odkopywać tak starego wątka jakim jest: http://forum.php.pl/index.php?showtopic=60602, dlatego pisze od początku.

Bardzo mi zależny na wysokości diva/ilości linijek w nim. Pomysł ze zdjęciem w załączonym temacie wydaje mi się bardzo racjonalne.
Stronę robię w Ajaxie, jednak chce, aby była w pełni funkcjonalna podczas gdy ktoś sobie wyłączy obsługę JavaScript, stąd takie kombinowanie ;-)

Teraz pytanie apropo zdjęcia. Jak to wykonać zdjęcie z samego html uzywając GD?.
Zawartość Diva mam np taką:

[HTML] pobierz, plaintext 
<div id="news">
    <div id="data">
		1 styczeń 1970
    </div>
	 <div id="tresc">
	    sadasdsadsasdasdsa rutrum lectus non lect<br />
            us mattis a rhoncus lectus congue.ectus congue.Integer rutrum lectu<br />
            s non lectus mattis a rhoncus
    <a href="index.php?p=news&act=view&id=1" class="wiecej">czytaj wiecej...</a>
    </div>
</div>
[HTML] pobierz, plaintext 

czy korzystanie z tej metody za pomocą biblioteki GD nie będzie obciążalo zbytnio serwera?

[fander]

Kod

<?php count(explode("<br", $text)); ?>

z tym że jeśli diva masz szerokiego na np 500 px a text w nim wyświetlany jest pisany ciągiem bez znaczników <br> to nic takie zliczanie nie daje. Najlepiej gdybyś liczył ilość znaków w tekście (nie licząc białych znaków) i przyjął jakąś liczbę jako ilość znaków w lini. Z biblioteką GD nie wiem jak to zrobić.

[k0b3]

Najlepiej gdybyś liczył ilość znaków w tekście (nie licząc białych znaków) i przyjął jakąś liczbę jako ilość znaków w lini.

Z tej metody korzystałem nawet we flashu! Jest zbyt naiwna. Teoretycznie wszystko pięknie, jednak są różnice szerokości liter!

iiiiiiiiii - 10 liter
OOOOOOOOOO - 10 liter

Szukam czegoś nie zawodnego.

[fander]

w takim razie zrób sobie tablice ze znakami i odpowiadającymi im szerokościami w px następnie podziel tekst znając znaczniki które tworzą nową linie (<br>,<p><h1><h2><h3>...). Wylicz sobie ile zajmą odpowiednie słowa + spacje + znaki w podzielonych fragmentach tekstu. podziel to przez szerokość diva i sumuj.
Nie widzę rozwiązania w gd bo i tak musiałbyś dla każdej literki tworzyć nowy obrazek i sprawdzać czy czasem literka czy słowo nie wychodzi za obrazek. Generowanie 1000 takich obrazków na pewno nie sprzyja szybkiemu wykonaniu skryptu.

Ten post edytował fander 3.07.2009, 11:21:46

[maly_swd]

http://pl.php.net/manual/pl/function.imagettfbbox.php a wyliczac z tego?

[k0b3]

To nei ma sensu.. Nie ma czegokolwiek normalniejszego, przecież to PHP->C++?
Może powinienem zaczać od tego do czego jest mi potrzebne takie rozwiązanie.
Napisałem sobie korzystając ze Smarty system newsów. Newsy wyświetlane są w ograniczonym wymiarowo divie. Oczywiście z szerokości tekst jest zawijany, jednak gdy newsów jest np 10 o różnej ilości enterów/zawinień wierszy to rzeczą naturalną jest to, że nie mieści się w całym divie. Wobec tego chciałem przewidzieć ile wierszy będzie zajmował każdy newsów i łącząc te dane ze stronicowaniem wszystkich newsów wyświetlać na kazdej z podstron mieszczącą się w ryzach tego głównego Diva ilość newsów.

eh....

[fander]

ambitne... btw. przy pomocy funkcji która podał maly_swd jesteś w stanie łatwo wyliczyć ile będziesz miał linii tekstu w pojedynczym newsie. Dzielisz tekst na znaczniki nowej linii sprawdzasz każdą linie czy się nie zawinie itd... to jest do zrobienia. ew. do tableli z newsami dodajesz kolumne z tekstem krótkim i wyświetlasz tylko ten tekst.
ps. W c++ robiłem silnik bazy danych na prace inż i powiem że aby zrobić coś takiego w c++ to musiałbyś tez w to włożyć sporo pracy

Ten post edytował fander 3.07.2009, 12:54:38

[maly_swd]

To co napisales mozna zrealizowac w inny sposob:)

[HTML] pobierz, plaintext 
<div id="news">
<div>newsik</div>
<div>newsik2</div>
<div>newsik3</div>
<div>newsik4</div>
 
</div>
<style>
#news {width: 300px; height: 400px; overflow: hidden;}
#news div {width: 14px; overflow: hidden;}
</style>
[HTML] pobierz, plaintext 

w skrocie div z newsami ma szerokosc 300px i wysokosc 400px; overflow chowa wszystko co wystaje poza ten obszar.

w div div -> masz newsy po jednej linijce szerokosc auto (300px) i wysokosc ~14px (tyle zajmule linia z fontem 10px), jesli news by sie przelamal do nowej lini to zostanie on ukryty przez overflow.

pozdro

[fander]

nie wiem czy k0b3 chce w taki sposób standaryzować swój moduł newsów, ja rozumiem że kolega che wyświetlać zawartość całego newsa nie ukrywając części informacji, i jeśli ma 2 duże newsy zajmujące cała wysokość to tylko one się wyświetlają a jeśli ma 10 małych to wyświetla 10 małych jeśli się mieszczą, ale to jest mało praktyczne

[maly_swd]

To jesli ma byc tak jak piszesz to wystarczy wywalic #news div {height: ... i overflow} a zostawic #news {width: 300px; height: 400px; overflow: hidden;}

i bedzie wtedy wyswietlalo tyle ile sie zmiesci w box

[fander]

dobrze mówi polać mu

--
jeszcze jeden taki post i poleci ostrzeżenie

~erix

[k0b3]

heh... teoretycznie.
- główny <div> o wysokości 435px;
- newsy - to zależy - 4liniki(~56px), 20linijek(~280px), 6 linijek(~84px) ... (nie muszą być wszystkie równe)
- dodać należy padding od góry i od dołu diva (10px) oraz odstępy między newsami (10px);
... razem 10px+10px+56px+10px+280px+10px+84px = 460px > od głównego Diva

Wygląda to mniej więcej tak:

Jak widać ostatni news nie mieści się już w ramach tego dużego diva. I teraz jeśli potrafiłbym przewidzieć ile zajmuje dany news na podstawie
tekstu pobranego z tabeli, mógłbym przenieść tego ostatniego newsa na kolejną podstronę newsów.
Zrozumiałe??

Ten post edytował k0b3 3.07.2009, 14:16:56

[maly_swd]

zle podejscie:)
policz sobie tak aby padingi i marginy daly jakis wspolny dzielnik:) i bedzie smigalo

[k0b3]

nie rozumiem o co Ci chodzi...

[maly_swd]

chodzi o to aby wyliczyc sensownie marginy i paddingi tak aby przy takim przykladzie jak jest podany ladnie sie miescilo.

Najprosciej zrezygnowac z padingow i marginow odzielajacych newsy. I przyjac ile linijek moze wejsc w diva glownego.

Inne prostrze rozwiazanie to JS i zapoznanie sie z np mootolsami;)

[fander]

no tak ale jeśli bekiesz miał 1 newsa o wysokości 60px a 2 o wysokości 400 px to będzie ci wyświetlało tylko tego 1 newsa a poniżej niego będzie pustka, zgodnie z twoim zamysłem, pomysł maly_swd jest jak najbardziej odpowiedni do twojego systemu newsów. Najlepiej jakbyś zrobił tak ze masz ograniczona ilość newsów w tym dużym divie a te newsy powinny być również w jakimś stopniu skrócone, i tak masz link "czytaj dalej" który odnosi się do konkretnego newsa

[k0b3]

Macie racje, jednak jeśli zrobię tak jak mówi maly_swd to nie mam pojęcia jak ugryźć stronicowanie newsów.

Inne prostrze rozwiazanie to JS i zapoznanie sie z np mootolsami;)

Całą stronę ogólnie prezentuje w ajaxie. Myśle, że nie będzie problemu wrzucić wszystkie newsy do jednego DIVa, a później przez JS przesuwać, tworząc dodając jakieś stronicowanie.

Jednak jeśli klient ma wyłączoną obsługę skryptów, chce zrobić stronicowanie bardziej statyczne, aby od razu po stronie serwera wyrzucało mi ile i jakie newsy będą na podstronie 1,2,3...itd.

Jak pisałem, stronę opieram o smarty, to bez problemu moge określić, że każdy news ma np. max ilość linijek 5. Przez co na jednej z podstron zmieści się do 4 newsów. Wszystko ładnie, jednak nie przewidzę, czy news np ma mniej niż 5 linijek, co stworzy dziurę.
Z drugiej strony zakładając, że będzie miał 5 i więcej tych linijek każdy news to szczerze nie podoba mi się jakby to wyglądało - takie same w ciągu.

Cholera, jak nie siedziałem przy tym, a tylko wyobrażałem sobie jak zabrać się do tego, to wszystko było o dużo prostsze..

// edit

Dodam jeszcze, że news o rozmiarze 400px raczej się nie zdarzy. Jak zauważyłeś fander to jest link czytaj dalej, a to co będzie na stronie głównej to tylko nagłówek newsa.

// edit 2
Chyba zrobie jak mówicie. Co prawda rozwiązałem problem tak jak wspomniał ktoś wyżej. W tablicy mam każdą szerokość literki, napisałem ładnie algorytm który zlicza mi dokładnie ilość enterów oraz gdy jest użyty <br />. Jednak obawiam się, że taki zabieg po stronie serwera może go przeciażać jeśli odwiedzi go np z 30osób naraz.

Co radzicie w teraz?

Ten post edytował k0b3 3.07.2009, 15:34:53

[maly_swd]

powiem tak, kiedys robilem na gd to co Ty chcesz uzyskac i powiem tak, jest do zrobienia ale ... troche zabawy i nie wiem czy jest Ci to az tak potrzebne...
ten sposob z divami co Ci podalem jest dobry, szybki ale ma i wady... tak jak juz ktos wspomnial:)

zobacz to: http://www.efectorelativo.net/laboratory/noobSlide/ przyklad 8. powinnien byc idealny do newsow;)
Bloki dzielisz tak jak podalem z divami z tym ze dla newsa robisz 3 linijki i takich blokow po trzy linijki, czyli jakies 8newsow, pozniej robisz pagowanie z mootolsow przyklad wyzej;) i smiga ladnie pieknie..

Ten post edytował maly_swd 3.07.2009, 15:36:53

[k0b3]

Jeszcze nie wiem jak to zrobię. Mam dwie możliwości, muszę chyba to zostawić na chwile, bo już mózg mi się lansuje.

Poniżej kod dla mających taki sam problem i są bardzie za tym rozwiązaniem z tablicą i szerokością literek

[PHP] pobierz, plaintext 
<?php
function szer_litery($lit) {
$t = array(    ' '=>3,
            'a'=>6,
               'ą'=>7,
            'b'=>6,
            'c'=>6,
            'ć'=>6,
            'd'=>6,
            'e'=>6,
            'f'=>4,
            'g'=>6,
            'h'=>6,
            'i'=>2,
            'j'=>3,
            'k'=>5,
            'l'=>2,
            'ł'=>3,
            'm'=>9,
            'n'=>6,
            'o'=>6,
            'ó'=>6,
            'p'=>6,
            'r'=>4,
            's'=>5,
            'ś'=>5,
            't'=>3,
            'u'=>6,
            'w'=>8,
            'x'=>5,
            'y'=>6,
            'z'=>6,
            'ź'=>6,
            'ż'=>6,
            'A'=>7,
            'B'=>7,
            'C'=>8,
            'Ć'=>8,
            'D'=>7,
            'E'=>6,
            'F'=>6,
            'G'=>8,
            'H'=>6,
            'I'=>2,
            'J'=>5,
            'K'=>7,
            'L'=>6,
            'Ł'=>3,
            'M'=>8,
            'N'=>7,
            'O'=>7,
            'Ó'=>7,
            'P'=>7,
            'R'=>8,
            'S'=>7,
            'Ś'=>7,
            'T'=>7,
            'U'=>7,
            'W'=>10,
            'X'=>7,
            'Y'=>7,
            'Z'=>7,
            'Ź'=>7,
            'Ż'=>7,
            '!'=>2,
            '@'=>11,
            '#'=>6,
            '$'=>6,
            '%'=>9,
            '^'=>5,
            '&'=>7,
            '*'=>4,
            '('=>4,
            ')'=>4,
            '_'=>6,
            '+'=>6,
            '-'=>6,
            '='=>6,
            '{'=>4,
            '}'=>4,
            '['=>3,
            ']'=>3,
            ':'=>2,
            ';'=>2,
            '?'=>6,
            '|'=>2,
            '/'=>4,
            ''=>4,
            '<'=>6,
            '>'=>6,
            '´'=>3,
            '.'=>2,
            ','=>2,
            '&#710;'=>3,
            '˜'=>3,
            "'"=>2,
            '“'=>5,
            '"'=>5,
            '„'=>5
            );
    
    if (empty($t[$lit])) {
    //domyslna wartosc jesli nie ma takiej litery
            return 4;
    } else {
        return $t[$lit];
    }
 
}
 
     // przejscie po wszystkich literach
            for($i=0; $i<strlen($n['tresc']); $i++) {
                    // tresc przechowywana w tablicy
                    $lit = $n['tresc'][$i];
                    //sumowanie szerokosci danej litery
                    $szer=$szer+szer_litery($lit);    
                    //jesli napotka <br />
                    if($n['tresc'][$i]=='<' && $n['tresc'][$i+1]=='b' && $n['tresc'][$i+2]=='r') { 
                    // dodaje linie
                        $linie++;    
                    // zeruje szerokosc                                                                    
                        $szer=0;
                    // jesli jednak nie wystapilo br
                    } else {
                    //dalej zliczna szerokosc porownywana jest z szerokoscia maksymalna,
                    //jesli ja przekroczy
                    if($szer>=$szerokosc) {
                    // dodaje linie
                        $linie++;
                    // zeruje szerokosc    
                        $szer=0;
                    } 
                }
            }
                // sprawdzenie czy jeszcze jest jakis wiersz
                if($szer>0) {
                    $linie++;
                }
                // +2, poniewaz w moim szablonie dodaje jeden Enter oraz wiersz 'czytaj dalej...'
                $n['linie']=$linie+2;
?>
[PHP] pobierz, plaintext 

[maly_swd]

mozna zrobic to uniwersalniej prze ttfboxa... odpalasz funkcje ktora robi w tablicy szerokosci literek dla danej czcionki i wielkosci. A pozniej jedziesz tak jak masz w funkcji:)


ps. to co podales jest spoko ale podaj dla jakiego fontu i wielkosci;) ps. i nie dziala na boldach i italicach;)