Mehrere Bilder im Tumblr-Style einbinden [Tutorial]

29. März 2014 | 26 Kommentare


Heute hab ich für die (wenn auch nur ein bisschen?) HTML-Begeisterten wieder was Feines. Irgendjemandem da draußen ist es wahrscheinlich gar nicht recht wenn ich mehr Code-Schmarrn als Büchriges poste, aber ich möchte mich bezüglich des Blogthemas sowieso nicht ganz festlegen. Außerdem wirds total cool und ziemlich simpel, ich versprechs! Ich hab diese Methode mal gewählt um einen langen (Laber-)Post mit ein paar Bildern aufzulockern. Außerdem ist es mal eine andere Art der Bilddarstellung und schaut interessant aus :) Danke an den genialen Oliver der das Skript geschrieben hat, ich bin hier ja nur fürs Einbinden zuständig!
©WeIt



Als erstes bestimmt ihr, wie viele und welche Bilder ihr darstellen wollt. Das macht ihr direkt im Post im HTML-Modus. Im Beispiel sind bereits 6 Bildcodes gegeben, bei denen ihr nur noch die URL einfügen müsst. Ihr könnt aber natürlich auch mehr oder weniger als 6 Bilder nehmen ;)







Ich weiß, dass das Ergebnis bis jetzt katastrophal aussieht, aber das ändern wir nun unter Vorlage Anpassen Erweitert CSS hinzufügen. Dort fügt ihr folgenen Code ein.





Im Prinzip ist man jetzt fertig! Wenn ihr alles gespeichert und aktualisiert habt, solltet ihr jetzt eine Tumblr-Galerie mit drei Spalten haben. Die geht natürlich auch anpassen - auf zwei oder vier Spalten zum Beispiel. Dazu muss man allerdings den Code ein wenig umschreiben, damit die Bildbreite mit der Postbereichbreite übereinstimmt und der ganze Käse. Zum Beispiel: Mein nutzbarer Postbereich ist etwa 700px breit, wenn ich drei Spalten will sollte ein Bild also 233px breit sein. Bei zwei Spalten wären das 350px. Wenn man die Zahlen hat, kann man die wie folgt im Code anpassen:

Wie breit soll die Galerie insgesamt sein? Kann man sich ungefähr ausrechnen mit Vorlage → Anpassen → Breite anpassen, gesamte Breite minus der Sidebar und dann noch minus 100px, damit die Galerie nicht ganz so an den Rand gequetscht wird. Bei mir wäre die optimale Größe 700px - also eure Zahl statt der 700 einfügen (2 Stellen)!

Wie viele Spalten soll die Galerie haben? Empfehlen würde ich spontan entweder 2, 3, oder 4. Die 3 unter # content { müsst ihr dadurch ersetzen.

Wie breit muss ein Bild sein? Geht wie gesagt ganz leicht ausrechnen indem ihr die Breite der Galerie durch die Spalten dividiert. Dafür ersetzt ihr 233 (auch in Schritt 1) durch eure Zahl.

Das ist vielleicht etwas flapsig erklärt, aber wenn ihr das einmal verstanden habt, steht euch in eurem Leben nichts mehr im Weg :D Wenn es zu diesem Schritt noch Fragen gibt helf ich euch gerne. Und zu den vorherigen Schritten natürlich auch!


