Theme-Editor Beta: Startseite: Beitragstitel im Beitragsbild positionieren?

Gelöst

(@znac)

Hallo in die Runde, leider finde ich keinen Weg, meinen Design-Wunsch, umzusetzen.

Auf meiner Startseite sollen die Beitragsbilder wie Cover-Bilder dargestellt werden. Also Beitragstitel und Textauszug sollen im Bild und nicht neben dem Bild angezeigt werden.

Über Design > Editor Beta > Templates > Startseite > Abfrage-Loop
kriege ich dies irgendwie nicht hin. Geht es überhaupt? Wenn ja, was mache ich falsch?

—————–
Website-Zustand: Gut


### wp-core ###

version: 6.0
site_language: de_DE
user_language: de_DE
timezone: Europe/Berlin
permalink: /%postname%/
https_status: true
multisite: false
user_registration: 0
blog_public: 1
default_comment_status: open
environment_type: production
user_count: -1
dotorg_communication: true

### wp-paths-sizes ###

wordpress_path: /www/xxx/adimlarim.com
wordpress_size: 77,14 MB (80886583 bytes)
uploads_path: /www/xxx/adimlarim.com/wp-content/uploads
uploads_size: 367,92 MB (385793224 bytes)
themes_path: /www/xxx/adimlarim.com/wp-content/themes
themes_size: 7,02 MB (7360576 bytes)
plugins_path: /www/xxx/adimlarim.com/wp-content/plugins
plugins_size: 34,57 MB (36246648 bytes)
database_size: 4,70 MB (4931973 bytes)
total_size: 491,35 MB (515219004 bytes)

### wp-active-theme ###

name: Twenty Twenty-Two (twentytwentytwo)
version: 1.2
author: WordPress-Team
author_website: https://de.wordpress.org/
parent_theme: none
theme_features: core-block-patterns, post-thumbnails, responsive-embeds, editor-styles, html5, automatic-feed-links, block-templates, widgets-block-editor, wp-block-styles, editor-style
theme_path: /www/xxx/adimlarim.com/wp-content/themes/twentytwentytwo
auto_update: Deaktiviert

### wp-themes-inactive (1) ###

Twenty Twenty-One: version: 1.6, author: WordPress-Team, Automatische Aktualisierungen deaktiviert

### wp-plugins-active (5) ###

Antispam Bee: version: 2.11.0, author: pluginkollektiv, Automatische Aktualisierungen deaktiviert
Lightbox for Gallery & Image Block: version: 1.11, author: Johannes Kinast <johannes@travel-dealz.de>, Automatische Aktualisierungen deaktiviert
TranslatePress - Multilingual: version: 2.2.9, author: Cozmoslabs, Razvan Mocanu, Madalin Ungureanu, Cristophor Hurduban, Automatische Aktualisierungen deaktiviert
WPS Hide Login: version: 1.9.6, author: WPServeur, NicolasKulka, wpformation, Automatische Aktualisierungen deaktiviert
Yoast SEO: version: 19.1, author: Team Yoast, Automatische Aktualisierungen deaktiviert

### wp-plugins-inactive (2) ###

Advanced Custom Fields: version: 5.12.2, author: Delicious Brains, Automatische Aktualisierungen deaktiviert
WP Mail SMTP: version: 3.4.0, author: WPForms, Automatische Aktualisierungen deaktiviert

### wp-media ###

image_editor: WP_Image_Editor_Imagick
imagick_module_version: 1690
imagemagick_version: ImageMagick 6.9.10-23 Q16 x86_64 20190101 https://imagemagick.org
imagick_version: 3.4.4
file_uploads: File uploads is turned off
post_max_size: 200M
upload_max_filesize: 200M
max_effective_size: 200 MB
max_file_uploads: 20
imagick_limits: 
	imagick::RESOURCETYPE_AREA: 31 GB
	imagick::RESOURCETYPE_DISK: 1.84467440737E+19
	imagick::RESOURCETYPE_FILE: 786432
	imagick::RESOURCETYPE_MAP: 31 GB
	imagick::RESOURCETYPE_MEMORY: 16 GB
	imagick::RESOURCETYPE_THREAD: 8
