ilifau / ili-fau-templates Goto Github PK

Ich gehe mal davon aus, daß Zeile 64-66 in template-landing-page.php ein Copy&Paste Fehler ist.

Korrekt muss da rein:
if( function_exists('fau_display_news_teaser') ) { echo fau_display_news_teaser($post->ID); };

Da dies auf der FAU-Website die Blogroll unsichtbar macht (der Counter der Beiträge wird nämlich auf das Max erhöht, aber nichts angezeigt), wurde dort einstweilen ein Workaround mit einem ungültigen Tag gemacht.

Das CSS ist in der verwendeten Form nicht komprimiert und dessen Grundlage basiert nicht auf SASS.

Kein Problem für Demo, aber für den dauerhaften Betrieb müssen wir dies anpassen,

Bitte bei Gelegenheit alle Funktionen auf PHP 7.4. Compatibilität umstellen.
Die Version 7.2. ist abgelaufen, 7.3 reicht nur noch bis Ende nächsten Jahres.
https://www.php.net/supported-versions.php

Neu-Entwicklungen bitte daher auf 7.4.

Wäre es denkbar, die Themenboxen über ein Shortcode derart in beliebigen Pages einzufügen:

[themenboxen id="1,2,3,4"]

zeigt die Themenboxen der Ids 1, 2, 3 und 4 an.

Mir scheint, hier fehlt das Sanitizing von $_GET['q'].

function ilifautpl_get_posts_ajax_callback()
{
    $return = array();
     
    $search_results = new \WP_Query( array( 
		's' => $_GET['q'],
        'post_type' => array('post', 'page'),
		'post_status' => 'publish',
		'posts_per_page' => 50,
	) );
    
	...
}

(ili-fau-templates-master.php)

Also so ganz Bulletproof gegen unpassenden Input (langer Text/Kurzer Text/gar kein Text/unpassende Bilddimensionen als Artikelbild) ist das nicht:

Hast du eine Idee, wie wir damit umgehen sollen?
Sicher kann man sagen, daß die Webredaktion halt wissen muss, was sie da tut, aber....

Hier ist ein Problem.
Siehe Screenshot:

Linke Pfeile weg, Text bricht nicht um (wordwrap nicht passend gesetzt?), Höhe nicht vertikal mittig.

Ich würde vorschlagen, dem h3 der Slider-Titel ein "hypens: none" zu vergeben um den Default zu überschreiben.

(Default im Theme sind h1,h2 mit Hypens none ausgestattet, h3-6 sind jedoch hypens: auto)

Bitte lege das enqueue() des CSS und der JS nur wenn die Seite auch tatsächlich geladen wird.

Also innerhalb der
templates/template-frontpage.php

Register geht schon vorher. Aber enqueue erst dann, wenn man es tatsächlich braucht.

Im Slider sind die Elemente mit tabindex=0 versetzt. Warum?

Ggf. hier nochmal schauen und vielleicht auch das umrandende Markup hieran orientieren: https://www.w3.org/WAI/tutorials/carousels/structure/

Bei Templates kann es sinnvoll sein, einen echten eigenen Textinhalt zu setzen, statt gleich die Blogroll.

Daher würde ich vorschlagen, dass nach dem Bereich der Themenboxen und vor der Blogroll der
content()
derjeweiligen Page gezeigt wird.
Dieser ist ja bereits eingebbar gewesen.

"Themenboxen müssen mit einer gültigen Post-ID verknüpft sein."

Wieso? Und was bedeutet dies?

Bei den Boxen sollte die Class drumherum reichen. Absatz und Überschrift ergeben sich aus der darüberliegenden Klasse.

Bitte vergleiche den HTML Code auch von der Blogroll und übernehme das was ich dort hinsichtlich der ARIA-Label etc gemacht hab auch für die Boxen. Das geht auf eine "episch" lange Diskussion und Ausarbeitung mit der A11Y Szene zurück :)

Auch die Metatags für strukturierte Daten sind sehr wichtig, da diese von Suchmaschinen berücksichtigt werden.

Der Titel soll deutlich vergrößert werden. (Etwa verdoppelt). Ebenso der Slogan darunter.

Zudem soll der Hintergrund hinter der Schrift von Titel und Slogan entfallen. Stattdessen bitte die Schriftfarbe in Weiß und der Schrift einen
text-shadow: 1px 2px 2px black
geben, damit dieser auch vor wechselnden Hintergrund erkannbar ist.

Für die Hover/Focus-Eigenschaft ggf. die Schriftfarbe wechseln oder eine andere geeignete Optik nutzen.

Dies ist ein gravierendes Problem:

Die Siteinterne Suche durchsucht bekanntlich posts und pages.
Bei Auffinden eines Treffers welches ein ILI Template ist, wird die Suchergebnisseite komplett kaputt gemacht indem der Content fast den gesamten Inhalt von Seiten wiedergibt,d ie irgendwas mit dem Template zu tun haben.

Nachstellbar: Suche nach irgendwas ausführen.

Zur Einheitlichkeit sollte auch im Slider dann "Weiterlesen"
und nicht "Zum Inhalt"

Bitte die Überschriftenhierachie und den Gebrauch der h3 als Text korrgieren, da ist so nicht konform zur WCAG ist:

Über dem Slider bitte eine unsichtbare h2 machen als Overebene mit einem Titel wie es bei dem fau theme im slider bereits vorhanden ist:

<h2 class="screen-reader-text"><?php echo __('Slider','fau'); ?></h2>

Der Titel muss dann statt einer <h2> eine <h3> sein.
Die jetzige <h3> wird zu einem <p> .
Gestaltung in CSS.

Wenn Themenboxen kein Inhalt enthalten (da sie nur aus Titel + Bild bestehen), macht der Weiterlesen-Link kein Sinn:

Für solche Fälle sollte man bei der Landingpage die Option haben, den Weiterlesen-Link auf diese Seite (für alle Themenboxen dann unabhängig von deren Inhalt) aus bzw. anzuschalten.

Wo ist denn bei den Slides die Copyright-Info?

Ich finde die Variante ein klaren Link "Weiterlesen" zu haben, ebenfalls besser als das was derzeit auf der FAU Seite ist (dort sind ein bzw beim hover zwei Pfeile nach rechts und "Weiterlesen" ist nur für den Screenreader). Bei dir auch weiter unten bei der Blogroll mit "Hallo Welt".

Aber es sollte dennoch einheitlich sein.

Vorschlag an der Stelle: "Weiterlesen" als Link wird auch bei der Default Blogroll gemacht. Dafür bräuchte ich aber einen Fürsprecher.

if( (int)$ilifautpl_slider_has_arrows === 1 ) {
    echo '<button class="ilifautpl-arrow prev"></button>';
    echo '<button class="ilifautpl-arrow next"></button>';
}

Nicht konform mit WCAG 2.1 AA.
Besser so:

<button class="slick-next slick-arrow" aria-label="Next" >Next</button>

CSS könnte so sein (auf keinen Fall das umrandende #ilifautpl-hero vergessen, da dieser Code an anderer Stelle des Themes vorhanden ist und ein Überschreiben nicht gut wäre :P) :

#ilifautpl-hero {
   .slick-prev,
	.slick-next {
		position: absolute;
		display: block;
		height: 40px;
		width: 40px;
		line-height: 0px;
		font-size: 0px;
		cursor: pointer;
		background: transparent;
		color: transparent;


		top: 75%;
		@include transform-translate(0, -75%);

		@media (min-width: $screen-xs) {
			top: 50%;
			@include transform-translate(0, -50%);
		}

		padding: 0;
		border: none;
		outline: none;


		&:hover,
		&:focus {
			outline: none;
			background: transparent;
			color: $slick-arrow-color;

			&:before {
				opacity: $slick-opacity-on-hover;
			}
		}

		&.slick-disabled:before {
			opacity: $slick-opacity-not-active;
		}

		&:before {
			font-size: 40px;
			line-height: 1;
			color: $colorPrimary;
			opacity: $slick-opacity-default;

			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;

		}

	}

	.slick-prev {
		left: -40px;

		[dir="rtl"] & {
			left: auto;
			right: -40px;
		}

		@media (min-width: $break-1360) {
			left: -50px;
			[dir="rtl"] & {
				left: auto;
				right: -50px;
			}
		}


		&:before {
			@extend .fa;
			@extend .fa-chevron-left;

			[dir="rtl"] & {
				@extend .fa-chevron-right;
			}
		}

	}

	.slick-next {
		right: -40px;

		[dir="rtl"] & {
			left: -40px;
			right: auto;
		}

		@media (min-width: $break-1360) {
			right: -50px;
			[dir="rtl"] & {
				left: -50px;
				right: auto;
			}
		}


		&:before {
			@extend .fa;
			@extend .fa-chevron-right;

			[dir="rtl"] & {
				@extend .fa-chevron-left;
			}
		}

	}
}

Also ich hab 500 Zeichen eingestellt in den Settings.

Trotzdem werden selbst Texte, die nur 184 Zeichen lang sind, abgeschnitten:

Hinter der h3 eines SLides ist ein <br>. Dieses ist nicht in einem Paragraph. Damit wäre es invalide.

Aber wozu braucht man da ein <br>?

Man muss eine neue Page erst einmal speichern oder veröffentlichen, damit man danach beim erneuten edieren auf die Metabox mit den Optionen kommt.

