[Tuto] créer son template Item

micker
Topic Author
Away
Administrator

14 years 5 months ago #613 by micker

[Tuto] créer son template Item was created by micker

Hello a tous voila un petit tuto retour d'expérience pour que chacun puisse faire son template item, c'est à dire le contenu.
Voici déjà la structure des fichiers

Code:

components
  L com_flexicontent
    L templates
      L montemplate
        L item.php
        L item.xml

0 On copie le dossier default contenu dans le dossier template
1 on le renomme au nom de son template

Code:

components
  L com_flexicontent
    L templates
      L default
        L item.php
        L item.xml
      L montemplate
        L item.php
        L item.xml 

2 Pour déclarer différentes zones de mon template il faut les créer dans le fichier xml correspondant item.xml

Code:

<?xml version="1.0" encoding="utf-8"?>
<metadata>
   <layout title="FLEXICONTENT_ARTICLE">
      <message>
         <![CDATA[FLEXICONTENT_ARTICLE_TIP]]>
      </message>
   </layout>
    <params> 
      <param name="top_cols" type="list" default="two" label="FLEXI_ITEM_TOP_COLS" description="FLEXI_ITEM_TOP_COLS_DESC">
         <option value="">Use Global</option>
         <option value="one">FLEXI_1_COL</option>
         <option value="two">FLEXI_2_COLS</option>
      </param>
      <param name="bottom_cols" type="list" default="two" label="FLEXI_ITEM_BOTTOM_COLS" description="FLEXI_ITEM_BOTTOM_COLS_DESC">
         <option value="">Use Global</option>
         <option value="one">FLEXI_1_COL</option>
         <option value="two">FLEXI_2_COLS</option>
      </param>
   </params>
   <fieldgroups>
      <group>titre</group> //les noms doivent être identiques au nom des champs, majuscules inclues
      <group>type-1</group>
      <group>type-2</group>
      <group>description</group>
      <group>galerie</group> // un plugin galerie par exemple
      <group>mp3</group> // un plugin lecteur MP3 par exemple
   </fieldgroups>   
   <cssitem>
      <file>css/item.css</file>
   </cssitem>
   <jsitem>
   </jsitem>   
</metadata>

Vous pouvez rajouter autant de zone que vous le désirez cela vous permettra après de les charger indépendamment et de les customiser grâce au css.

Code:

<group>titre</group> //les noms doivent être identiques au nom des champs, majuscuke comprisent
      <group>type-1</group>
      <group>type-2</group>
      <group>description</group>
      <group>galerie</group> // un plugin galerie par exemple
      <group>mp3</group> // un plugin lecteur MP3 par exemple

Pour ce qui est du css
il suffit de donnée la bonne adresse du css utiliser pour customiser alors l'affichage

Code:

<cssitem>
  <file>css/item.css</file>
</cssitem>

Attention il faudra alors affecter chaque zone correspondantes à chaque champs.

Maintenant passons au fichier item.php
Au départ il composé d'option administrable depuis l'interface de flexicontent, il est préférable de tout laisser.
pour afficher une valeur il suffit de faire

Code:

<?php echo $this->fields['imageg']->display; ?>

Donc voici un exemple

Code:

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
// first define the template name
$tmpl = $this->tmpl;
?>

<div id="flexicontent" class="flexicontent item<?php echo $this->item->id; ?> type<?php echo $this->item->type_id; ?>">

<p class="buttons">
		<?php echo flexicontent_html::pdfbutton( $this->item, $this->params ); ?>
		<?php echo flexicontent_html::mailbutton( 'items', $this->params, null , $this->item->slug ); ?>
		<?php echo flexicontent_html::printbutton( $this->print_link, $this->params ); ?>
		<?php // echo flexicontent_html::addbutton( $this->params ); ?>
		<?php // echo flexicontent_html::editbutton( $this->item, $this->params ); ?>
</p>

<?php if ($this->params->get( 'show_page_title', 1 ) && $this->params->get('page_title') != $this->item->title) : ?>

    <h1 class="componentheading">
		<?php echo $this->params->get('page_title'); ?>
	</h1>

<?php endif; ?>

<?php if ($this->params->get('show_title', 1)) : ?>
<h2 class="contentheading">
	<?php echo $this->escape($this->item->title); ?>