imagemagick_file_formats: 3FR, 3G2, 3GP, AAI, AI, ART, ARW, AVI, AVS, BGR, BGRA, BGRO, BIE, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, DJVU, DNG, DOT, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, EXR, FAX, FILE, FITS, FRACTAL, FTP, FTS, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, GV, H, HALD, HDR, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, JBG, JBIG, JNG, JNX, JPE, JPEG, JPG, JPS, JSON, K25, KDC, LABEL, M2V, M4V, MAC, MAGICK, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPEG, MPG, MRW, MSL, MSVG, MTV, MVG, NEF, NRW, NULL, ORF, OTB, OTF, PAL, PALM, PAM, PANGO, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, PPM, PREVIEW, PS, PS2, PS3, PSB, PSD, PTIF, PWP, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, SUN, SVG, SVGZ, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIFF, VIPS, VST, WBMP, WEBP, WMF, WMV, WMZ, WPG, X, X3F, XBM, XC, XCF, XPM, XPS, XV, XWD, YCbCr, YCbCrA, YUV
gd_version: 2.2.5
gd_formats: GIF, JPEG, PNG, WebP, BMP, XPM
ghostscript_version: 9.50

### wp-server ###

server_architecture: Linux 5.4.0-120-generic x86_64
httpd_software: Apache
php_version: 7.4.28 64bit
php_sapi: fpm-fcgi
max_input_variables: 10000
time_limit: 30
memory_limit: 256M
max_input_time: 60
upload_max_filesize: 200M
php_post_max_size: 200M
curl_version: 7.68.0 OpenSSL/1.1.1f
suhosin: false
imagick_availability: true
pretty_permalinks: true
htaccess_extra_rules: false

### wp-database ###

extension: mysqli
server_version: 10.5.15-MariaDB-1:10.5.15+maria~focal-log
client_version: mysqlnd 7.4.28
max_allowed_packet: 67108864
max_connections: 500

### wp-constants ###

WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /www/xxx/adimlarim.com/wp-content
WP_PLUGIN_DIR: /www/xxx/adimlarim.com/wp-content/plugins
WP_MEMORY_LIMIT: 256M
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG: false
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: false
SCRIPT_DEBUG: false
WP_CACHE: false
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_ENVIRONMENT_TYPE: Nicht definiert
DB_CHARSET: utf8
DB_COLLATE: undefined

### wp-filesystem ###

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable

Dieses Thema wurde vor 2 Jahren, 12 Monaten von ZNMAC geändert.

Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 13 Antworten – 16 bis 28 (von insgesamt 28)

← 1 2

Moderator Hans-Gerd Gerhards
(@hage)

vor 2 Jahren, 12 Monaten

Noch ein weiterer Hinweis:
Morgen stellt Jessica Lyschik beim Online-Meetup in Dresden „Neues in WP 6.0, Gutenberg-Editor sowie Twenty Twenty-Two anpassen“ vor. Das lohnt sich auf jeden Fall, wenn man sich mit FSE, dem Block-Editor (Gutenberg) und twenty twenty-two beschäftigen möchte.

Thread-Starter ZNMAC
(@znac)

vor 2 Jahren, 12 Monaten

@hage, ja der Titel ist verlinkt, jedoch kann ich leider beim Cover-Block mit „Beitragsbild verwenden“ nicht wie beim Beitragsbild-Block „Link zu beitrag“ aktivieren. Ist zwar schade, aber so ok, vielleicht ein Nice-to-Have-Wunsch für später.

Warum ich eben die Hierarchie nicht aufbauen konnte, habe ich jetzt auch rausbekommen. Und zwar, wenn man einen Cover-Block neu zuordnet, muß man, bevor man andere Blöcke unterordnet, auf jeden Fall entweder ein Bild hochladen bzw. über die Mediathek zuordnen oder man stellt „Beitragsbild verwenden“ ein.

Somit sind jetzt wirklich alle Punkte erledigt. Vielen herzlichen Dank an Dich.

Danke für den Tipp „Online-Meetup in Dresden“
Moderator Hans-Gerd Gerhards
(@hage)

vor 2 Jahren, 12 Monaten
@znac

