ACHT - "Top-artikel" Anpassen

lacer92

Hallo Leute.
wir sind gerade dabei eine neue Seite aufzubauen und wollen dazu das Theme "Acht" von Oliver Gast nutzen.
Tolles Theme, Anpassungen sind fast durch.
Jedoch gibt es da ja oben unter dem Menü die 4 Artikel. Diese haben wir auf "Zufallsartikel" gestellt. Also immer 4 Random-Posts.
Jedoch sind im Theme ansich die Bilder uns zu klein gewesen. Deswegen haben wir nun größere Bilder verwendet.
Die dazugehörigen Codes:
top-artikel.php:

PHP

<div class="topthumb">                             <?php                             if(has_post_thumbnail()) {                            the_post_thumbnail('thumbnail', array('title' => '' )); // gib den Post-Thumb aus, wenn vorhanden                            } else {                            echo '<img src="'.get_bloginfo("template_url").'/images/thumb_100.png" />'; // sonst zeig einen Standard-Thumb                            }                            ?>                        </div><!--thumb-->

und in der style.css

Code

.top_artikel {    position: relative;
    float: left;
    width: 100%;
    background: #f7f7f7;
    margin: 0 0 0 -20px;
    padding: 20px;
    z-index: 99;
}




.top_artikel h4 {
    margin: 0 0 10px 0;
    text-transform: normal;
    font-size: 1em;
    font-weight: bold;
}




.top_artikel a:hover {
    text-decoration: underline;
}




.top_artikel ul {
    margin: 0;
}




.top_artikel ul:hover > li {
    opacity: 0.3;
}




.top_artikel ul:hover > li:hover {
    opacity: 1;
}




.top_artikel li {
    position: relative;
    float: left;
    width: 24.25%;
    margin: 10px 1% 0 0;
    list-style: none;
    transition: 0.4s ease;
    -o-transition: 0.4s ease;
    -moz-transition: 0.4s ease;
    -webkit-transition: 0.4s ease;
    line-height: 1.25;
}




.top_artikel li:last-child {
    margin: 10px 0 0 0;
}




.top_artikel .title {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(255,255,255,0.7);
    padding: 5px 10px;
    font-size: 0.9em;
    text-align: right;
    color: #222;
    line-height: 1.1em;
        word-wrap: break-word;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}




.top_artikel .title span {
    font-weight: bold;
}




.top_artikel .inhalt {
    position: absolute;
    top: 110px;
    width: 100%;
    background: #eee;
    margin: 0;
    padding: 0 10px;
    font-size: 0.9em;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 0 10px #ccc;
    -moz-box-shadow: 0 0 10px #ccc;
    box-shadow: 0 0 10px #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: none;
    z-index: 999;
}




.top_artikel .inhalt:before {
    position: absolute;
    content: "";
    top: -20px;
    left: 20px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid #eee;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}




.top_artikel li:hover .inhalt {
    display: block;
}




.top_artikel .kommentaranzahl {
    position: absolute;
    top: -5px;
    left: -5px;
    background: #a90329;
    padding: 3px 10px;
    font-size: 0.9em;
    font-weight: bold;
    color: #fff;
    border: 2px solid #fff;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    -webkit-box-shadow: 0 0 3px #777;
    -moz-box-shadow: 0 0 3px #777;
    box-shadow: 0 0 3px #777;
    z-index: 1;
}




.top_artikel .kommentaranzahl a {
    color: #fff;
}




.topthumb {
    width: 200px;
    height: auto;
    float: none;
    align:center;
}
#topthumb {
    position: absolut;
    width: 200px;
    height: auto;
    align: center;
}
.topthumb img {
    margin-bottom: 1%;
    width: 200px;
    height: auto;
}

Alles anzeigen

hier mal ein Screenshot wie es gerade aussieht

sicher wird euch auffallen, dass die Bilder alle unterschiedlich groß sind. Das versuchen wir nun mit unseren wenigen Kenntnissen zu ändern. Bis jetzt hatten wir die Bilder aber nur gestreckt oder gestaucht hinbekommen. Das sah aber auch schei*** aus.

Leider kann man das gerade noch nicht in Aktion sehen, da wir noch nicht online sind...

Achso: in den Einstellunger zur Mediathek habe ich die Thumbs aus 200px zu 100px Eingestellt. Der Harken "Beschneide......" ist nicht gesetzt. Haben aber auch mit Harken keine Änderungen gesehen.

Wäre cool und nett wenn jemand dazu ne Lösung weiß.

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

maxe

Imho nur thumbnail auf medium oder large ändern:

Code

the_post_thumbnail('[COLOR="#FF0000"]medium[/COLOR]',

Siehe Codex: http://codex.wordpress.org/Function_Refer…Thumbnail_Sizes

lacer92

hat erstmal gar keinen effekt... wenn ich dann in der .css die heigth auf 100px lege, sehen die Bilder wieder gestreckt aus..
gibt es denn nicht eine möglichkeit via php oder css zu sagen:
"zeige das bild in width: 200px heigth: 100px an - schneide den rest weg"?

SirEctor

Dann könnte Dich das interessieren:
http://stackoverflow.com/questions/4932…zed-and-cropped

lacer92

also nun schaut es so aus:

die roten punkte markieren das ende des bildes

also die Bilder haben schon mal die richtige Höhe allesamt. Nur die Breite passt eben wieder nicht.
habe nun folgendes in der .css geändert

Code

}


.topthumb {
    width: 200px;
    height: 100px;
    float: none;
    align:center;
}
#topthumb {
    position: absolut;
    width: 200px;
    height: 100px;
    align: center;
}
.topthumb img {
    margin-bottom: 5%;
    width: 200px;
    height: 100px;
}




.crop { 
    width: 200px;
    height: 100px;
    overflow: hidden;
}
.crop img {
    width: 400px;
    height: 200px;
    margin: -5px 0 0 -10px; }

Alles anzeigen

und in der .php

PHP

<div class="crop"><div class="topthumb">                             <?php 
                            if(has_post_thumbnail()) {
                            the_post_thumbnail('large', array('title' => '' )); // gib den Post-Thumb aus, wenn vorhanden
                            } else {
                            echo '<img src="'.get_bloginfo("template_url").'/images/postthumb.png" />'; // sonst zeig einen Standard-Thumb
                            }
                            ?></div>
                        </div><!--thumb-->

toll wäre eben wie gesagt, wenn alle bilder dann die selbe größe haben könnten...

lacer92

ok korrektur jetzt scheints geklappt zu haben :)
spiele nun mal ein wenig mit den werten rum und berichte dann :)
danke schonmal :)

lacer92

so nun habe ich es dank SirEctors Hinweis hinbekommen :)
nun schaut es so aus:

hat mit ein wenig rumspielen mit der Crop Funktion gefunzt :)

schaut dann so aus:

.crop {
width: 200px;
height: 100px;
overflow: hidden;
}
.crop img {
width: 200px;
height: 100px;
margin: -1px 0 0 -1px; }

danke nochmals :)
.das gute Werk kann dann ab dem 27.12.2012 auf mobilenovi.de begutachtet werden :)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

ACHT - "Top-artikel" Anpassen

Jetzt mitmachen!