WordPress: .svg Datei Upload erlauben

Standardmässig verweigert der Uploader für die WordPress Mediathek den Upload von vektorbasierten Grafikdateien, zum Beispiel .svg .
Gerade in Zeiten von Retinadisplays und immer größeren Handys mit immer größeren Auflösungen, verwende ich jedoch gerne vektorebasierte Dateien, da diese die ganze Skalierung übernehmen und bei jeder Auflösung scharf und „crisp“ angezeigt werden.

Bei einem Upload einer svg-Datei wird folgende Fehlermeldung angezeigt:

“logolzWeb.svg” konnte wegen eines Fehlers nicht hochgeladen werden
Tut mir leid, aber aus Sicherheitsgründen ist dieser Dateityp nicht erlaubt.

Wenn man folgendes Snippet in die functions.php des verwendeten Themes inplementiert, ist jedoch auch der Upload von .svg Dateien kein Problem mehr und man kann fröhlich seine scharfen Grafiken einbinden.

add_filter('upload_mimes', 'custom_upload_mimes');

function custom_upload_mimes ( $existing_mimes=array() ) {

	// add the file extension to the array

	$existing_mimes['svg'] = 'mime/type';

        // call the modified list of extensions

	return $existing_mimes;

}

Einfache Navigation mit JavaScript (Externe .html Datei in div-Box laden)

Nach langer Zeit haben wir nun auch wieder ein kleines Tutorial zur Erstellung einer Webseite.
Dabei möchten wir heute eine Navigation anlegen, die Inhalte mit einem Klick anzeigt, ohne die Webseite neuzuladen.

Wichtig! Diese Vorgehensweise einer Navigation und der Darstellung von Inhalt ist sehr schlecht für Suchmaschinen. Suchmaschinen wie Google, Yahoo! oder Bing indexieren die Seite indem sie Links folgen die sie auf der Seite finden. Da unsere Links aber keine „echten“ Links sind, d. h. nirgendwo hinführen sondern nur den Inhalt austauschen und somit auf JavaScript basieren, werden Suchmaschinen diesen Links nicht folgen. JavaScript wird von den Suchmaschinen nämlich nicht ausgeführt.

Ich habe das Tutorial in zwei Teile geteilt, Teil 1: Erstellen des Grundgerüstes; Teil 2: Programmieren der Logik.

Teil 1: Grundgerüst

Zuerst bauen wir uns eine kleine Navigation und eine Box für den Inhalt.

<!doctype html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Navigation mit JavaScript</title>
	<style type="text/css">
		.main{
			width: 800px;
			background-color: #ecf0f1;
			margin: 0 auto;
			padding: 5px;
		}

		nav{
			background-color: #27ae60;
		}

		.fn-nav li {
			display: inline;
			padding: 3px;
			margin-left: 5px;
		}

		.fn-nav li:hover {
			background-color: #2ecc71;
		}

		.fn-nav li a:hover {
			text-decoration: none;
		}

		.fn-nav li a{
			text-decoration: none;
			color: #34495e;
		}

		.content {
			border-top: 1px dashed #95a5a6;
			padding: 5px;
		}
	</style>
</head>
<body>
	<div class="main">
		<nav>
			<ul class="fn-nav">
				<li><a data-site="home" href="#">Home</a></li>
				<li><a data-site="termine" href="#">Termine</a></li>
				<li><a data-site="infos" href="#">Informationen</a></li>
			</ul>
		</nav>
		<div class="content">
			<!-- Hier wird später der Inhalt stehen -->
			INHALT
		</div>
	</div>
	<!-- Hier kommt JavaScript hin. -->
</body>
</html>

Die Navigation besteht hierbei aus einer ungeordneten Liste mit unendlich vielen <li></li>-Elementen, die jeweils einen Link enthalten. Damit die Listenpunkte nicht untereinander sind, verwenden wir die CSS-Eigenschaft display: inline; welche die Punkte horizontal anordnet.
Um einen schönen Zoom-Effekt zu haben, wenn man über die Links geht, legen wir einen :hover Status im CSS an, der die Farbe leicht verändert und den Link vergrößert.
Außerdem entfernen wir noch die hässliche blaue Standardfarbe der Links und deren Unterstreichung mit text-decoration: none; und color: #34495e;. Der Box für den Inhalt (.content) geben wir einen gestrichelten, obereren Rand sodass es wie eine Grenze aussieht, die Navigation und Inhalt trennt.
Um allem noch den letzten Schliff zu geben, setzen wir überall noch passende Abstände und Hintergrundfarben.