Warum ich eben die Hierarchie nicht aufbauen konnte, habe ich jetzt auch rausbekommen. Und zwar, wenn man einen Cover-Block neu zuordnet, muß man, bevor man andere Blöcke unterordnet, auf jeden Fall entweder ein Bild hochladen bzw. über die Mediathek zuordnen oder man stellt „Beitragsbild verwenden“ ein.

Danke für die Info – deswegen hatte ich das auf einem Screenshot auch noch extra markiert. 😉

Übrigens: noch schöner sieht das aus, wenn man der linken Spalte eine CSS-Klasse zuweist, so dass eine 40%-Transparenz für einen schwarzen Hintergrund mit Ausnahme der Schrift dargestellt wird, z. B. so:
```
div.linker_kasten {
    background-color: rgb(0 0 0 / 40%);
}
```
Dazu muss allerdings ein Plugin wie z. B. Customizer Export/Import installiert sein, damit man die CSS-Regel über Design > Customizer > Zusätzliches CSS einstellen kann.

jedoch kann ich leider beim Cover-Block mit „Beitragsbild verwenden“ nicht wie beim Beitragsbild-Block „Link zu beitrag“ aktivieren.

in der Tat 🤷‍♂️

Nachtrag: Hier noch ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):
- Diese Antwort wurde vor 2 Jahren, 12 Monaten von Hans-Gerd Gerhards geändert.
Moderator Hans-Gerd Gerhards
(@hage)

vor 2 Jahren, 12 Monaten

jedoch kann ich leider beim Cover-Block mit „Beitragsbild verwenden“ nicht wie beim Beitragsbild-Block „Link zu beitrag“ aktivieren.

Ich habe gerade noch mal kurz recherchiert: Das Problem ist wohl schon länger bekannt, siehe hier.

Im Rahmen des Issues wurde auf github als eine Lösung das kostenfreie Plugin Gutenberg Block Editor Toolkit – EditorsKit genannt.

Da heißt es in der Beschreibung: „ADD LINK TO COVER, GROUP AND COLUMN BLOCKS
Assign link to cover, group and column blocks at ease with option to enable link attributes like open to new tab, apply nofollow and/or sponsored rel value. Additionally, you can enable the extra option to apply hover animation.“

Übersetzt mit deepl.com: „HINZUFÜGEN VON LINKS ZU COVER-, GRUPPEN- UND SPALTENBLÖCKEN
Weisen Sie Links zu Cover-, Gruppen- und Spaltenblöcken zu, indem Sie Link-Attribute aktivieren, wie z.B. in einem neuen Tab öffnen, nofollow und/oder gesponserten rel-Wert anwenden. Außerdem können Sie die zusätzliche Option aktivieren, um eine Hover-Animation anzuwenden.“

Vielleicht ist das ja hilfreich für dich und du kannst das frei erhältliche Plugin einsetzen.

Thread-Starter ZNMAC
(@znac)

vor 2 Jahren, 12 Monaten

@hage, das von Dir genannte Plugin hat einen sehr gr0ßen Leistungsumfang, Danke für diesen Tipp.

Derzeit ist es meine Ambition, so wenig wie möglich Plugins zu verwenden. Obwohl ich ganz am Anfang mit meiner Seite stehe, habe ich bereits 5 Plugins im Einsatz. Die Notwendigkeit weiterer Plugins werde ich im Zuge meiner Erfahrungen, die derzeit nicht vorhanden sind, abschätzen können. Ich hebe Deinen Plugin-Tipp für später auf, nochmals Danke.

Moderator Bego Mario Garde
(@pixolin)

Moderator (nicht mehr aktiv)

vor 2 Jahren, 12 Monaten

Grundregel: So wenig Plugins wie möglich, aber so viel wie nötig.

Wenn du eine bestimmte Funktionalität benötigst und nicht mit dem WordPress-Core oder den Einstellungsmöglichkeiten deines Themes umsetzen kannst, kommst du um Plugins nicht herum. Wenn es nur um ein paar Funktionen geht, die du (entsprechende Kenntnisse vorausgesetzt) selber zusammenstellen kannst, macht vielleicht auch ein eigenes Plugin Sinn. Aus Prinzip auf Plugins zu verzichten ist aber der falsche Weg.

