Freitag, 30. Oktober 2015

img {max-width: 100%}

Ganz still und heimlich hat sich die Jahresuhr einmal um den Blog gedreht. Als ich im September 2014 mit dem Schreiben begonnen habe, hätte ich nicht gedacht, dass ich dem so lange treu bleiben würde. Knapp 50 Einträge haben den Blog seither bereichert. Mal mehr mal weniger Zeit konnte ich dem Schreiben widmen. Die Kamera hat endlich wieder mehr zu tun und ein routinierter Umgang mit den Bildern hat sich eingeschliffen. Aber auch der half lange nicht, dem Wunsch nach einem einheitlichen Aussehen auf dem Blog gerecht zu werden. Aber diese Woche habe ich endlich den gesuchten Code gefunden.

Obwohl ich seit einiger Zeit alle Bilder für den Blog mit einer Breite von 800px abspeichere, ist die Optik der Bilder meist nicht dieselbe. Abhängig von der Höhe werden die Bilder trotzdem nicht gleich angezeigt. Kein Drama - aber es war mir ein Dorn im Auge.

Im Hinblick auf die Nutzung für Instagram habe ich dann begonnen, die Bilder quadratisch abzuspeichern. Das löste für die meisten Fälle mein Problem. Aber es lässt sich nun mal nicht jedes Bild auf ein Quadrat reduzieren. Hin und wieder gehen da schon mal schöne Details verloren. Bei einigen Blogs habe ich gesehen, dass die Bilder das komplette Format des Frames nutzen. Alle Bilder werden auf die Breite des Frames angepasst und die Höhe automatisch skaliert. Danach habe ich gesucht und diese Woche kam dann endlich die Erleuchtung.

Hier der CSS Code:

.post-body img 
{
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
box-shadow: none;
border: none;
padding: 0px;
}

Und hier die Stelle, wo der Code bei Blogger hinterlegt werden und anschließend mit "auf den Blog anwenden" bestätigt werden muss.
Der Code besagt, dass die Größe des Bildes an Breite des Frames angepasst wird und zwar nur in dem Frame, in dem gepostet wird (der Schnipsel fehlte mir lange Zeit). Die Höhe wird automatisch skaliert. Zusätzlich ist in dem Code noch enthalten, das die Ränder um das Bild weggelassen werden. Für mein Problem nicht entscheidend, hat mir aber dennoch gut gefallen, so dass ich das gleich mit übernommen habe.

Wichtig ist nun noch (sonst klappt es nämlich nicht):
  1. dass die Bilder grundsätzlich groß genug sind, um den kompletten Frame auszufüllen
  2. dass bei den Bildern „Originalgröße“ eingestellt ist
  3. dass die Position des Bildes auf „zentriert“ gestellt ist

Ich hoffe, ich habe verständlich erklärt, was ich meine. Ich bin kein Programmierer kann aber ein wenig den Code lesen. Was für den einen oder anderen simpel und selbstverständlich ist, muss ich mir suchend im Web erarbeiten. Ich freue mich über diesen kleinen Erfolg und hoffe auch dem einen oder anderen von Euch eine kleine Hilfe gewesen zu sein.

Eure Besuche und die vielen unglaublich lieben Kommentare des letzen Jahres sind mir ein Ansporn. Jeder einzelne zaubert mir auch nach mehrmaligen Lesen ein Lächeln ins Gesicht (auch wenn das auf manchen Bildern nicht immer so aussieht. ;-)
Im Antworten auf eurer Kommentare bin ich immer noch recht nachlässig. Zumindest auf Fragen habe ich mich bemüht zu antworten. Da möchte ich gern an mir arbeiten. Deshalb bin ich auf Euer Feedback gespannt: Wie haltet ihr es mit dem Antworten auf eurem Blog? Erwartet ihr eine Antwort auf eure hinterlassenen Kommentare in anderen Blogs - kehrt ihr also zu dem jeweiligen Post zurück? Ich freue mich auf eure Erfahrungsberichte.

Ich wünsch‘ Euch ein schönes Wochenende und allen Dresdner Mädels am Samstag viel Spaß beim Stoffmarkt.

Verlinkt bei Freutag.

Quelle:
http://helplogger.blogspot.de/2014/08/automatically-resize-blogger-images.html