Teil 1,5: Übergang

Wer sich den Code genau angeschaut hat, dem wird bei den Links vermutlich das seltsame Attribut aufgefallen seien.
<a data-site="home" href="#">Home</a>
HTML5 erlaubt es uns eigene Attribute anzulegen, die wir ganz einfach mit jQuery auslesen können.
Einzige Vorraussetzung ist, das diese Attribute mit data-* beginnen.
Wir werden dieses Attribut data-site benutzen um die Links mit .html-Dateien zu verknüpfen, die dann später in die Box geladen werden. Das heißt, in diesem Attribut steht der Name der .html-Datei die geladen wird.
Beispiel:
Code: <a data-site="home" href="#">Home</a>
Geladene .html-Datei: home.html

Um im Logikteil jQuery benutzen zu können, müssen wir diese Bibliothek aber noch einbinden.
Dazu fügen wir unterdem Kommentar <!– Hier kommt JavaScript hin. –> folgende Zeile ein:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Diese lädt jQuery vom offiziellen Server sodass wir es einfach benutzen können.

Teil 2: Logik

Unser Ziel ist es, bei einem Klick auf einen Link herauszufinden welche Datei damit verknüpft ist und diese laden und dann in der Box anzeigen.

Wir haben also folgende Aufgaben:

  1. Klick auf Link feststellen.
  2. Namen der verknüpften Datei herausfinden.
  3. Die Datei laden.
  4. Den Inhalt der Box mit dem Inhalt der geladenen Datei ersetzen.

Um dies alles zu verwirklichen brauchen wir folgenden Code. Diese muss einfach nach dem <script... Tag eingefügt werden. Ich habe jede Anweisung im Code kommentiert sodass dieser auch für Anfänger zu verstehen ist.

<script type="text/javascript">
		// Erst starten wenn das Dokument fertig geladen ist.
		$(document).ready(function(){ 
			// Beim ersten Laden muss eine Seite geladen werden.
			$(".content").load("home.html");


			// WENN auf einen Link innerhalb von .fn-nav geklickt wurde, DANN führe diese Funktion aus.
			$('.fn-nav a').click(function(e){
				// Verhindert, dass der Browser die Seite beim Klick auf einen Link neulädt.
				e.preventDefault(); 

				// Speichert den Inhalt des Attributes in der Variablen site.
				var site = $(this).data('site'); 

				// .html an den Namen anhängen.
				site = site + '.html'; 
				
				// Seite laden und in .content einsetzen.
				$(".content").load(site); 
			});
		});
</script>
Achtung! Wenn man dieses Beispiel lokal, auf dem eigenen Rechner mit Google Chrome ausprobiert, so wird es NICHT funktionieren. Das liegt daran das Google Chrome das indirekte Nachladen von lokalen Dateien nicht erlaubt. Zum Testen empfehle ich daher Mozilla Firefox. Wenn das ganze auf einem Server läuft, funktioniert es selbstverständlich auch in Chrome.

Nun sollte alles funktionieren. Ich hoffe ich konnte beim Erstellen einer Navigation helfen. Bei Fragen oder Problemen stehe ich gerne via Kommentar unten zur Verfügung.
Wer nicht selber tippen möchte, kann sich alles einfach oben herunterladen. Oder auch erst die Demo ausprobieren.

Uberspace Support Archiv

Da fast alle meine Webseiten bei Uberspace liegen und ich inzwischen mit dem tollen Support schon recht viele Probleme gelöst habe, möchte ich ein paar Lösungen hier archivieren.

Subdomain anlegen

Mit den Subdomains läuft das so, dass man in /var/www/virtual/BENUTZERNAME
Verzeichnisse anlegen kannst, die dann so heißen, wie die Subdomain,
also:

$ cd /var/www/virtual/BENUTZERNAME
$ mkdir bugtracker.beispiel.de

