Πώς θα προσαρμόσετε το μέγεθος των εικόνων στα posts σας

Ο blogger είναι σίγουρα λίγο πίσω σε ορισμένα απλά θέματα επεξεργασίας και μας τα κάνει δύσκολα χωρίς λόγο.
Έχω ψάξει αρκετά για τον πιο εύκολο και γρήγορο τρόπο με τον οποίο θα κάνω τις εικόνες μου να καταλαμβάνουν το 100% του πλάτους της ανάρτησης, (δηλαδή να έχουν το ίδιο πλάτος με το σώμα του κειμένου) και να μην είναι ούτε μικρότερες, ούτε μεγαλύτερες.
Υπάρχουν μερικά σημεία που πρέπει να προσέξουμε κάθε φορά που προσθέτουμε μια φωτογραφία. Μην αγχωθείτε αν σας φανούν πολλά, είναι θέμα συνήθειας.


1. Επιλέγουμε αρχικό μέγεθος εικόνας.

Επιλέγουμε αρχικό μέγεθος εικόνας, ώστε να μας μπορέσουμε να εκμεταλλευτούμε την εικόνα μας στο μέγιστο μέγεθος που την ανεβάσαμε. Όταν ανεβάζουμε μια εικόνα στην ανάρτησή μας η προεπιλογή είναι μεσαίο. Σίγουρα έχετε παρατηρήσει τις επιλογές μεγέθους, όταν η εικόνα σας είναι επιλεγμένη, μέσα στην επεξεργασία ανάρτησης. Επίσης να επιλέγετε πάντα στοίχιση στο κέντρο, όπως σας δείχνω στην παρακάτω εικόνα.


Εδώ σας έχω μία εικόνα σαν παράδειγμα, στην οποία έχω επιλέξει μικρό, μεσαίο, μεγάλο, πολύ μεγάλο και αρχικό μέγεθος. Βλέπετε τις διαφορές;

150 x 200 pixel

240 x 320 pixel

300 x 400 pixel

480 x 640 pixel


Όπως βλέπετε, στις λεζάντες σας γράφω τις προεπιλεγμένες διαστάσεις του blogger, για την κάθε επιλογή μεγέθους. Οι δυο τελευταίες, (αρχικό μέγεθος) έχουν το μέγεθος της εικόνας όπως εμείς την ανεβάσαμε.
Όπως έχουμε ήδη πει, είναι ασφαλές για το δωρεάν χώρο μας να ανεβάζουμε εικόνες μέχρι και 2048 x 2048 pixels, δηλαδή τεράστιες φωτογραφίες!
 Προσοχή όμως, δεν τελειώσαμε ακόμα!

2. Αφαιρέστε το σύνδεσμο από τις εικόνες σας

Ο blogger δυστυχώς, έχει σαν προεπιλογή, όλες μας οι εικόνες να γίνονται σύνδεσμοι όταν τις ανεβάζουμε. Αυτό σημαίνει ότι όταν κάνουμε κλικ επάνω σε μια εικόνα της ανάρτησης, θα οδηγούμαστε είτε στην εμφάνιση του Lightbox, ή αν το έχουμε απενεργοποιημένο, θα βλέπουμε την εικόνα μόνη της στο browser. Εμένα δε μου αρέσει καμία από τις δυο επιλογές και ο τρόπος να τις καταργήσουμε και τις δύο είναι απλά να κάνουμε κλικ στην εικόνα, όσο βρισκόμαστε στην επεξεργασία της ανάρτησης και να κάνουμε κλικ στο "Σύνδεσμος" επάνω στη μπάρα μας, για να τον απενεργοποιήσουμε. (βλ. παρακάτω εικόνα)
 Αυτό αφαιρεί την ιδιότητα του συνδέσμου από τη φωτογραφία και όταν κάποιος κάνει κλικ επάνω της δεν συμβαίνει τίποτα.
