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