Anschließend werden Anfragen nach jener Subdomain automatisch aus diesem
Verzeichnis beantwortet. Es kann statt eines Verzeichnisses auch ein
Verweis (Symlink) auf ein bestehendes Verzeichnis sein – sagen wir, du
hast in deinem DocumentRoot „html“ bereits ein Verzeichnis „bugs“
liegen, kannst du so vorgehen:

$ cd /var/www/virtual/BENUTZERNAME
$ ln -s html/bugs bugtracker.beispiel.de

Betreff von weitergeleiteten E-Mails verändern (.qmail)

Noch eine kleine Frage zu Emails, ist es möglich Emails per
.qmail Datei weiterzuleiten und den Betreff zu ändern? Das
heißt irgenetwas dranhängen so, dass ich weiß das sie
weitergeleitet wurde.Kevin B.

Antwort von Jonas Pasche:
„Das sollte anhand eines „Delivered-To“-Headers ersichtlich sein, der während der Zustellung an die Mailadresse, die die Mail dann weiterschickt, geschrieben wurde – insofern könntest du da ggf. in deinem Mailclient einen entsprechenden Filter einrichten. Mit .qmail-Dateien kannst du keine Änderungen am Inhalt vornehmen; du könntest dir aber einen maildrop-Filter schreiben, der dies tut – hier findest du Dokumentation dazu: Uberspace Doku: Maildrop Header umschreiben

PHP Shorttags

Uberspace hat standardmäßig PHP Short Tags deaktiviert, wer will kann diese mit einer individuellen php.ini-Datei aktiviern.
Empfehlen würde ich allerdings, den Code von "<?" auf "<?php" umzustellen so ist er portabler zwischen mehreren PHP-Versionen.

Directory Listings mit Apache

Um bei Nicht-Vorhanden sein einer index.html/index.php ein Directorylisting anzeigen zu lassen, muss in einer .htaccess-Datei mit
der Option „Options +Indexes“ das Verzeichnislisting angeschaltet werden.
Der Apache Server hat dieses aus privatsphärenrelevanten Gründen standardmäßig nicht gemacht.

Apache Comments

Apache unterstützt (im Gegensatz zu anderen Programmiersprachen) keine Inline-Comments.
Regeln wie diese schlagen deswegen fehl: RewriteRule ^login/?$ login.php # Login Page
Kommentare also entweder als eigene Zeile makieren oder ganz weglassen.
Beispiel:

# Login Page
RewriteRule ^login/?$ login.php

Vielen Dank!

Zum Ende möchte ich mich nochmal von ganzem Herzen bei Jonas und seinem Team bedanken, auch dafür das meine Supporttickets um 1 Uhr nachts beantwortet werden. (Uberspace.de ftw!)

VIELEN DANK!

Online Dateiunterschiede darstellen

Letztens brauchte ich für ein Projekt, einen schnellen Vergleich zweier Dateien wobei ich wollte, dass die Unterschiede wie bei GitHub farblich hervorgehoben werden sollten.

Gefunden habe ich nach kurzer Suche Diff Checker, ein kleiner schneller Service welcher all meine Wünsche erfüllt.

Den Inhalt der beiden Dateien in die beiden Textboxen kopieren, auswählen ob und wenn ja, wie lange der Vergleich gespeichert werden soll. Und abschicken. Sofort darauf landen wir in einer wunderbar schlichten Ansicht, die beide Dateien nebeneinander darstellt und die Zeilen die fehlen oder verändert wurden markiert.

IMAP mit PHP

Wenn man einmal in die schöne Situation kommt, IMAP Programmierung mit PHP durchführen zu dürfen der wundert sich. Funktionen ergeben keinen Sinn oder werfen seltsame Fehler.

Ich möchte hier ein paar Tipps geben, mit denen man diesen Graus etwas vereinfachen kann. Ich habe jedoch festgestellt, das viele Informationen stark von dem Mailserver abhängen. Teilweise waren php.net Kommentare in meinem Fall falsch oder widersprüchlich.

Mails verschieben mit PHP

Um Mails zu verschieben brauchen wir einen IMAP Handler $imap der von imap_open() zurückgegeben wird.
Der zweite Parameter die Message-Number bekommen wir entweder von einer for-Schleife die die E-Mails durchläuft. Oder von imap_header() und deren Eigenschaft „Msgno“.