Kann es sein, dass die Pfeile kein Tastatur focus() haben?

Bitte auf fremde Funktionen,die nicht aus WP kommen nur mit

if (function_exists( 'functioname' ) ) {}

referenzieren.
Also konkret hier:

  if (function_exists( 'fau_get_ad' ) ) : 
   		echo fau_get_ad('werbebanner_seitlich',false);
   	    endif; 

Die Funktion ist mit dem letzten Update rausgefallen.

Bei Erstinstallation, ohne jegliche Änderung erscheint im Head eine Liste an Warnings:

<br />
| <b>Warning</b>:  Cannot assign an empty string to a string offset in <b>/var/www/vhosts/wordpress/websource/wp-includes/class.wp-scripts.php</b> on line <b>426</b><br />
| <br />
 <b>Warning</b>:  Cannot assign an empty string to a string offset in <b>/var/www/vhosts/wordpress/websource/wp-includes/class.wp-scripts.php</b> on line <b>426</b><br />
  <br />
  <b>Warning</b>:  Cannot assign an empty string to a string offset in <b>/var/www/vhosts/wordpress/websource/wp-includes/class.wp-scripts.php</b> on line <b>426</b><br />
  <br />
  <b>Warning</b>:  Cannot assign an empty string to a string offset in <b>/var/www/vhosts/wordpress/websource/wp-includes/class.wp-scripts.php</b> on line <b>426</b><br />

Nach letzter Besprechung mit VP M wird gewünscht, daß der Link "Weiterlesen" im Slide entfällt.
Der Link auf den Titel reicht.

Unten bei den Themenboxen kann es bleiben.

Bitte die Sections mit einem Aria-label="" versehen:
https://github.com/SebastianHonert/ili-fau-templates/blob/master/ILI/FAUTemplates/templates/template-landing-page.php
(Zeile 13 und 27)

Bitte mal bei dem Shorthand schauen:
http://cssvalidator_eu.siteimprove.com/css-validator/validator?uri=https%3a%2f%2fwww.beta.wordpress.rrze.fau.de%2fwp-content%2fplugins%2fili-fau-templates%2finc%2fslick%2fslick.css%3fver%3d5.2.2&profile=css3svg

Das Entfernen der Size 'ilifautpl-topic-box' fehlt bei der Deaktivierung.

Und auch die gesetzten Optionen, oder?

Bei Bildern mit hellen oder weißen Hintergrund erscheint die Schrift des Titels oftmals nicht kontraststark genug.
Hier wäre ggf. ein stärkerer Shadow bei der Schrift hilfreich?

Gemäß WCAG 2.1 AA brauchen Sections einen ARIA Bezeichnung. DIe leere AUszeichnung reicht nicht.
In der darauf folgenden h2 ist aber ein Titel:

echo '<section id="ilifautpl-hero" class="' . $ilifautpl_slider_classes . '" aria-label="">';
echo '<div class="ilifautpl-hero-inner">';
echo '<h2 class="screen-reader-text">' . __('Slider', 'ilifautpl') . '</h2>';

Ändern auf:

aria-label="'__('Slider', 'ilifautpl').''"

und die h2 wegmachen.

Für später/nicht dringend:

Bei der Definition der Boxes sollte die EIngabe der ID nach einem Objekt ersetzt werden durch ein WordPress-Modal, welches die vorhandenen Seiten/Posts auswählen/suchen lässt.

Die Überschrift im Bild ist nicht in der korrekten Fluchtlinie

Ich hab bei einer Landingpage 4 Slides definiert und 5 Themenboxen darunter.

Es werden aber nur 4 Themenboxen gezeigt.
https://www.beta.wordpress.rrze.fau.de/templates/landingpages-pero/

Hallo,

bitte ruf das enqueue() des Frontends nur dann auf, wenn die Seite tatsächlich genutzt wird. Ansonsten wird das CSS und das JS auf jeder Seite eingebunden, auch wenn diese gar keine Landingpage sind.

