3 neusten Beitragsthumbnails in verschiedenen größen darstellen

frkyflwn

Hi,

ich brauch mal hilfe.. und zwar geht es um folgende seite:
http://web91.s67.goserver.host

in die ersten 3 grauen kästen sollen die 3 aktuellsten beitragsthumbnails dargestellt werden
und weiter unten soll dann die loop mit dem 4.ten beitrag fortgesetzt/angefangen werden.
kann mir bitte jemand sagen wie ich das gelöst kriege und was ich in die functions reinschreiben soll?
ich hab bisher nur gelernt wie man verschiedene thumbnail größen anlegt für verschiedene klassen
aber ich weiss nicht wie ich meine idee umgesetzt kriege.

mfg

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

frkyflwn

keiner?.... komm nicht weiter..

danielgoehr

Zitat von frkyflwn

keiner?.... komm nicht weiter..

Bloom ist ein Premium Theme. Da wird dir nur jemand helfen können, der das Theme aus selbst besitzt. Deshalb werden Premium-Themes hier normalerweise nicht supported.

Was sagt der Theme Support?

Was hast du bislang versucht?

frkyflwn

Hi,

ich hab das theme von grund auf selber gebaut, bloom ist der name der website (hab noch keine domain)
es klappt jetzt (fast) wenn du auf die seite gehst sieht mans. ich kann mir nicht erklären warum beiden rechten zwei bilder jeweils ein abstand nach unten ist,
ich kann das zwar leicht fixen indem ich die height angebe für die divboxen aber ich würde es trotzdem gerne verstehen?! vorallem wenn ich später das design responsive machen möchte muss
ich mal schauen wie ich das mache da die angaben fix sind un die bilder nicht mit kleiner werden wenn ich das fenster kleinziehe/die auflösung ändere

edit: muss noch schauen wie ich die loop unten ab dem 4.ten post anfange aber erstmal pause sitz schon ewig dran :D

gruß

danielgoehr

Zitat von frkyflwn

ich hab das theme von grund auf selber gebaut, bloom ist der name der website (hab noch keine domain)

In dem Fall: Forenregeln nicht beachtet ;)

Zitat von frkyflwn

es klappt jetzt (fast) wenn du auf die seite gehst sieht mans. ich kann mir nicht erklären warum beiden rechten zwei bilder jeweils ein abstand nach unten ist,
ich kann das zwar leicht fixen indem ich die height angebe für die divboxen aber ich würde es trotzdem gerne verstehen?! vorallem wenn ich später das design responsive machen möchte muss

Code

#headerslider .slider23 {
    line-height: 0;
}
#headerslider .slider2 {
    margin-bottom: 0px;
}

Zitat von frkyflwn

edit: muss noch schauen wie ich die loop unten ab dem 4.ten post anfange aber erstmal pause sitz schon ewig dran :D

Mit "offset"
https://codex.wordpress.org/Class_Reference/WP_Query

danielgoehr

Mein Beitrag mit den entsprechenden Lösungen hängt leider in der Moderation fest ...

frkyflwn

weiß zwar nicht genau was du meinst aber würde mich freuen wenn du sie posten könntest wenn sie wieder frei sind :-o

danielgoehr

Zitat von frkyflwn

weiß zwar nicht genau was du meinst aber würde mich freuen wenn du sie posten könntest wenn sie wieder frei sind :-o

Hier werden ab und an (per Zufall?) einzelne Beiträge nicht veröffentlicht und müssen von einem Moderator geprüft werden. Da es aktuell nur einen Moderator gibt, dauert das manchmal einen Moment. In der Regel erscheinen diese Beiträge dann irgendwann, nur eben verzögert. Ich hatte keine Lust, das jetzt alles nochmal herauszusuchen und zu schreiben. Deswegen der Hinweis :)

frkyflwn

Wird jetzt angezeigt vielen dankt daniel!
Ich habe jetzt noch hier diese Codeschnipsel gefunden mit denen das ganze in EINER Loop zu bewältigen ist, nur weiß ich nicht genau was in die functions.php kommt was ich in die index.php schreiben soll oder man alles direkt in die index schreiben soll. Optimal wäre wenn man es schön aufteilt sodass functions un index sauber bleiben.
Hier die 2 Code schnipsel:

Zitat

