Support » Themes » Theme-Editor Beta: Startseite: Beitragstitel im Beitragsbild positionieren?

  • Gelöst znac

    (@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 geändert vor 2 Wochen von znac.

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

Ansicht von 13 Antworten - 16 bis 28 (von insgesamt 28)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    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-Ersteller znac

    (@znac)

    @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“

    @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):

    Screenshot Einstellungen

    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-Ersteller znac

    (@znac)

    @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)

    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-Ersteller znac

    (@znac)

    @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-Ersteller znac

    (@znac)

    @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.

    @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):

    Transparenz

    Thread-Ersteller znac

    (@znac)

    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.

    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.

    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):

    Abfrage-Loop

    Und hier die Einstellungen beim Beitrags-Template (sollte breiter eingestellt werden, damit das besser aussieht):

    Einstellungen beim Beitrags-Template

    • Diese Antwort wurde geändert vor 1 Woche, 5 Tage von Hans-Gerd Gerhards. Grund: Ergänzung

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

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