Εμάς στην προκειμένη περίπτωση, αυτό μας ενδιαφέρει γιατί αφαιρεί συγχρόνως και την ενοχλητική για μένα επίσης προεπιλεγμένη μορφοποίηση του συνδέσμου, που προσθέτει άχρηστα"περιθώρια" δεξιά και αριστερά της εικόνας. Όταν αφαιρέσετε το σύνδεσμο, θα δείτε ότι η εικόνα σας, θα μετακινηθεί εντελώς στα αριστερά και έτσι, δε θα προεξέχει αντιαισθητικά εκτός της ανάρτησης στα δεξιά. 
Για του λόγου το αληθές, δείτε τις δυο τελευταίες εικόνες πιο πάνω. Και οι δυο έχουν "Αρχικό μέγεθος", αλλά από τη δεύτερη έχω αφαιρέσει το σύνδεσμο με ένα απλό κλικ.


3. Λίγη CSS. Ελάχιστη. Προσοχή όμως! Το αρχικό μέγεθος μπορεί να είναι πολύ μεγαλύτερο από το πλάτος των αναρτήσεών μας. Αυτό σημαίνει ότι πρέπει με κάποιον τρόπο να εμποδίσουμε την εικόνα να προεξέχει από τις αναρτήσεις μας και να καταστρέψει τα πάντα. Δείτε στην παρακάτω εικόνα για τι πράγμα μιλάω. Ο μπλε πάγος είναι στο αρχικό του μέγεθος. Αίσχος!
Σίγουρα το έχετε πάθει όλοι, αλλά δεν ξέρετε πώς να το διορθώσετε και επιλέγετε απλά μεγάλο μέγεθος για να είστε καλυμμένοι. Αλλά το μεγάλο μέγεθος, συνήθως δεν είναι αρκετά μεγάλο.


Υπάρχουν 2 τρόποι. Ο ένας είναι μια κι έξω και δε θα χρειαστεί να ξανασχοληθείτε ποτέ με το θέμα.
Με τον άλλο, πρέπει κάθε φορά να θυμάστε να το ξανακάνετε, πράγμα δύσκολο.
Οπότε σας λέω μόνο τον πρώτο τρόπο.
Πάτε Πρότυπο > Προσαρμογή > Προηγμένη > Προσθήκη CSS.



Προσθέστε εκεί τον παρακάτω κώδικα. Μην ξεχάσετε την τελεία στην αρχή. Κάντε εφαρμογή στο ιστολόγιο και είστε έτοιμοι. Τώρα κάθε φορά που θα ανεβάζετε μια εικόνα και θα επιλέγετε αρχικό μέγεθος, θα περιορίζεται στα όρια της ανάρτησης όσο μεγάλη και να είναι.

.post-body img{max-width:100%;}

Είδατε πόσο εύκολο; 

Μόνο τρία βήματα:

1. ανεβάζετε τη φωτογραφία και επιλέγετε αρχικό μέγεθος και στοίχιση στο κέντρο.
2. αφαιρείτε το σύνδεσμο από την εικόνα για να είναι σωστά κεντραρισμένη, χωρίς περιττά περιθώρια.
3. προσθέτετε μόνο μία φορά τον παραπάνω κώδικα για να μην βγαίνουν οι εικόνες σας τεράστιες και προεξέχουν από παντού.

Ένα τελευταίο πράγμα που πρέπει να έχουμε υπόψιν, είναι ότι σε περίπτωση που το πλάτος της στήλης των αναρτήσεών σας είναι responsive, δηλαδή αλλάζει ανάλογα με το μέγεθος της οθόνης του εκάστοτε υπολογιστή, τότε υπάρχει κάποιο όριο στο μέγεθος της εικόνας σας. Δηλαδή, αν αυτή την ανάρτηση τη βλέπετε σε τεράστια οθόνη 24 ιντσών, οι εικόνες που έχουν μέγιστο (αρχικό) πλάτος 2048px δε θα καταλαμβάνουν όλο το πλάτος της ανάρτησης, αλλά θα είναι πιθανόν λίγο μικρότερες. Αυτό συμβαίνει λόγω του κώδικα, ο οποίος σε απλά ελληνικά λέει: 
Το μέγιστο πλάτος των εικόνων των αναρτήσεων να είναι το πολύ ίσο με το πλάτος της ανάρτησης. Σε περίπτωση που το πλάτος της ανάρτησης είναι μεγαλύτερο από το φυσικό μέγεθος της εικόνας, να μην παραμορφώνεται η εικόνα, αλλά να διατηρεί το μέγιστο φυσικό της πλάτος. 

