Seite 1 von 1

Modul: CL Social Media Links

Verfasst: Fr 22. Jul 2016, 08:52
von Oldperl
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

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");
?>


Die Template-Datei "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>


Die CSS-Anweisungen:

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;
}


Und schlussendlich die Sprite Datei, die ins Verzeichnis cms/images/ico gehört:
social_icons_sprite.png


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