Αυτόματη μείωση του μεγέθους μιας εικόνας

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
deninho
Super Moderator
Δημοσιεύσεις: 7066
Εγγραφή: 17 Ιαν 2004 16:01
Τοποθεσία: σ'άλλη διάσταση
Επικοινωνία:

Αυτόματη μείωση του μεγέθους μιας εικόνας

Δημοσίευση από deninho » 10 Ιαν 2008 23:43

Λεπόν... Κατ'αρχάς δεν ξέρω αν είμαι στο σωστό μέρος. Θεωρώ ότι είμαι, αλλά αν οι μόδιστροι της περιοχής διαφωνούν, ας το μεταφέρουν εκεί που θεωρούν καλύτερα (αρκεί να μην είναι στα σκουπίδια :P )

άλλαξα το theme του blog μου, αλλά λόγω του ότι το καινούριο έχει μικρότερο πλάτος για το κείμενο-άρθρο, πολλές από τις φωτογραφίες μου ξεχειλίζουν. Τι προτείνουν επ'αυτού οι ειδικοί; Έχω δει σε ορισμένα φόρα, που όταν βάζεις μια φωτογραφία στο κείμενο, την μικραίνει αυτόματα, και αν θες να την δεις ολόκληρη κάνεις κλικ. Υπάρχει περίπτωση να γίνει κάτι αντίστοιχο στην περίπτωσή μου; Μήπως κάτι άλλο;

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6228
Εγγραφή: 30 Νοέμ 2004 03:09

Αυτόματη μείωση του μεγέθους μιας εικόνας

Δημοσίευση από fafos » 11 Ιαν 2008 04:13

deninho έγραψε:Λεπόν... Κατ'αρχάς δεν ξέρω αν είμαι στο σωστό μέρος. Θεωρώ ότι είμαι, αλλά αν οι μόδιστροι της περιοχής διαφωνούν, ας το μεταφέρουν εκεί που θεωρούν καλύτερα (αρκεί να μην είναι στα σκουπίδια :P )

άλλαξα το theme του blog μου, αλλά λόγω του ότι το καινούριο έχει μικρότερο πλάτος για το κείμενο-άρθρο, πολλές από τις φωτογραφίες μου ξεχειλίζουν. Τι προτείνουν επ'αυτού οι ειδικοί; Έχω δει σε ορισμένα φόρα, που όταν βάζεις μια φωτογραφία στο κείμενο, την μικραίνει αυτόματα, και αν θες να την δεις ολόκληρη κάνεις κλικ. Υπάρχει περίπτωση να γίνει κάτι αντίστοιχο στην περίπτωσή μου; Μήπως κάτι άλλο;
auto pou kanoun ta fora ginetai me kapoio mod mesa sto bbcode.. an thes kati aplo vlae auto sto css file sou:

Κώδικας: Επιλογή όλων

.entry img {
  max-width: 300px;
  width: expression(this.width > 300 ? 300: true);
}
auto opou vrei eikona mesa se post megalyterh ton 300 px thn metatrepei se 300px.. mporeis na allakseis ta noumera veveos veveos..

Άβαταρ μέλους
Yiannistaos
Δημοσιεύσεις: 140
Εγγραφή: 10 Οκτ 2007 21:01
Τοποθεσία: Λεμεσός
Επικοινωνία:

Αυτόματη μείωση του μεγέθους μιας εικόνας

Δημοσίευση από Yiannistaos » 11 Ιαν 2008 07:32

Πολύ βολικό!
web357.eu - Free & Premium Joomla! Extensions

Άβαταρ μέλους
deninho
Super Moderator
Δημοσιεύσεις: 7066
Εγγραφή: 17 Ιαν 2004 16:01
Τοποθεσία: σ'άλλη διάσταση
Επικοινωνία:

Αυτόματη μείωση του μεγέθους μιας εικόνας

Δημοσίευση από deninho » 11 Ιαν 2008 10:32

ωραίος fafos :) ευχαριστώ πολύ :)

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Αυτόματη μείωση του μεγέθους μιας εικόνας