Αυτό βέβαια είναι αρκετά σπάνιο και μάλλον δε θα σας απασχολήσει για 3 λόγους:

1. Τα blog του blogspot, δεν έχουν responsive πλάτος ανάρτησης, εκτός αν το κάνετε με κώδικα, όπως εγώ στο "Χωρίς Ειρμό". Το πλάτος δηλαδή είναι standard, σε οποιαδήποτε οθόνη υπολογιστή. Αν είναι πιο μεγάλη η οθόνη, απλά φαίνονται πιο μεγάλα τα περιθώρια στο πλάι.

2. Δεν είναι τόσο διαδεδομένες οι τόσο μεγάλες οθόνες που να χρειάζονται εικόνες πάνω από 2048px σε πλάτος.

3. Θα μπορούσατε αντί για "max-width" στον κώδικα, να γράψετε σκέτο "width", και αυτό θα εξανάγκαζε την εικόνα να καταλαμβάνει όλο το πλάτος της ανάρτησης, ακόμη και στις μεγαλύτερες οθόνες. Αυτό όμως δεν τον συνιστώ, γιατί θα παραμόρφωνε την εικόνα για να την κάνει μεγαλύτερη απ' όσο είναι στην πραγματικότητα. Αυτό φυσικά, καταστρέφει την ποιότητα της φωτογραφίας, την κάνει θαμπή και ... "πιξελιασμένη"!

Αυτά από μένα, ελπίζω να βοήθησα! Αν το κάνετε, σας παρακαλώ, αφήστε ένα σχόλιο για να το δω κι εγώ και αν σας άρεσε μοιραστείτε την ανάρτηση αυτή!

Φιλάκια,
Λίνα aka linaaaap

Σχόλια

  1. Θα αρχίσω τις δοκιμές με την πρώτη ευκαιρία...φυσικά θα σε ενημερώσω αν τα κατάφερα...σε ευχαριστώ πάρα πολύ!

    ΑπάντησηΔιαγραφή
  2. Τα κατάφερα!!
    Έκανα τη λιβελούλα να μεγαλώσει!!
    Όπως κατάλαβες έβαλα χέρι στην τελευταία μου ανάρτηση!
    Είσαι υπέροχη και οι οδηγίες σου κατανοητές ακόμα και για μένα, που σπίρτο δε με λες!!!
    Σε ευχαριστώ πολύ!

    ΑπάντησηΔιαγραφή
  3. Με βοήθησες αρκετά!Κάποια από αυτά δεν τα ήξερα καν.
    Αλλά θέλω να σε ρωτήσω..Ακολουθώ τα βήματα που αναφέρεις για τον κώδικα,δηλ. τον αντιγράφω,αλλά το πλαίσιο που λέει "εφαρμογή στο ιστολόγιο" δεν μπορώ να το πατήσω.Αυτό φαίνεται και στην παραπάνω εικόνα που έβαλες.
    Επίσης,τον κώδικα αυτόν πρέπει να τον ανανεώνω κάθε φορά ή τον αποθηκεύω μόνο μία και δεν χρειάζεται ξανά;;
    Και πάλι ευχαριστώ!

    schoolflowers.blogspot.com

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Βάσια μου, αφού επικολλήσεις ή πληκτρολογήσεις τον κώδικα, κάνε ένα κλικ μέσα στο πλαίσιο ή πάτα enter και θα ξεγκριζάρει η εφαρμογή. Μόνο μία φορά θα το κάνεις!

      Διαγραφή

Δημοσίευση σχολίου

Δημοφιλείς αναρτήσεις από αυτό το ιστολόγιο

Πώς θα κάνω κλήρωση διαγωνισμού με το random.org

Πώς δημιουργώ σύνδεσμο σε κείμενο ή εικόνα;

Πώς θα βάλω λογότυπο/υπογραφή στην εικόνα μου;