Modul: CL Social Media Links

Antworten
Oldperl
Moderator
Beiträge: 83
Registriert: Do 9. Jun 2016, 15:27
Wohnort: Eltmann-Limbach
Kontaktdaten:

Modul: CL Social Media Links

Beitrag 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
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Gruß aus Franken

Ortwin
Antworten