10 Kommentare:

  1. Genial - bei mir passt es ja auch "fast" und auch ich bastel ab und zu wild im Code herum :-) Hast du denn jetzt alle deine bisherigen Posts nochmal angepasst? Bei mir wären das ja schon 1412 ....

    AntwortenLöschen
    Antworten
    1. Ja ich hab tatsächlich nochmal alle Posts durchgeklickt.
      Lohnt sich vielleicht bei 1412 nicht. Ich hatte auch erst überlegt nur die letzten 10 zu ändern, aber als ich dann so dabei war ... ;-)

      Löschen
  2. PS: Ja, ich kehre manchmal zurück, wenn ich aber selbst antworte, kopiere ich meine Antwort meist in den dazugehörigen Blog hinein .... aber nur, wenn es die Zeit erlaubt (oder man sich wie jetzt vor der Steuererklärung drückt)

    AntwortenLöschen
  3. Gespräche/Diskussion unter "Profis"! Das sind alles für mich leider "Böhmische Dörfer", denn davon habe ich überhaupt keine Ahnung. Und ich muss sagen, es ist schön, Eure beiden blogs (Deiner und von amber light und viele andere) zu durchstöbern. Das zählt für mich.
    Doreen, Dir gratuliere ich zum Bloggeburtstag und wünsche Dir weiterhin viele gute Einfälle für`s Nähgen und bloggen.
    Liebe Grüße

    AntwortenLöschen
    Antworten
    1. Lieben Dank Bärbel. Ich dachte ich schreibs mal auf, vielleicht sucht ja noch ein anderer verrückter Blogger danach ;-)

      Löschen
  4. Happy Birthday Blog. Ist ja noch sehr jung, aber schon sehr ausgereift. Ich muss ja zugeben, dass ich zwar schon seit 7 Jahren meinen Blog betreibe, das allerdings immer versuche mit dem geringsten Aufwand zu tun. Das Design fällt da leider immer ein bisschen runter - weil das richtig viel Zeit frisst, vor allem , wenn man so gar nicht vom Fach ist.
    Ich lese gerne hier mit.
    Mit dem Feedback ist das so eine Sache. Seit es die Funktion mit dem direkt Antworten im Blog selbst gibt, bin ich hin und her gerissen. Standardmäßig nutze ich die reply to Funktion in den E-Mails zu Kommentaren. Die Zahl derer, die no-reply Kommentierer sind ist mittlerweile leider in der Überzahl. Da fällt diese Funktion flach. Bleibt nur eine Antwort direkt im Blog, bei der ich oft bezweifle, dass sie noch einer liest. Ich selbst gehe selten zu Blogbeiträgen zurück, bei denen ich mal kommentiert habe. Ich erwarte auch nicht, dass man mir immer Feedback zu meinen Kommentaren gibt.
    Dein Tipp mit den Fotos ... ist wahrscheinlich das was mein Blog dringend bräuchte. Allerdings ist da wieder der Zeitfaktor. :-(
    LG
    Kerstin

    AntwortenLöschen
    Antworten
    1. Ich muss jetzt erstmal die reply-to Funktion suchen gehen... ;-)

      Löschen
  5. Na dann erstmal glückwunsch zum Geburtstag!
    Es ist nicht einfach für alles Zeit zu finden...ich habe mich nach langem probieren dafür entschieden persönlich zu antworten (wenn es eine Frage ist und kein no-reply Kommentar), wenn es eine Frage ist die für alle interessant werden könnte antworte ich direkt in dem Post. Ansonsten gehe ich immer bei dem kommentierendem vorbei gucken. Dauert alles seine Zeit, aber ich finde es wichtig.
    Liebste Grüße,
    Lee

    AntwortenLöschen
  6. Glückwunsch zum Bloggeburtstag! Ich hab das Gefühl, du wärst schon viel länger dabei!
    Lädst du die Bilder für instagram denn vom PC hoch? Ich dachte immer, das geht nicht bzw. hab dafür die richtige Technik noch nicht entdeckt...

    Zu deiner beschriebenen Bilder bzw. Codegeschichte kann ich nur sagen: Hut ab, ich verstehe davon nix... ich oute mich mal, dass ich nichtmal weiß, was ein Frame ist :-) nicht lachen!!!
    Wie heute schon besprochen geht für Fotografieren, Bilder bearbeiten und Post schreiben (da will man ja auch keinen Mist schreiben) eh schon so viel Zeit drauf, da mag ich mich nicht mit Codes beschäftigen, von denen ich nix verstehe. Auch wenn es verlockend klingt!!

    Zur Antwortfunktion: ich kehre manchmal zu Blogs zurück, wo ich kommentiert habe um zu schauen, ob dort eine Antwort steht. Selbst antworte ich selten bei mir im Blog auf Kommentare sondern melde mich per Antwortmail oder Kommentar, da ist es sicherer, dass die Antwort gelesen wird!

    LG von mir!

    AntwortenLöschen
  7. Vielen Dank für den Tip, diese Option hab ich mir schon länger gewünscht, war aber nicht motiviert genug sie zu suchen.

    AntwortenLöschen

Auch wenn ich nicht auf jeden Kommentar antworten kann, so zaubern mir die lieben Worte, Anregungen und gern auch mal Kritik ein Lächeln auf die Lippen. Vielen Dank für Deine Nachricht.

HINWEIS: Mit dem Absenden Deines Kommentars erteilst Du Deine Zustimmung, dass Dein Kommentar und die damit verbundenen personenbezogenen Daten (z.B. Benutzername, Mailadresse, verknüpftes Googleprofil) an Google-Server übermittelt werden. Mehr Informationen dazu erhältst du in meiner Datenschutzerklärung und in der Datenschutzerklärung von Google.