Thread-Starter ZNMAC
(@znac)

vor 2 Jahren, 12 Monaten

@pixolin

Grundregel: So wenig Plugins wie möglich, aber so viel wie nötig.

Aus Prinzip auf Plugins zu verzichten ist aber der falsche Weg.

bei beiden Aussagen stimmen wir überein. Nur derzeit wäge ich immer wieder ab, ob ich ohne eine bestimmte Funktion zurecht komme.

Beispielsweise habe ich GT3 Gallery Lite, NextGEN Gallery, SimpLy Gallery Block & Lightbox, Envira Photo Gallery, FooGallery, Photo Gallery by 10Web und Modula auf meiner WordPress-Spielwiese installiert und getestet. Bin jedoch zum Ergebnis gekommen, den Standard-Galerie-Block von WordPress und das „Lightbox for Gallery & Image Block“ Plugin von Johannes Kinast zu verwenden. Ob ich die richtige Entscheidung getroffen habe? Das weiß ich noch nicht und bin mir ob meiner Entscheidung noch sehr unsicher. Wird sich wohl zeigen.

Für mich ist es ein stetiger Lernprozeß, bei dem man auch die Grenzen kennenlernt bzw. ausreizen kann. Dank auch Eurer Hilfestellung.

Thread-Starter ZNMAC
(@znac)

vor 2 Jahren, 12 Monaten

@hage, vielen Dank für diesen Hinweis:

Morgen stellt Jessica Lyschik beim Online-Meetup in Dresden „Neues in WP 6.0, Gutenberg-Editor sowie Twenty Twenty-Two anpassen“ vor.

Habe im Zuge dessen auch MeetUp und ZOOM kennenlernen können. Leider konnte ich erst eine halbe Stunde später zuschauen, aber es war super informativ. Wurde diese Veranstaltung aufgezeichnet, hast Du hierüber Infos?

WordPress hat auch in Deutschland eine starke Community. Ich bin dafür dankbar.

Moderator Hans-Gerd Gerhards
(@hage)

vor 2 Jahren, 12 Monaten

@znac

Wurde diese Veranstaltung aufgezeichnet, hast Du hierüber Infos?

ja, die Aufzeichnung wirst du in Kürze auf wordpress.tv finden.

aber es war super informativ

in der Tat – leider musste ich mich relativ früh verabschieden. Aber z. B. wusste ich nicht, dass man die Transparenz für die linke Spalte auch direkt über die Eigenschaften beim Block Editor ändern kann. Insofern benötigt man in der Tat gar kein zusätzliches CSS mehr.

Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):

Thread-Starter ZNMAC
(@znac)

vor 2 Jahren, 12 Monaten

die Transparenz für die linke Spalte

super, genau danach suche ich derzeit und nach der Möglichkeit, den Abfrage-Loop so zu ändern, dass ich pro Zeile immer zwei Beiträge sehe.

Moderator Hans-Gerd Gerhards
(@hage)

vor 2 Jahren, 12 Monaten

super, genau danach suche ich derzeit

freut mich, dass das geholfen hat.

nach der Möglichkeit, den Abfrage-Loop so zu ändern, dass ich pro Zeile immer zwei Beiträge

müsste dann über 2 Spalten mit jeweils einem Cover funktionieren (kann ich gerade wegen Zeitmangel nicht testen).
Evtl. werde ich das aber auch noch mal testen.
Moderator Hans-Gerd Gerhards
(@hage)

vor 2 Jahren, 12 Monaten
müsste dann über 2 Spalten mit jeweils einem Cover funktionieren

war falsch, geht einfacher – siehe hier beim Abfrage-Loop.

Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):

Und hier die Einstellungen beim Beitrags-Template (sollte breiter eingestellt werden, damit das besser aussieht):
- Diese Antwort wurde vor 2 Jahren, 12 Monaten von Hans-Gerd Gerhards geändert. Grund: Ergänzung
Moderator Hans-Gerd Gerhards
(@hage)

vor 2 Jahren, 12 Monaten

@znac
Nachtrag: Sinnvoll ist übrigens auch, wenn man beim Abfrage-Loop rechts bei den Eigenschaften unter Layout die Einstellung „Standard-Layout erben“ ausschaltet.