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:

Gantry - Közösségi megosztó gombok hozzáadása 01 Joomla! MagyarországGantry - Közösségi megosztó gombok hozzáadása - 02 - Joomla! Magyarország

 

 

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.