Modul: CL Social Media Links
Verfasst: Fr 22. Jul 2016, 08:52
Ich möchte hier das Modul zur Anzeige der Links zu Social Networks aus dem Demomandanten der ConLite 2.0 vorstellen. Das Modul kann as-it-is auch in allen älteren Versionen von CONTENIDO bis zur aktuellen 4.8.20 eingesetzt werden.
Dieses "einfache" Modul zeigt in der hier vorliegenden Grundversion recht gut den Umgang mit der Template-Klasse und der Nutzung von Mandanten- bzw. Systemeinstellungen mit Hilfe der Core-Funktion getEffectiveSettingsByType.
Die Links können sowohl hardcoded in einem Array im Modul-Output hinterlegt werden, oder beispielsweise per sprachabhängiger Mandanteneinstellung in den Mandanten-Einstellungen im Backend hinterlegt werden.
Dazu nimmt man dort einen Eintrag nach folgendem Schema vor:
social-media-links | [Name des Netzwerkes] | [URL]::[LABEL]
Beispiel für den Link zur XING-Gruppe von ConLite in der englischen Sprache
social-media-links | xing | https://www.xing.com/communities/groups/conlite-the-lightweight-and-userfriendly-cms-cec9-1045289::Connect to ConLite in our XING-Group
Bereits im Modul-Array vorhanden Einträge werden dabei, bei gleichem Namen, von denen in den Mandanteneinstellungen überschrieben.
Die Ansicht im Frontend wird dabei über ein Template, ein png-Sprite und CSS erstellt. Das im Demo-Mandanten mitgelieferte Social Media Sprite für dunkle Hintergründe kann man durch einfachen Austausch des png-Sprite Bildes und Anpassung der CSS selbst wechseln.
Soweit zu den technischen Hintergründen und einfachen Einstellungen des Moduls. Kommen wir nun zu den Quelltexten
Modul Output
Die Template-Datei "cl_social_media_links.html":
Die CSS-Anweisungen:
Und schlussendlich die Sprite Datei, die ins Verzeichnis cms/images/ico gehört:
Für Fragen rund um das Modul stehe ich gerne hier Rede und Antwort. Weitere Module aus dem Demo folgen in unregelmäßigen Abständen.
Gruß aus Franken
Ortwin
Dieses "einfache" Modul zeigt in der hier vorliegenden Grundversion recht gut den Umgang mit der Template-Klasse und der Nutzung von Mandanten- bzw. Systemeinstellungen mit Hilfe der Core-Funktion getEffectiveSettingsByType.
Die Links können sowohl hardcoded in einem Array im Modul-Output hinterlegt werden, oder beispielsweise per sprachabhängiger Mandanteneinstellung in den Mandanten-Einstellungen im Backend hinterlegt werden.
Dazu nimmt man dort einen Eintrag nach folgendem Schema vor:
social-media-links | [Name des Netzwerkes] | [URL]::[LABEL]
Beispiel für den Link zur XING-Gruppe von ConLite in der englischen Sprache
social-media-links | xing | https://www.xing.com/communities/groups/conlite-the-lightweight-and-userfriendly-cms-cec9-1045289::Connect to ConLite in our XING-Group
Bereits im Modul-Array vorhanden Einträge werden dabei, bei gleichem Namen, von denen in den Mandanteneinstellungen überschrieben.
Die Ansicht im Frontend wird dabei über ein Template, ein png-Sprite und CSS erstellt. Das im Demo-Mandanten mitgelieferte Social Media Sprite für dunkle Hintergründe kann man durch einfachen Austausch des png-Sprite Bildes und Anpassung der CSS selbst wechseln.
Soweit zu den technischen Hintergründen und einfachen Einstellungen des Moduls. Kommen wir nun zu den Quelltexten
Modul Output
Code: Alles auswählen
<?php
/**
* Modul-Output: ConLite Social Media Links
*
* @package ConLite
* @subpackage Module
* @version $Rev: 450 $
* @author Ortwin Pinke <ortwin.pinke@conlite.org>
* @license http://www.gnu.de/documents/gpl.de.html GPL v3
* @link http://conlite.org ConLite Portal
*
*
* $Id: cl_social_media_links_output.php 450 2016-07-20 11:11:12Z oldperl $
*/
defined("CON_FRAMEWORK") || die('Illegal call: Missing framework initialization - request aborted.');
$aCfgMod = array(
'debug' => FALSE
);
$aSupportedSocialNets = array(
'xing',
'twitter',
'google-plus',
'pinterest',
'youtube',
'flickr',
'rss',
'vimeo',
'dribble',
'linkedin'
);
$aLinks = array(
'twitter' => array(
'href' => 'https://twitter.com/conlite_cms',
'label' => mi18n("Meet us on Twitter")
),
'xing' => array(
'href' => 'https://www.xing.com/communities/groups/conlite-the-lightweight-and-userfriendly-cms-cec9-1045289',
'label' => mi18n("Link in Modul-Output")
)
);
$aUserLinks = getEffectiveSettingsByType("social-media-links");
$aUserLinksArray = array();
if (count($aUserLinks) > 0) {
foreach ($aUserLinks as $key => $value) {
$sKey = strtolower(trim($key));
if (in_array($sKey, $aSupportedSocialNets)) {
$aValues = explode("::", $value);
$sLabel = (isset($aValues[1]) && !empty($aValues[1])) ? $aValues[1] : "";
$aUserLinksArray[$sKey] = array(
'href' => $aValues[0],
'label' => $sLabel
);
}
}
}
$aLinks = array_merge($aLinks, $aUserLinksArray);
$oTpl = new Template();
foreach ($aLinks as $sName => $aEntry) {
$oTpl->set('d', 'SM_CSS_WHAT', $sName);
$oTpl->set('d', 'SM_HREF', $aEntry['href']);
$oTpl->set('d', 'SM_LABEL', $aEntry['label']);
$oTpl->next();
}
$oTpl->generate("cl_social_media_links.html");
?>
Code: Alles auswählen
<div id="social-media-links">
<!-- BEGIN:BLOCK -->
<a class="social-media-icon {SM_CSS_WHAT}" href="{SM_HREF}" title="{SM_LABEL}"></a>
<!-- END:BLOCK -->
</div>
Code: Alles auswählen
div#social-media-links {
position: absolute;
right: 0;
text-align: right;
width: 20%;
display: inline-block;
}
a.social-media-icon {
width: 32px;
height: 32px;
background-image: url(../images/ico/social_icons_sprite.png);
display: inline-block;
color: rgba(0, 0, 0, 0);
}
.facebook {
background-position: 0 0 !important;
}
.facebook:hover {
background-position: 0 -32px !important;
}
.pinterest {
background-position: -32px 0 !important;
}
.pinterest:hover {
background-position: -32px -32px !important;
}
.youtube {
background-position: -64px 0px !important;
}
.youtube:hover {
background-position: -64px -32px !important;
}
.flickr {
background-position: -96px 0px !important;
}
.flickr:hover{
background-position: -96px -32px !important;
}
.google-plus {
background-position: -128px 0px !important;
}
.google-plus:hover {
background-position: -128px -32px !important;
}
.rss {
background-position: -160px 0 !important;
}
.rss:hover {
background-position: -160px -32px !important;
}
.twitter {
background-position: -192px 0 !important;
}
.twitter:hover {
background-position: -192px -32px !important;
}
.vimeo {
background-position: -224px 0 !important;
}
.vimeo:hover {
background-position: -224px -32px !important;
}
.dribble {
background-position: -256px 0 !important;
}
.dribble:hover {
background-position: -256px -32px !important;
}
.linkedin {
background-position: -288px 0 !important;
}
.linkedin:hover {
background-position: -288px -32px !important;
}
.xing {
background-position: -320px 0 !important;
}
.xing:hover {
background-position: -320px -32px !important;
}
Gruß aus Franken
Ortwin