In diesem kurzen Tipp wird erläutert, wie Sie eine benutzerdefinierte Spalte in den Bildschirmen verwalten Ihres WordPress-Blogs hinzufügen.
Vor kurzem musste ich anfangen, vorgestellte Bilder anstelle von zu verwenden timthumb.php zum ersten Mal. Alles war großartig, außer dass ich es wirklich ärgerlich fand, dass ich nicht genau angeben konnte, wie groß ein Bild sein sollte (Hard-Crop)..
Nachdem ich mich eine Weile umgesehen hatte, stellte ich fest, dass die Lösung für die meisten Leute darin bestand, ein Plugin zu verwenden, das am Ende übermäßig viel Code enthielt.
Außerdem wollte ich in der Lage sein, ein responsives Layout mit der Skeleton-Grid-Systemklasse "Scale-with-Grid"- der ursprüngliche Grund für die Verwendung von Bildern, für die keine Breite und Höhe des vorderen Endes erforderlich ist.
Hier ist der Workaround, den ich angesichts der Anforderungen des Projekts gefunden habe.
Schritt 1 Wenden Sie eine beliebige Klasse auf Ihre gekennzeichneten Beitragsbilder an
Wir müssen in der Lage sein, das Bild mithilfe unseres Stylesheets zu kontrollieren, sodass wir eine Klasse anwenden müssen, die nur das Bild selbst beeinflusst. Ich entschied mich nur, mein Bild in ein einzupacken Zahl/div namens 'Überschrift'. Das war zusätzlich zu einer benutzerdefinierten Postminiatur-Größe, die ich bereits im eingestellt hatte Functions.php Datei mit dem Namen 'enorm'- Diese Miniaturgröße hatte eine maximale Breite von 940, während die Höhe 900 betrug.
Vorausgesetzt, Sie möchten ein Bild mit einer Höhe von 900px - aber seien wir ehrlich: Sie tun es wahrscheinlich nicht, weil es so aussieht:
Hier ist der Code, den ich für die Vorlage geschrieben habe:
"Scale-with-Grid")); ?>
Schritt 2 Ein bisschen CSS-Hackery
#headline max-height: 400px; Überlauf versteckt;
Und nachdem wir diesen Code hinzugefügt haben, erhalten wir folgendes Ergebnis, das viel einfacher zu verwalten ist:
Warum es funktioniert
Dies funktioniert, weil wir nur eine maximale Höhe und keine maximale Breite einstellen. WordPress stellt standardmäßig die maximale Breite ein, die wir über unsere Funktion festgelegt haben:
add_action ('init', 'my_register_image_sizes'); function my_register_image_sizes () add_image_size ('huge', 940,900, true);
Das Bild ist technisch immer noch in voller Größe vorhanden, aber wir haben den Browser veranlasst, alles über die Größe von 400px zu verbergen, indem Sie die Überlauf versteckt Attribut.
Es klappt!
Nur ein Problem ...
Obwohl es gut aussieht, hacken wir unseren Browser hier wild. Denken Sie daran, dass das Bild nur so aussieht, als ob es in der Größe geändert wurde - wie bereits gesagt, das Bild ist noch vollständig vorhanden.
Das heißt, obwohl es bis zum Handy großartig aussieht, nimmt es tatsächlich viel Platz in Anspruch.
Hat jemand eine bessere Lösung? Hinterlassen Sie Ihre Ideen in den Kommentaren unten!
Share
Accentsconagua