Δημοσίευση από skeftomilos » 11 Ιαν 2008 19:36

Nice tip by fafos. Cheers! :pint:

Άβαταρ μέλους
deninho
Super Moderator
Δημοσιεύσεις: 7066
Εγγραφή: 17 Ιαν 2004 16:01
Τοποθεσία: σ'άλλη διάσταση
Επικοινωνία:

Αυτόματη μείωση του μεγέθους μιας εικόνας

Δημοσίευση από deninho » 11 Ιαν 2008 23:23

fafos έγραψε:an thes kati aplo vlae auto sto css file sou
τώρα το πρόσεξα αυτό.. Όπως ανέφερα, η λύση που έδωσες δούλεψε άριστα. Παρ'όλα αυτά, θα το εκτιμούσα αν έλεγες και κάποια άλλη λύση (εάν είχες κάποια στο μυαλό σου). Κυρίως για τη γνώση, μιας και τη δουλειά μου την κάνω κι έτσι :)

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Αυτόματη μείωση του μεγέθους μιας εικόνας

Δημοσίευση από skeftomilos » 12 Ιαν 2008 00:29

Μερικές όχι απλές λύσεις θα μπορούσαν να είναι οι παρακάτω:

Server-side
Παρεμβάλεις έναν output buffer που τρέχει μια regular expression που βρίσκει όλα τα img της σελίδας.
Διαβάζεις τις διαστάσεις όλων των images και αν είναι μεγαλύτερα από x pixel δημιουργείς δυναμικά μικρότερα αντίγραφα που αποθηκεύονται σε συγκεκριμένο φάκελο.
Κατά το κόψιμο προσέχεις τον τύπο εικόνας, το interpolation, την quality και την transparency.
Αν οι εικόνες βρίσκονται σε άλλο server τις ζητάς με http request και τις κόβεις / αποθηκεύεις όπως τις υπόλοιπες.
Αλλάζεις τα src των προβληματικών img ώστε να δείχνουν στο νέο path.
Επινοείς κάποιο μηχανισμό caching ώστε να μη γίνεται όλη αυτή η δουλειά σε κάθε page request.

Client-side
Ξεκινάς κρύβοντας ολες τις εικόνες αφού βεβαιωθείς ότι ο browser τρέχει scripts: .js img {display:none}
Μόλις είναι έτοιμο το dom διαβάζεις όλα τα img τησ σελίδας και ξεκινάς να τα φορτώνεις στο background με new Image().src = url
Μόλις φορτώνεται το κάθε ένα ελέγχεις τις διαστάσεις, και ανάλογα ρυθμίζεις τις διαστάσεις των αντίστοιχων img, και τα εμφανίζεις με style.display = 'inline'
Ή αντί να αλλάζεις το πλάτος των εικόνων, μπορείς να τις βάζεις μέσα σε divs με overflow:hidden, τα οποία θα δημιουργούνται δυναμικά με document.createElement.
Εναλλακτικά μπορείς να κάνεις AJAX requests στον server για να σου στείλει καλύτερης ποιότητα κομμένες εικόνες.

Άβαταρ μέλους
deninho
Super Moderator
Δημοσιεύσεις: 7066
Εγγραφή: 17 Ιαν 2004 16:01
Τοποθεσία: σ'άλλη διάσταση
Επικοινωνία:

Αυτόματη μείωση του μεγέθους μιας εικόνας

Δημοσίευση από deninho » 12 Ιαν 2008 21:07

Ωραίος σκεφτόμυλε :) Προτιμώ την εντολή που μου έδωσε ο fafos :P

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6228
Εγγραφή: 30 Νοέμ 2004 03:09

Αυτόματη μείωση του μεγέθους μιας εικόνας

Δημοσίευση από fafos » 12 Ιαν 2008 22:30

deninho έγραψε:Ωραίος σκεφτόμυλε :) Προτιμώ την εντολή που μου έδωσε ο fafos :P
einai san tis euxes pou poulaei.. mexri na diavaseis tis odhgies exeis ksexaseis thn euxh pou theleis na kaneis :kaloe:

Άβαταρ μέλους
deninho
Super Moderator
Δημοσιεύσεις: 7066
Εγγραφή: 17 Ιαν 2004 16:01
Τοποθεσία: σ'άλλη διάσταση
Επικοινωνία:

Αυτόματη μείωση του μεγέθους μιας εικόνας

Δημοσίευση από deninho » 13 Ιαν 2008 00:27

Ο λόγος που ζήτησα και κάτι διαφορετικό δεν ήταν για να το εφαρμόσω. Η λύση σου, είναι 2 γραμμές και κάνει ακριβώς τη δουλειά που θέλω. Τα άλλα τα ζήτησα για εγκυκλοπαιδικούς λόγους :) Αλλά και πάλι είναι λίγο σπούκι, οπότε και πάλι θα τα απέφευγα :P

Άβαταρ μέλους
deninho
Super Moderator
Δημοσιεύσεις: 7066
Εγγραφή: 17 Ιαν 2004 16:01
Τοποθεσία: σ'άλλη διάσταση
Επικοινωνία:

Αυτόματη μείωση του μεγέθους μιας εικόνας

Δημοσίευση από deninho » 10 Δεκ 2008 16:56

bump... Αλλαγή theme, και παρ'ότι προσθέτω τον κώδικα που μου έδωκε ο fafos στο css μου, δεν έχω καμία αλλαγή :? Καμιά ιδέα γιατί, αλλά και για το πως θα το διορθώσω;

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6228
Εγγραφή: 30 Νοέμ 2004 03:09

Αυτόματη μείωση του μεγέθους μιας εικόνας

Δημοσίευση από fafos » 10 Δεκ 2008 17:11

deninho έγραψε:bump... Αλλαγή theme, και παρ'ότι προσθέτω τον κώδικα που μου έδωκε ο fafos στο css μου, δεν έχω καμία αλλαγή :? Καμιά ιδέα γιατί, αλλά και για το πως θα το διορθώσω;
dokimase me javascript:

<script type="text/javascript">
function resize() {
if (document.images) {
var browserwidth = window.document.body.clientWidth;
var displaywidth = browserwidth*0.30;
for (var ii = 0; ii < document.images.length; ii++) {
var i = document.images[ii];
var imagewidth = i.width;
if (imagewidth > displaywidth) {
i.style.width = 99 + '%';
}
}
}
}
if (window.addEventListener) {
window.addEventListener('load', resize, false);
} else if (window.attachEvent) {
window.attachEvent('onload', resize);
} else {
window.onload = resize;
}
//-->
</script>

Άβαταρ μέλους
deninho
Super Moderator
Δημοσιεύσεις: 7066
Εγγραφή: 17 Ιαν 2004 16:01
Τοποθεσία: σ'άλλη διάσταση
Επικοινωνία:

Αυτόματη μείωση του μεγέθους μιας εικόνας

Δημοσίευση από deninho » 10 Δεκ 2008 17:55

(με το συμπάθειο :P) αλλά που το βάζω το script αυτό; στο php αρχείο που αναφέρεται στο post που θα περιέχει την εικόνα?

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6228
Εγγραφή: 30 Νοέμ 2004 03:09

Αυτόματη μείωση του μεγέθους μιας εικόνας

Δημοσίευση από fafos » 10 Δεκ 2008 18:05

deninho έγραψε:(με το συμπάθειο :P) αλλά που το βάζω το script αυτό; στο php αρχείο που αναφέρεται στο post που θα περιέχει την εικόνα?

anamesa sta <header>....</header>

Άβαταρ μέλους
deninho
Super Moderator
Δημοσιεύσεις: 7066
Εγγραφή: 17 Ιαν 2004 16:01
Τοποθεσία: σ'άλλη διάσταση
Επικοινωνία:

Αυτόματη μείωση του μεγέθους μιας εικόνας

Δημοσίευση από deninho » 10 Δεκ 2008 18:13

Αχμμμ.. Ουσιαστικά στο header μου, δηλαδή :) Έκανε δουλειά :D Σε ευχαριστώ πολύ, και πάλι :)

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 2 επισκέπτες