[COLOR=#101094][FONT=inherit]if[/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#303336][FONT=inherit]([/FONT][/COLOR][COLOR=#303336][FONT=inherit] have_posts[/FONT][/COLOR][COLOR=#303336][FONT=inherit]()[/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#303336][FONT=inherit])[/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#303336][FONT=inherit]{[/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#101094][FONT=inherit]global[/FONT][/COLOR][COLOR=#303336][FONT=inherit] $wp_query[/FONT][/COLOR][COLOR=#303336][FONT=inherit];[/FONT][/COLOR][COLOR=#303336][FONT=inherit]
$thumbnail_size [/FONT][/COLOR][COLOR=#303336][FONT=inherit]=[/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#7D2727][FONT=inherit]'size-after-3-posts'[/FONT][/COLOR][COLOR=#303336][FONT=inherit];[/FONT][/COLOR][COLOR=#303336][FONT=inherit]
[/FONT][/COLOR][COLOR=#101094][FONT=inherit]while[/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#303336][FONT=inherit]([/FONT][/COLOR][COLOR=#303336][FONT=inherit] have_posts[/FONT][/COLOR][COLOR=#303336][FONT=inherit]()[/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#303336][FONT=inherit])[/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#303336][FONT=inherit]{[/FONT][/COLOR][COLOR=#303336][FONT=inherit]
the_post[/FONT][/COLOR][COLOR=#303336][FONT=inherit]();[/FONT][/COLOR][COLOR=#303336][FONT=inherit]
[/FONT][/COLOR][COLOR=#858C93][FONT=inherit]// Get the current post's index[/FONT][/COLOR][COLOR=#303336][FONT=inherit]
$current_post [/FONT][/COLOR][COLOR=#303336][FONT=inherit]=[/FONT][/COLOR][COLOR=#303336][FONT=inherit] $wp_query[/FONT][/COLOR][COLOR=#303336][FONT=inherit]->[/FONT][/COLOR][COLOR=#303336][FONT=inherit]current_post[/FONT][/COLOR][COLOR=#303336][FONT=inherit];[/FONT][/COLOR][COLOR=#303336][FONT=inherit]
[/FONT][/COLOR][COLOR=#858C93][FONT=inherit]// Post index starts from 0 (zero)[/FONT][/COLOR][COLOR=#303336][FONT=inherit]
[/FONT][/COLOR][COLOR=#858C93][FONT=inherit]// 1st post will have big-thumbnail and 2nd & 3rd will have small-thumbnail[/FONT][/COLOR][COLOR=#303336][FONT=inherit]
[/FONT][/COLOR][COLOR=#101094][FONT=inherit]if[/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#303336][FONT=inherit]([/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#7D2727][FONT=inherit]0[/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#303336][FONT=inherit]===[/FONT][/COLOR][COLOR=#303336][FONT=inherit] $current_post [/FONT][/COLOR][COLOR=#303336][FONT=inherit])[/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#303336][FONT=inherit]{[/FONT][/COLOR][COLOR=#303336][FONT=inherit]
$thumbnail_size [/FONT][/COLOR][COLOR=#303336][FONT=inherit]=[/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#7D2727][FONT=inherit]'big-thumbnail'[/FONT][/COLOR][COLOR=#303336][FONT=inherit];[/FONT][/COLOR][COLOR=#303336][FONT=inherit]
[/FONT][/COLOR][COLOR=#303336][FONT=inherit]}[/FONT][/COLOR][COLOR=#303336][FONT=inherit] elseif [/FONT][/COLOR][COLOR=#303336][FONT=inherit]([/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#7D2727][FONT=inherit]1[/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#303336][FONT=inherit]===[/FONT][/COLOR][COLOR=#303336][FONT=inherit] $current_post [/FONT][/COLOR][COLOR=#303336][FONT=inherit]||[/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#7D2727][FONT=inherit]2[/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#303336][FONT=inherit]===[/FONT][/COLOR][COLOR=#303336][FONT=inherit] $current_post [/FONT][/COLOR][COLOR=#303336][FONT=inherit])[/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#303336][FONT=inherit]{[/FONT][/COLOR][COLOR=#303336][FONT=inherit]
$thumbnail_size [/FONT][/COLOR][COLOR=#303336][FONT=inherit]=[/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#7D2727][FONT=inherit]'small-thumbnail'[/FONT][/COLOR][COLOR=#303336][FONT=inherit];[/FONT][/COLOR][COLOR=#303336][FONT=inherit]
[/FONT][/COLOR][COLOR=#303336][FONT=inherit]}[/FONT][/COLOR][COLOR=#303336][FONT=inherit]
[/FONT][/COLOR][COLOR=#858C93][FONT=inherit]// Now we have the proper thumbnail size[/FONT][/COLOR][COLOR=#303336][FONT=inherit]
the_post_thumbnail[/FONT][/COLOR][COLOR=#303336][FONT=inherit]([/FONT][/COLOR][COLOR=#303336][FONT=inherit] $thumbnail_size [/FONT][/COLOR][COLOR=#303336][FONT=inherit]);[/FONT][/COLOR][COLOR=#303336][FONT=inherit]
[/FONT][/COLOR][COLOR=#303336][FONT=inherit]}[/FONT][/COLOR][COLOR=#303336][FONT=inherit] [/FONT][/COLOR][COLOR=#303336][FONT=inherit]}[/FONT][/COLOR]

Alles anzeigen

Zweite Version mit der man es anscheinend machen kann:

Zitat

[TABLE="class: highlight tab-size js-file-line-container, width: 838"]
[tr]

[TD="class: blob-code blob-code-inner js-file-line"]<?php $post_counter [COLOR=#D73A49]=[/COLOR] [COLOR=#005CC5]0[/COLOR]; [COLOR=#6A737D]// start a counter before the loop [/COLOR]?>[/TD]
[/tr][tr]

[TD="class: blob-num js-line-number, align: right"][/TD]
[TD="class: blob-code blob-code-inner js-file-line"]<?php [COLOR=#D73A49]if[/COLOR] ( have_posts() ) : ?>[/TD]
[/tr][tr]

[TD="class: blob-num js-line-number, align: right"][/TD]
[TD="class: blob-code blob-code-inner js-file-line"] <?php [COLOR=#D73A49]while[/COLOR] ( have_posts() ) : the_post(); ?>[/TD]
[/tr][tr]

[TD="class: blob-num js-line-number, align: right"][/TD]
[TD="class: blob-code blob-code-inner js-file-line"] <?php $post_counter[COLOR=#D73A49]++[/COLOR]; [COLOR=#6A737D]// increment the counter for each post [/COLOR]?>[/TD]
[/tr][tr]

[TD="class: blob-num js-line-number, align: right"][/TD]
[TD="class: blob-code blob-code-inner js-file-line"][/TD]
[/tr][tr]

[TD="class: blob-num js-line-number, align: right"][/TD]
[TD="class: blob-code blob-code-inner js-file-line"] <[COLOR=#22863A]article[/COLOR] <?php post_class(); ?> [COLOR=#6F42C1]id[/COLOR]=[COLOR=#032F62]"layout-<?php[COLOR=#24292E] [COLOR=#005CC5]echo[/COLOR] $post_counter; [/COLOR]?>"[/COLOR]>[/TD]
[/tr][tr]

[TD="class: blob-num js-line-number, align: right"][/TD]
[TD="class: blob-code blob-code-inner js-file-line"][/TD]
[/tr][tr]

[TD="class: blob-num js-line-number, align: right"][/TD]
[TD="class: blob-code blob-code-inner js-file-line"] <?php [COLOR=#D73A49]if[/COLOR] ( $post_counter [COLOR=#D73A49]<=[/COLOR] [COLOR=#005CC5]3[/COLOR] ) : ?>[/TD]
[/tr][tr]

[TD="class: blob-num js-line-number, align: right"][/TD]
[TD="class: blob-code blob-code-inner js-file-line"] // display something only for the third post in the loop[/TD]
[/tr][tr]

[TD="class: blob-num js-line-number, align: right"][/TD]
[TD="class: blob-code blob-code-inner js-file-line"] <?php [COLOR=#D73A49]endif[/COLOR]; ?>[/TD]
[/tr][tr]

[TD="class: blob-num js-line-number, align: right"][/TD]
[TD="class: blob-code blob-code-inner js-file-line"][/TD]
[/tr][tr]

[TD="class: blob-num js-line-number, align: right"][/TD]
[TD="class: blob-code blob-code-inner js-file-line"] // the loop content goes here[/TD]
[/tr][tr]

[TD="class: blob-num js-line-number, align: right"][/TD]
[TD="class: blob-code blob-code-inner js-file-line"] </[COLOR=#22863A]article[/COLOR]>[/TD]
[/tr][tr]

[TD="class: blob-num js-line-number, align: right"][/TD]
[TD="class: blob-code blob-code-inner js-file-line"][/TD]
[/tr][tr]

[TD="class: blob-num js-line-number, align: right"][/TD]
[TD="class: blob-code blob-code-inner js-file-line"] <?php [COLOR=#D73A49]endwhile[/COLOR]; ?>[/TD]
[/tr][tr]

[TD="class: blob-num js-line-number, align: right"][/TD]
[TD="class: blob-code blob-code-inner js-file-line"]<?php [COLOR=#D73A49]else[/COLOR] : ?>[/TD]
[/tr][tr]

[TD="class: blob-num js-line-number, align: right"][/TD]
[TD="class: blob-code blob-code-inner js-file-line"] // not found page[/TD]
[/tr][tr]

[TD="class: blob-num js-line-number, align: right"][/TD]
[TD="class: blob-code blob-code-inner js-file-line"]<?php [COLOR=#D73A49]endif[/COLOR]; ?>[/TD]
[/tr]

[/TABLE]

Alles anzeigen

Bin für lösungsvorschläge oder auch ansätze sehr dankbar.
Danke!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

3 neusten Beitragsthumbnails in verschiedenen größen darstellen

Jetzt mitmachen!