Sehr wichtig ist es danach imap_expunge() aufzurufen, da das die Änderungen anscheinend erst anwendet.
Ein weiterer Tipp, falls es nicht klapp, ist es anstatt eines Punktes als Ordnertrennzeichen einen Slash zu benutzen. Der 3.Parameter würde im Beispiel dann INBOX/archive lauten.

imap_mail_move($imap , $header->Msgno, "INBOX.archive");
imap_expunge($imap);

Mails löschen

Mails löschen, ähnelt sehr dem Vorgehen bei Mails verschieben (siehe oben).
Zuerst setzen wir eine Flag, wofür keine Ahnung, aber sie scheint nötig. 🙂 Dafür benutzen wir die Funktion imap_setflag_full
Die braucht von uns nur die Message-Number, (hier $header->Msgno) und selbstverständlich den IMAP Handle.
Nachdem wir die Mail geflaggt haben, können wir sie nun mit der Funktion imap_mail_delete() löschen, die als Parameter die Message-Number braucht. Wie man diese bekommt, habe ich bereits oben beschrieben.

Zum Ende hin benutzen wir wieder imap_expunge(), was die Änderungen anwendet.

Tipp: Falls euer Code E-Mails löscht, testet endweder mit Productionbedingungen oder kommentiert das Löschen aus und testet erst den anderen Teil.

imap_setflag_full($imap, str_replace(' ', '', $header->Msgno), "\\Deleted");
imap_delete($imap, $header->Msgno);

imap_expunge($imap);

Ausschau: In den nächsten paar Tagen, werde ich einen weiteren Artikel um das IMAP Thema behandeln und zwar das Speichern von E-Mail Anhängen.

Das Ende von Google Reader – das sind die Alternativen

Dieser Artikel ist ein Gastartikel von , Produktmanager des Testberichteportals reviewzone.de, leidenschaftlicher Technik- und Internetfreak ,der auf dem Reviewzone-Blog über aktuelle Themen aus den Bereichen Internet, Gadgets und Apps schreibt.

Bei der Themenrecherche für den Reviewzone-Blog darf bei mir ein wichtiges Tool nicht fehlen: der Google Reader. Problem: Den gibt’s leider bald nicht mehr. Daher geht es für mich auf die Suche nach interessanten Alternativen.

Google Reader – das Ende ist nah

Flipboard

Dienste wie Flipboard: Beliebte RSS-Alternative
auf Smartphones und Tablets

Noch knapp ein Monat, dann ist die beliebteste RSS-Reader-Plattform Geschichte. Bereits im März hat Google angekündigt, neben dem Google Building Maker und Google Voice für Blackberry auch den Google Reader im Rahmen des diesjährigen digitalen Frühjahrsputzes einzustellen. Als Grund dafür gibt der kalifornische Konzern an, dass die Nutzerzahlen in letzter Zeit zurückgegangen wären.

Nun mag RSS nicht gerade die bekannteste oder spannendste Art zu sein, Nachrichten zu lesen. Gerade durch die Smartphone- und Tablet-Revolution sind viele neue Nachrichtendienste à la Flipboard aus dem Boden geschossen. Dennoch kann RSS mit Google Reader auf eine große Nutzerschaft zählen und im Laufe der Zeit ist auch auf mobilen Plattformen ein recht umfangreiches App-Ökosystem um den Dienst herum entstanden. Programme wie die auf dem iPhone, iPad und Mac beliebte Reeder.app sehen sich mit dem Ende des Dienstes vor einem ziemlich großen Problem: die Aktualisierung der Feeds und die Synchronistation zwischen verschiedenen Geräten lief bisher gänzlich über Googles Plattform. Es müssen also Alternativen her – und die sind momentan nicht gerade zahlreich.

Weiterlesen

WordPress Mitarbeiter erlauben, Bilder hochzuladen

Warum die WordPress Rolle Mitarbeiter keine Bilder hochladen darf, verstehe ich nicht und werde ich wahrscheinlich auch nie verstehen.

Nun brauchte ich aber einen Benutzer der Artikel erstellen kann, diese dann zur Revision vorlegen kann und der auch noch Bilder hinzufügen kann.
Denn Artikel ohne Bilder sind irgendwie langweilig und eintönig.