Das register() geschieht natürlich beim Laden des Plugins. Das Enqueue jedoch erst in der Funktion einbauen, die die Landingpage generiert (also hier: https://github.com/SebastianHonert/ili-fau-templates/blob/master/ILI/FAUTemplates/templates/template-landing-page.php)

Wenn man eine neue Landingpage anlegt ist noch kein erstes Bild oben angegeben.
Trotzdem wird beim Aufruf schon was gezeigt. Allerdings "nichts":

Vorschläge für besseres Defaultverhalten und zur Kompatibilität:

Wenn noch kein erster Slider ausgewählt ist, dann schaue ob nicht stattdessen ein Artikelbild für die Seite definiert ist. Wenn ja, nehme dies.
Wenn weder Slides vorhanden sind, noch ein Artikelbild, dann schaue ob es ein globales Ersatzbild gibt. (Dieses könnte man im Backend über die Settings definieren.)
Wenn kein Bild aus keiner Quelle vorhanden ist, dann zeige eben den Bereich oben gar nicht an/baue dazu kein HTML-Code.

Hallo,

bitte teste das Plugin auch gegen die neue Beta Version vom Thema: https://github.com/RRZE-Webteam/FAU-Einrichtungen/tree/beta
Es gab da eine große Zahl an WCAG Bugfixes.

Ciao,
Wolfgang

Wenn man bei einer gesetzten und in einer Landingpage aktivierten Themenbox das Beitragsbild ändert, wird die Themenbox für die Landingpage deaktiviert.

Apropro Headlines: Warum gibst du denen jeweils eine zusätzliche Class, wo doch der Context durch die section id "ilifautpl-hero" klar ist?
Kostet alles übertragene Bytes ;)

Bei EIngabe der ID bei der Erstellung einer Themenbox werden drei Zeichen verlangt.
Eine ID kleiner 100 kann somit nicht eingegeben werden.

Bitte da nur auf eine Zahl prüfen, aber nicht auf Stringlen.

Bitte bei dem Template das <div class="content"> nur einmal für den umrandenenden Contentbereich verwenden, aber nicht für Content-Parts.

Content sollte -wie <main> den gesamte Content umschliessen.
Es ist zwar keine id damit verbunden, aber daran hängen andere Teile und Plugins
Bitte lieber eine neue Klasse nennen, wenn nötig.

Nach bisherigen Feedback werden wir wohl eine weitere gesonderte LP brauchen, die unterhalb des großen Bildes die Elemente aufweist, wie es das Theme Template "Startseite Fakultät" hat.

Sprich: Mit der dortigen Blogroll und der Sidebar links, sowie den Portalmenus unten, den Bildlinkslider etc.
Die bisherige Blogroll allein reicht nicht.

Wo braucht man denn die?
ili-fau-templates/tree/master/assets/img

Da wir auf Awesome-Font beruhen, bitte auch die Awesome-Lib verwenden - die haben wir nämlich schon geladen und so gewinnen wir Performance

Die Bilder des Sliders werden derzeit als Inline-Style übertragen.

Beispiel:

<div class="slick-slide" style="background: url(&quot;https://www.fau.de/files/2019/09/Playmobil_Fuchs4348-1.jpg&quot;) center center rgb(241, 241, 241); width: 100%; display: inline-block;" aria-hidden="true"><div class="container"><div class="row"><div class="container ilifautpl-slider-content"><a href="https://www.fau.de/2019/09/header/universitaetsgruender-als-playmobil-sonderfigur/" tabindex="0"><h3>Unigründer als PLAYMOBIL-Sonderfigur</h3></a></div></div></div><div class="ilifautpl-slide-credits"> FAU/Kurt Fuchs</div></div>

Dies sorgt leider dafür, dass das Bild in originaler Auflösung (https://www.fau.de/files/2019/09/Playmobil_Fuchs4348-1.jpg) geladen werden muss, egal wie groß der Viewport des Endgeräts ist.

Dies führt gerade bei Handys, die in den Nach-Werktagszeiten und an den Wochenenden die Mehrzahl aller Zugriffe machen, zu einem schlechten Ladeverhalten (die Hintergrundgrafik wird erst später geladen und angezeigt. Da es auch noch inline-style ist sogar nach dem Rendern der Inhalte).
Daher wird wahrscheinlich mit einer Penelty Seitens Google zu rechnen sein, da das Ladeverhalten von Handys für diese höhere Priorität einnimmt.

Lösung: Bitte an den vorhandenen Code des Themes orientieren und die Bilder direkt mit einbinden.

Im Backend sind für jedes hochgeladene Bild auch alternative Auflösungen vorhanden, die man u.a. mit wp_get_attachment_image_srcset() erhalten könnte.
Das Theme selbst nutzt für den eigenen Slider solche Funktionen:

```
	$sliderimage = wp_get_attachment_image_src($imageid, 'hero'); 
		$imgdata = fau_get_image_attributs($imageid);
		$copyright = trim(strip_tags( $imgdata['credits'] ));
		$slidersrcset =  wp_get_attachment_image_srcset($imageid,'hero');
		$slidersrcsizes = wp_get_attachment_image_sizes($imageid,'hero' );

wobei hier das Bildformat hero mit der neuen eigenen size zu ersetzen sei.

Die Schlagzeile ist in dem Beginn nicht in der Fluchtlinie, sondern ist etwa um 20 Pixel eingerückt-. Soll das so?