A Gantry keretrendszer egyik nagy előnye a moduláris felépítés. Ebből adódóan mi is könnyedén hozzáadhatunk vagy akár fejleszthetünk új funkciókat. A mai leírásban egy, a képernyő jobb oldalán dinamikusan elhelyezkedő közösségi megosztást lehetővé tevő gombsor beállítása kerül bemutatásra. A leíráson végighaladva a következő eredményt kaphatjuk:
1. lépés - Közösségi megosztás funkció hozzáadása a Gantry keretrendszerhez
Hozzunk létre egy social.php fájlt a következő tartalommal:
<?php
/**
* @version $Id: social.php 1126 2012-06-21 19:23:15Z josh $
* @author RocketTheme http://www.rockettheme.com
* @copyright Copyright (C) 2007 - 2013 RocketTheme, LLC
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
*
* Gantry uses the Joomla Framework (http://www.joomla.org), a GNU/GPLv2 content management system
*
*/
defined('JPATH_BASE') or die();
gantry_import('core.gantryfeature');
class GantryFeatureSocial extends GantryFeature {
var $_feature_name = 'social';
function init(){
global $gantry;
}
function render($position="") {
ob_start();
global $gantry;
?>
<div class="rt-social-buttons">
<?php if ($gantry->get('social-facebook') != "") : ?>
<a id="rt-facebook-btn" href="/<?php echo $gantry->get('social-facebook'); ?>" target="_blank">
<span class="rt-social-icon"><span class="rt-social-text"><?php echo JText::_('FOLLOW_VIA_FACEBOOK'); ?></span></span>
</a>
<?php endif; ?>
<?php if ($gantry->get('social-twitter') != "") : ?>
<a id="rt-twitter-btn" href="/<?php echo $gantry->get('social-twitter'); ?>" target="_blank">
<span class="rt-social-icon"><span class="rt-social-text"><?php echo JText::_('FOLLOW_VIA_TWITTER'); ?></span></span>
</a>
<?php endif; ?>
<?php if ($gantry->get('social-google') != "") : ?>
<a id="rt-google-btn" href="/<?php echo $gantry->get('social-google'); ?>" target="_blank">
<span class="rt-social-icon"><span class="rt-social-text"><?php echo JText::_('FOLLOW_VIA_GOOGLE'); ?></span></span>
</a>
<?php endif; ?>
<?php if ($gantry->get('social-rss') != "") : ?>
<a id="rt-rss-btn" href="/<?php echo $gantry->get('social-rss'); ?>" target="_blank">
<span class="rt-social-icon"><span class="rt-social-text"><?php echo JText::_('FOLLOW_VIA_RSS'); ?></span></span>
</a>
<?php endif; ?>
</div>
<?php
return ob_get_clean();
}
}
majd mentsük le a ../template/gantry/features mappába.
2. lépés - Nyelvi értékek hozzáadása
Hozzunk létre egy hu-HU.tpl_gantry.ini fájlt a következő tartalommal:
SOCIAL_TEXT="Felirat" SOCIAL_BUTTONS="Közösségi gombok" SOCIAL_BUTTONS_DESC="Közösségi gomb szolgáltatás engedélyezése vagy tiltása. Rendelj hivatkozásokat az alábbi közzöségi oldalaidhoz: Twitter, Facebook, Google, és Hírcsatorna hivatkozás." ICON_SHOW="Ikon megjelenítése" TWITTER_LINK="Twitter hivatkozás" FACEBOOK_LINK="Facebook hivatkozás" GOOGLE_LINK="Google hivatkozás" RSS_LINK="RSS hivatkozás" FOLLOW_VIA_FACEBOOK="Kövess minket Facebook-on!" FOLLOW_VIA_TWITTER="Kövess minket Twitter-en!" FOLLOW_VIA_GOOGLE="Kövess minket Google+-on!" FOLLOW_VIA_RSS="Kövess minket RSS-en!"
majd mentsük le a ../language/hu-HU/ mappába.
3. lépés - Új modulpozíció hozzáadása
Lépjünk be a ../template/gantry mappába, majd nyissuk meg a templateDetails.xml fájlt. Itt keressük meg a <positions> címkét, majd az analytics pozíció alá illesszük be az új modulpozíciónkat:
<positions>
<position>analytics</position>
<position>social</position>
<position>drawer</position>
Lépjünk be a ../template/gantry/ mappába, majd nyissuk meg az index.php fájlt. Itt keressük meg a /** Begin Bottom **/ megjegyzést tartalmazó sort, majd illesszük be fölé a modult megjelenítő sorokat:
</div>
<?php /** Begin Social **/ if ($gantry->countModules('social')) : ?>
<?php echo $gantry->displayModules('social','basic','basic'); ?>
<?php /** End Social **/ endif; ?>
<?php /** Begin Bottom **/ if ($gantry->countModules('bottom')) : ?>
4. lépés - Közösségi megosztás szolgáltatás hozzáadása a Gantry sablon adminisztrációjához
Lépjünk be a ../template/gantry mappába, majd nyissuk meg a template-options.xml fájlt. Itt keressük meg a styledeclaration-enabled mezőt, majd illesszük be alá a következő sorokat:
<field name="styledeclaration-enabled" type="hidden" default="1"/>
<fields name="social" type="chain" label="SOCIAL_BUTTONS" description="SOCIAL_BUTTONS_DESC">
<field name="enabled" type="toggle" default="0" position="left" label="SHOW" />
<field name="position" type="hidden" default="social" label="POSITION" />
<field name="twitter" type="text" default="" label="TWITTER_LINK" position="left" class="text-long" />
<field name="facebook" type="text" default="" label="FACEBOOK_LINK" position="left" class="text-long" />
<field name="google" type="text" default="" label="GOOGLE_LINK" position="right" class="text-long" />
<field name="rss" type="text" default="" label="RSS_LINK" position="right" class="text-long" />
</fields>
<fields name="date" type="chain" label="DATE" description="DATE_DESC">
5. lépés - CSS stílusok hozzáadása
Hozzuk létre vagy nyissuk meg a ../template/gantry/css/mappában található gantry-custom.css fájlt, majd adjuk hozzá a következő sorokat:
/* Social Icons */
.rt-social-buttons {right: 0;width: 45px;position: fixed;top: 108px;z-index: 10;}
.rt-social-buttons .rt-social-icon {height: 43px;width: 43px;float: right;display: block;background-repeat: no-repeat;margin-bottom: 4px;-webkit-transition: width 0.2s ease-in, background-color 0.2s ease-in;-moz-transition: width 0.2s ease-in, background-color 0.2s ease-in;-o-transition: width 0.2s ease-in, background-color 0.2s ease-in;-ms-transition: width 0.2s ease-in, background-color 0.2s ease-in;transition: width 0.2s ease-in, background-color 0.2s ease-in;}
.rt-social-buttons .rt-social-icon:hover {width: 270px;}
.rt-social-buttons .rt-social-text {display: none;font-weight: bold;font-size: 1em;margin: 11px 0 11px 40px;float: left;white-space: nowrap;}
.rt-social-buttons #rt-facebook-btn .rt-social-text {margin: 11px 0 11px 46px;}
.rt-social-buttons a:hover > span {width: auto;}
.rt-social-buttons a:hover .rt-social-text {display: block;}
.rt-social-buttons #rt-facebook-btn span {background-position: 12px 10px;}
.rt-social-buttons #rt-twitter-btn span {background-position: 11px -35px;}
.rt-social-buttons #rt-google-btn span {background-position: 10px -127px;}
.rt-social-buttons #rt-rss-btn span {background-position: 11px -80px;}
.rt-social-buttons #rt-twitter-btn .rt-social-icon, .rt-social-buttons #rt-facebook-btn .rt-social-icon, .rt-social-buttons #rt-google-btn .rt-social-icon, .rt-social-buttons #rt-rss-btn .rt-social-icon {background-color: #555;background-image: url(../images/social-icons.png);}
.rt-social-buttons #rt-facebook-btn:hover .rt-social-icon {background-color: #3B5998;}
.rt-social-buttons #rt-twitter-btn:hover .rt-social-icon {background-color: #62BDB2;}
.rt-social-buttons #rt-google-btn:hover .rt-social-icon {background-color: #DB4A39;}
.rt-social-buttons #rt-rss-btn:hover .rt-social-icon {background-color: #FF8B0F;}
.rt-social-buttons .rt-social-text {color: #fff;}
6. lépés - Ikonok hozzáadása
Töltsük le majd tömörítsük ki a ../template/gantry/images/ mappába a social-icons.png fájlt.
7. lépés - Hivatkozások hozzáadása az adminisztrációs felületen
Lépjünk be a Gantry sablonunk adminisztrációjába, majd ott keressük meg a Szolgáltatások (Features) menüpontot. Itt rögtön az első sorban találhatjuk meg a közösségi gombokhoz tartozó beállításokat. Rendeljünk tetszőleges hivatkozásokat a Twitter, Facebook, Google és az RSS hivatkozás mezőkbe (amelyekre nincs szükségünk azt hagyjuk üresen), majd aktiváljuk a szolgáltatást, végül mentsük a beállításainkat.