26 Kommentare

  1. Hahaha Süße, wir haben eindeutig eine starke Verbindung! Ich wollte dich GENAU DAS (na ja gut auch wie das geht das man sie so zur Seite ziehen kann) vor ungefähr 2 Stunden fragen :D
    Wie genial! <3

    AntwortenLöschen
    Antworten
    1. Das KANN kein Zufall sein :P Mara hatte mich nämlich auch schon mal danach gefragt, aber ich konnte das ohne Bilder und Codes und alles nicht so gut erklären. Hoffentlich können sich noch ein paar anderen dran erfreuen :)

      Löschen
    2. Naa irgendwie hab ich das ja dann schon noch hingekriegt mit deiner Hilfe ;) Danke dafür nochmal Dandylein! <3

      Löschen
    3. Ich hoffe doch dass es dann noch funktioniert hat :)

      Löschen
  2. Super! ich danke schon mal und werde das irgendwann austesten!
    Aber sag mal, die Fotos müsste ich dann über einen anderen Anbieter hochladen?
    Oder geht das auch übers Picasa Album????
    Liebe Grüße
    Anett.

    AntwortenLöschen
    Antworten
    1. Ich nutze selbst Picasa nicht, aber grundsätzlich geht das bei jedem Anbieter! Du kannst auch die Fotos direkt in Blogger hochladen (zB einen leeren Post erstellen -> Bild einfügen). Sind ja alles nur Mittel zum Zweck: damit man an die Bild-URL kommt! :)
      zB: http://data1.whicdn.com/images/102003324/large.png

      (Sieht aus wie eine 'normale' Webadresse, hat aber hinten eine Bilderendung, also .jpg, .png, .gif etc. Durch diese Adresse wird man auf eine Seite geleitet, die einfach nur das Bild/die Grafik enthält.)

      Löschen
    2. An die URL kommt man natürlich mit Rechtsklick auf das Bild!

      Löschen
  3. Ui, die Idee ist ziemlich gut und ich finde es toll, dass du uns auch mal ein paar Codes präsentierst ^^ Liebst, Emme ♥

    AntwortenLöschen
    Antworten
    1. Pssst, die Idee ist ja nicht direkt von mir, ich setz die ja nur um ;) Toll, das freut mich!

      Löschen
  4. Super Tutorial! ♥
    Weißt du wie man das auch nur für eine einzelne Unterseite macht?
    Also, dass man sozusagen eine Unterseite macht, z.B sowas wie eine "Galerie" und die Bilder dann dort so angezeigt werden.

    Valerie ♥
    http://atme-in-gedanken.blogspot.de

    AntwortenLöschen
    Antworten
    1. Ich weiß nicht genau ob du das meinst was ich jetzt verstehe. Wenn man eine (Unter-)Seite für seinen Blog erstellt, ganz normal auf seinem Dashboard unter "Seiten", fügt man den Code wie im Post beschrieben ein (eine Seite ist auch nicht viel anders als ein Post ^^).

      Löschen
  5. Grr, bei mir funktionierts irgendwie nicht -.- Vielleicht bin ich auch einfach du blöd dazu, ich hasse Blogger :D

    AntwortenLöschen
    Antworten
    1. Es ist eigentlich echt nur eine Übungssache, irgendwann kennt man sich da halbwegs aus :p Wenn dus unbedingt haben willst kann ichs dir auch einstellen.

      Löschen
  6. Danke! War mir eine große Hilfe :)

    AntwortenLöschen
  7. Das ist toll, vielen Dank!!! Nach sowas hab ich schon eine Weile gesucht.

    AntwortenLöschen
  8. You rock, Sandrachen. Aber soooowas von =D Vieeeelen Dank, das werd ich hoffentlich bald anwenden können - sieht sogar relativ einfach aus! Aber wir wissen ja, HTML undso, läuft nie so, wie Ley es will ;P

    Hab grad was entdeckt o.O Sagmal, weißt du irgendwas über dieses Man-kann-grad-nicht-mehr-über-GFC-folgen??? Ich hab keine Ahnung, was ich machen soll....also viele folgen ja auch über BC und BL, weiß scho, aber trotzdem....da hat mich eine gefragt übern Kommentar, weiß nur gar nicht, was ich antworten soll, ich würds gern beheben....tzia, Google wird wohl hoffentlich was ausspucken =) Falls du was drüber weißt, tell me!!

    Überhaupt, wie geht's euch Gurkis??!! Ich vermiss euch total und mein Handy soll bald in die Reparatur....geht einfach nimmer an....glaube, hat was mit dem Betriebssystem oder Akku zu tun...eins davon....gibts irgendwas spektakuläres zu berichten? Oder same as everyday? ^.^

    Liebste Grüße ♥
    euch vermissende *schnief* Ley

    AntwortenLöschen
    Antworten
    1. Immer wenn man denkt es sei einfach ... aber wirklich, es sollte eigentlich kaum Probleme machen :p

      Ich hab selbst schon einige Posts dazu gesehen ... Ich persönlich verwende GFC ja wirklich gaaarnicht mehr (Bloglovin for the win), aber falls du das trotzdem beibehalten willst: geh einfach auf den Dashboard und geh links bei "Leseliste" auf "Hinzufügen" und da trägst du dann die URL des Blogs ein. Macht keine Probleme!
      Ich seh grad ... ich MUSS echt dran arbeiten schneller zu antworten ... böööhööse Sandra ò.ó ...

      Haha, da sieht man mal wieder was für ein super Timing ich hab ^^ Falls du wirklich was verpasst hast, wirst du wahrscheinlich eh grad in just diesem Augenblick aufgeklärt :p Hm, ich weiß nicht mehr genau wann du raus bist ... Bina ist gegangen, und Sontka und Ines, und Claudi und Marsi sind wieder zurüüück ... ach wir schreim uns später ;) ♥

      Löschen
  9. Dandy?
    Hast du nicht Lust, in ein paar Wochen eine Informatikarbeit für mich zu schreiben? Du kannst das so gut :D
    Und das Bild mit Dany als Mona Lisa bringt mich gerade auf die Frage, wie das ohne Augenbrauen (also wie bei Mona Lisa) oder mit Monobraue aussehen würde... und wie würden Drachen mit Monobrauen aussehen?
    Ich weiß, ich schweife ab, aber Drogon mit Monobraue...
    Und ich glaube Valerie meinte oben, wie man es macht dass die drei Bilderspalten unten auf gleicher Höhe abschließen... ich würde ja dann versuchen, dem gesamten Code eine Höhe zuzuweisen, falls das irgendwie geht :)
    Alles Liebe^^

    AntwortenLöschen
    Antworten
    1. Haha, wir machen selbst grad HTML und zwar suuuperlangsam, da ist es echt so super wenn man sich da schon (hart erkämpft xD) schon auskennt :D
      Kannst ja versuchen die Augenbrauen wegzuretuschieren und ein paar Monobrauen dazuzuschummeln ... aber ich sag dir schon jetzt ... es wird komisch aussehen. :p
      Hm, das könnte man irgendwann mal ausprobieren, wär aber schwierig, weil durch die Höhenzuweisung die Bilder in unnatürliche Höhen gepresst oder gezerrt werden, da müsste man schon echt passende Bilder haben ^^

      Löschen
  10. Finde ich toll das es noch Leute auf dieser Welt gibt, die tatsächlich Bücher lesen.
    Man verliert so selten ein Wort darüber.

    AntwortenLöschen
  11. du bist klasse .. mensch du gibst uns bloggern echt tolle Tipps :) danke dafür

    AntwortenLöschen
  12. Danke, Danke, Danke ♥
    Ich hab das immer total mühsam in GIMP nebeneinander gesetzt und dann als eine Bild gesetzt. (<-- Warum einfach wenn es auch kompliziert geht?^^)

    Liebe Grüße, Jasi ♥

    AntwortenLöschen
    Antworten
    1. Oh, du Arme! So gehts mir aber auch oft: Simpel? Was ist simpel? ... Aber jetzt weißt du es ja, und ich wünsch dir viel Erfolg beim Ausprobieren! ♥

      Löschen

Ich schätze es sehr, dass du dir die Mühe machst, mir dein Feedback zu hinterlassen! Der Blog wird nicht mehr weitergeführt, ich bin aber noch über die Kommentar-Funktion erreichbar.

© 2012 - 2016 Pusteblume? · Powered by Blogger · Datenschutz · Impressum