Auflistung der Posts umdesignen

Nikurasu

Hallo :)

ich würde gerne meine Index Seite umdesignen. Im Anhang ist ein Bild wie ich mir das dachte. Jedes Bild soll zu einem Post gehen, der neuste immer oben links und dann gehen die da so durch. Das Bild will ich per benutzerdefiniertem Feld angeben.

Dann wollte ich wenn das zu realisieren ist jedes Bild so designen wie im zweiten Anhang zu sehn. Der Dunkelgraue Bereich soll transparent sein sodass man das Bild dadurch sieht. Außerdem sollte dieses transparente Bild je nach Kategorie verschieden sein.

Ich weiß das ist viel zu tun XD

Wäre schön jemand könnte mir helfen.
Und vielen Danke schonmal

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Ammaletu

Tja, erwartest Du jetzt, dass Dir hier jemand die fertige Lösung als copy&paste ablegt? Das wird nämlich eher nicht passieren. ;-)

Ansonsten fang doch mal an zu beschreiben, was Du bisher versucht hast und wie weit Du da gekommen bist. So speziell schwer ist das ja nicht, denke ich.

Nikurasu

Zitat von Ammaletu

Tja, erwartest Du jetzt, dass Dir hier jemand die fertige Lösung als copy&paste ablegt? Das wird nämlich eher nicht passieren. ;-)
Ansonsten fang doch mal an zu beschreiben, was Du bisher versucht hast und wie weit Du da gekommen bist. So speziell schwer ist das ja nicht, denke ich.

Die Hoffnung war da ;) Naja, ich kenn mich leider nicht so gut aus. Aber ich habe mir gedacht wenn ich jeden post einzeln in der Index Datei mit nem eigenen DIV ausstatten kann, kann ich jedem die größe und die Position die ich will verpassen. Dann wird die Index zwar etwas größer aber das ist ja kein Beinbruch. Nur Leider hab ich keine Ahnung wie ich das mache ? Denn es ist ja nur ein Post deklariert in der Index der dann ja einfach wiederholt wird. Vielleicht weiß jemand wie man die Posts einzeln hinschreibt.

Ammaletu

Also der Loop muss schon so bleiben wie er ist. Aber Du solltest eine Variable einführen, um mitzuzählen. Also so:

PHP

$myCount = 0;
// while have posts...
  $myCount++;
  // Rest des Loops
// endwhile

Dann weißt Du, an welcher Position Du bist und kannst abhängig davon dem Posting eine Klasse geben. Beispiel:

PHP

$myPostClass = '';
if (($myCount == 1) || ($myCount == 4)) {
  $myPostClass = 'postSmallLeft';
} else if (($myCount == 2) || ($myCount == 5)) {
  $myPostClass = 'postSmallRight';
} else {
  $myPostClass = 'postBig';
}

.postSmallLeft, .postSmallRight und .postBig kannst Du dann erstmal für die Platzierung stylen im Stylesheet. Weite 50% und float links für die kleinen, clear und Weite 100% für postBig könnte gehen. $myPostClass musst Du natürlich am äußeren Div um den Beitrag auch ausgeben.

Dann müssten die Beiträge schon mal in dem angedachten Raster angezeigt werden. Nächster Schritt wäre dann, Überschrift und Excerpt (?) auf das Bild zu rücken und alles andere zu entfernen.

Nikurasu

Das hab ich soweit fast alles verstanden, nur leider wird scheinbar bei mir der zweite Code ignoriert ? Wo gehört der denn genau hin ? Was meinst du mit dem außeren Div ?

Ammaletu

Zitat

Das hab ich soweit fast alles verstanden, nur leider wird scheinbar bei mir der zweite Code ignoriert ? Wo gehört der denn genau hin ?

Dahin, wo Du ihn brauchst, also wohl vermutlich an den Anfang des Loops, bevor Du etwas ausgibst, wozu da ja wissen willst, wie Du es ausgeben willst. ;-)

Zitat

Was meinst du mit dem außeren Div ?

Damit meine ich das div-Element, welches innerhalb des Loops den Beitrag umschließt. Ist zumindest in fast allen Themes so. Dort musst Du die Klasse ausgeben, wenn Du das Element damit stylen willst.

Nikurasu

So Es läuft :)

PHP

<?php $myCount = 1; ?>


		<?php while (have_posts()) : the_post(); ?>


<?php
$myPostClass = 'content';
if (($myCount == 1) || ($myCount == 4)) {
  $myPostClass = 'postsmallleft';
} else if (($myCount == 2) || ($myCount == 5)) {
  $myPostClass = 'postsmallright';
} else {
  $myPostClass = 'postbig';
}  
?>


<?php $myCount++; ?>




			<div class="<?php echo "$myPostClass";?>">

Alles anzeigen

Nun aber das nächste Problem wie lege ich auf das Bild ein zweites Transparentes Bild wodurch ich so einen etwas abgedunkelten Bereich kriege auf den ich Schreiben kann.

Ammaletu

Sorry, war ein Weilchen nicht im Forum...

Zitat

Nun aber das nächste Problem wie lege ich auf das Bild ein zweites Transparentes Bild wodurch ich so einen etwas abgedunkelten Bereich kriege auf den ich Schreiben kann.

Gib erstmal den Text aus, den Du dort stehen haben willst. Der wird dann wohl zuerst unter dem Bild stehen und sollte ebenfalls in einem div-Element mit einer Klasse dran stehen. Die kann man dann im Stylesheet ansprechen, auf das Bild ziehen und mit einem transparenten Hintergrund versehen.

Erstmal die Positionierung. Mal sehen... Poste doch bitte mal das innere div, also alles, was bei Dir im Moment hier zwischen steht:

PHP

<div class="<?php echo "$myPostClass";?>">


</div>

Dann erklärt sich das leichter. Ich denke, Du müsstest das noch so ergänzen:

PHP

<div class="postteaser <?php echo $myPostClass;?>">


</div>

Und im Stylesheet definieren:

Code

.postteaser {
  position: relative;
  top: 0;
}

Das schafft erstmal nur die Vorrausetzungen, um dann das div, welches den Text enthält, entsprechend zu positionieren.
[COLOR=#000000][/COLOR]

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Auflistung der Posts umdesignen

Jetzt mitmachen!