</h2>
<?php endif; ?>
// jusqu'ici cela génère le titre les boutons (pdf etc)
	<div class="mon contenu perso">

<span class="imagebijou"><?php echo $this->fields['imageg']->display; ?></span><span class="dateheure"><?php echo $this->fields['date_texte']->display; ?> <?php echo $this->fields->heure->display; ?></span><br />
<span class="type"><?php echo $this->fields['type_chanson']->display; ?></span><br /><br />
<?php echo $this->fields['text']->display; ?> <br /><br />
<?php echo $this->fields['site_web']->display; ?> <br /><br />
<?php echo $this->fields['mp3']->display; ?><?php echo $this->fields['mp3-externe']->display; ?><br /><br />
<?php echo $this->fields['prix']->display; ?><br />
<?php echo $this->fields['fnac']->display; ?><br />
	</div>
<?php
	endif;
endif;
?>

//utilisation du système de commentaire
<?php if ($this->params->get('comments')) : ?>
<div class="comments">
<?php
	if ($this->params->get('comments') == 1) :
		if (file_exists(JPATH_SITE.DS.'components'.DS.'com_jcomments'.DS.'jcomments.php')) :
			require_once(JPATH_SITE.DS.'components'.DS.'com_jcomments'.DS.'jcomments.php');
			echo JComments::showComments($this->item->id, 'com_flexicontent', $this->escape($this->item->title));
		endif;
	endif;
	
	if ($this->params->get('comments') == 2) :
		if (file_exists(JPATH_SITE.DS.'plugins'.DS.'content'.DS.'jom_comment_bot.php')) :
    		require_once(JPATH_SITE.DS.'plugins'.DS.'content'.DS.'jom_comment_bot.php');
    		echo jomcomment($this->item->id, 'com_flexicontent');
  		endif;
  	endif;
?>
</div>
<?php endif; ?>

</div>

il ne vous reste plus qu'alors à utiliser le css pour customiser votre affichage.
Voilà une première ébauche n'hésitez pas pour toutes remarques !
a+

FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]

Please Log in or Create an account to join the conversation.

vistamedia
Offline
Administrator

14 years 5 months ago #617 by vistamedia

Replied by vistamedia on topic [Tuto] créer son template Item

Super Yannick,
C'est clair et concis, merci pour cette contribution de plus

Manu.

FLEXIcontent lead developer.
www.vistamedia.fr web agency and custom development.
www.joomla.fr co-administrator.
Please no PM for support request, use the forum for that!!!

Please Log in or Create an account to join the conversation.

micker
Topic Author
Away
Administrator

14 years 5 months ago #619 by micker

Replied by micker on topic [Tuto] créer son template Item

si tu veus l'utiliser pour la doc c'est avec plaisir (faudrait surement revoir l'orthographe ou rajouter des images ...) je suis dispo pour tous changements.
Long vie à ce projet !

Please Log in or Create an account to join the conversation.

mambajoe
Offline
New Member

14 years 3 months ago #1853 by mambajoe

Replied by mambajoe on topic [Tuto] créer son template Item

micker wrote: si tu veus l'utiliser pour la doc c'est avec plaisir (faudrait surement revoir l'orthographe ou rajouter des images ...) je suis dispo pour tous changements.
Long vie à ce projet !

Après avoir suivi ces indications, pour une raison étrange il ne lit pas mon css, y a t -il une raison?

thx

Please Log in or Create an account to join the conversation.

bsky92
Offline
Moderator

14 years 3 months ago #1909 by bsky92

Replied by bsky92 on topic [Tuto] créer son template Item

bonjour

attention, le tuto a été fait sur une version beta qui n'est pas la version actuelle, et toute la partie template a été modifiée.

Elle est d'ailleurs très largement simplifiée depuis la beta5

Je pense que les tutos et autres documentations seront remises à jour, complétées et tout ce qui va avec quand la RC sera en place, ce composant est encore en phase de Beta, - eh oui, aussi incroyable que ca paraisse, c'est une Beta qui roule parfaitement et on en oublie que c'est une Beta qui continue à évoluer

pour en revenir à ton problème, esaie de regarder les sujets correspondants à la beta5, tu devrais trouver des réponses

Please Log in or Create an account to join the conversation.