Ich sah es aber nicht ein für eine dermaßen winzige Änderung, direkt große, mächtige Plugins wie zu installieren, mit dem ich die Rollen der WordPress Benutzer komplett ändern kann.

Daher suchte ich nach einem Codesnippet für die functions.php der diese kleine Änderung hinzufügte. Nach längerer Suche fand ich einen solchen:

if ( current_user_can('contributor') && !current_user_can('upload_files') )
	add_action('admin_init', 'allow_contributor_uploads');
 
function allow_contributor_uploads() {
	$contributor = get_role('contributor');
	$contributor->add_cap('upload_files');
}

Nachdem man diesen Code in die functions.php eingefügt hat, kann nun jeder Mitarbeiter Bilder hochladen und seinem Artikel hinzufügen. Um schon vorhandene Bilder zu schützen, kann ein Mitarbeiter bereits hochgeladene Bilder nicht löschen, was die Sicherheit deutlich erhöht.

Domainweltkarte von domaincheck.de

Als webaktiver Mensch, kennt man ja schon viele Top Level Domain Endungen und deren Verbereitung. Doch in letzter Zeit werden immer häufiger auch exotische Domains benutzt um mit Domainnamen ein Wort zu bilden. (Beispiele: strfti.me, etc)

Die Firma checkdomain.de die neben Domains (zu sehr billigen Preisen) auch Webhosting-Verträge und SSL-Zertifikate anbietet, hat jetzt ein kleines Poster erstellt, welches eine Weltkarte mit allen Domainendungen darstellt. Außerdem findet man noch weitere Informationen über Domains und ihre Verbereitung.

Gerade wenn man tagtäglich mit allen möglichen Domains arbeitet weiß man oft nicht zu welchem Land doch .kz oder .la gehört. Und dadurch das bald neue Domainendungen kommen werden wird deren Verteilung wahrscheinlich noch unübersichtlicher, sodass diese Karte auf jeden Fall eine große Hilfe für Jeden ist der viel mit dem Internet zu tun hat.

So ist beispielsweise .de nach .com & .net am weitesten verbreitet und findet sich also noch unter den TOP 3.
social
Und das beste ist, jeder Blogger der über diese Aktion bloggt kriegt dieses Poster kostenlos! Noch dazu spendet checkdomain.de für jedes Poster 10,-€ and die Deutsche Kinder­krebs­stiftung (DKKS) und hilft somit an Krebs erkrankten Kindern.

Alle die nicht die Möglichkeit haben darüber zu bloggen, können das Poster auf dem normalen Weg für 27€ inkl. MwSt. erwerben. (Aktionslink)

Das Poster ist im XL-Format (114 x 70 cm) und zweiseitig bedruckt, sodass eine helle (weiße) und eine dunkle (blaue) Variante zur Verfügung steht. Es ist auf festem, mattem Bilderdruckpapier im Offsetverfahren gedruckt.

Auf dem Blog von checkdomain.de schreiben die Mitarbeiter außerdem noch recht interessante Artikel über verschiedenen Themen. Sobald ich die Karte erhalten habe, werde ich sicherlich ein kleines Foto posten.

E-Mails mit PHP Filtern

Ich habe mich vor längerer Zeit mit der Filterung von E-Mails durch PHP beschäftigt.

Diese kleine PHP-Datei die ihr einfach auf eurem Server ablegt und dann in eure E-Mail Konfiguration einbindet. (z. Bsp. qmail). Analysiert die Mail und trennt sie nach den einzelnen Bestandteilen (Nachricht, Von, An, Server etc.) auf und sendet euch eine E-Mail mit dem von print_r() formatierten Inhalt.

Man könnte das Skript jetzt noch erweitern, dass ein spezieller Betreff oder Absender anders berücksichtigt wird, oder es auch in Verbindung mit einem Webservice benutzen.
Ich habe das Vorhaben aufgegeben, denn man sollte schon fortgeschrittene RegEx-Erfahrung besitzen. Vielleicht kann aber trotzdem jemand etwas damit anfangen.

#!/usr/bin/php -q
<?php
$email = file_get_contents("php://stdin");

preg_match_all("/(.*):\s(.*)\n/i", $email, $matches);

mail('test@example.com', 'From my Pipe', print_r($matches, true));
?>