VI. Tutoriels communautaires

Ajouter des images sur les catégories du forum

Dernière mise à jour : 27/07/2014 à 12h17
Table des matières
  1. La base de donnée
  2. Les variables de langues
  3. Modification php
    1. admin_forum.php
    2. admin_forum_add.php
    3. ForumExtensionPointProvider.class.php
    4. ForumHomePageExtensionPoint.class.php
  4. Fichier TPL
    1. L'administration
      1. admin_forum_add.tpl
      2. admin_forum_cats_edit.tpl
    2. Le forum
      1. forum_forum.tpl
      2. forum_index.tpl
  5. Fichier CSS
  6. Fichiers modifiés
Ce Tutorial est réalisé pour la version V4.1







Ce Tutorial a pour objectif d'ajouter une icône à chaque catégorie de votre forum.







Les numéros de lignes correspondent aux fichiers de la version V4.1.0







La base de donnée



Utiliser le script sql suivant pour ajouter le champ "icon" dans la table forum_cats



Code SQL : 
ALTER TABLE `phpboost_forum_cats` ADD `icon` VARCHAR( 255 ) NOT NULL AFTER `url` ;




screenshot_1_4ed99screenshot_2









Les variables de langues



Ajouter dans les fichiers de langue, les deux lignes suivantes :



Code PHP : 
$LANG['icon_forum'] = 'Icône de la catégorie';
$LANG['icon_forum_explain'] = 'A placer dans le répertoire /forum';








Pour le french : forum\lang\french\forum_french.php, après la ligne 80











Modification php









admin_forum.php









Ajouter après la ligne 78 :







Code PHP : 
$icon = retrieve(POST, 'icon', '');
$icon_path = retrieve(POST, 'icon_path', '');
if (!empty($icon_path))
$icon = $icon_path;








Remplacer la ligne 103 :







Code PHP : 
$Sql->query_inject("UPDATE " . PREFIX . "forum_cats SET name = '" . $name . "', subname = '" . $subname . "', url = '" . $url . "', status = '" . $status . "', aprob = '" . $aprob . "', auth = '" . addslashes(serialize($array_auth_all)) . "' WHERE id = '" . $id . "'", __LINE__, __FILE__);




par



Code PHP : 
$Sql->query_inject("UPDATE " . PREFIX . "forum_cats SET name = '" . $name . "', subname = '" . $subname . "', url = '" . $url . "', status = '" . $status . "', aprob = '" . $aprob . "', auth = '" . addslashes(serialize($array_auth_all)) . "',icon = '" . $icon . "' WHERE id = '" . $id . "'", __LINE__, __FILE__);








Remplacer la ligne 268 :







Code PHP : 
$forum_info = $Sql->query_array(PREFIX . "forum_cats", "id_left", "id_right", "level", "name", "subname", "url", "status", "aprob", "auth", "WHERE id = '" . $id . "'", __LINE__, __FILE__);




par



Code PHP : 
$forum_info = $Sql->query_array(PREFIX . "forum_cats", "id_left", "id_right", "level", "name", "subname", "url", "status", "aprob", "auth", "icon", "WHERE id = '" . $id . "'", __LINE__, __FILE__);








Ajouter après la ligne 282 :







Code PHP : 
$img_direct_path = (strpos($forum_info['icon'], '/') !== false);
$rep = './';
$image_list = '<option value=""' . ($img_direct_path ? ' selected="selected"' : '') . '>--</option>';
if (is_dir($rep)) //Si le dossier existe
{
    $img_array = array();
    $dh = @opendir( $rep);
    while (! is_bool($lang = readdir($dh)))
    {
        if (preg_match('`\.(gif|png|jpg|jpeg|tiff)+$`i', $lang))
            $img_array[] = $lang; //On crée un tableau, avec les different fichiers.
    }
    closedir($dh); //On ferme le dossier
 
    foreach ($img_array as $key => $img_path)
    {    
        $selected = $img_path == $forum_info['icon'] ? ' selected="selected"' : '';
        $image_list .= '<option value="' . $img_path . '"' . ($img_direct_path ? '' : $selected) . '>' . $img_path . '</option>';
    }
}








Ajouter après la ligne 336 :







Code PHP : 
'IMG_ICON' => !empty($forum_info['icon']) ? '<img src="' . $forum_info['icon'] . '" alt="" class="valign_middle" />' : '',
'IMG_LIST' => $image_list,
'IMG_PATH' => $img_direct_path ? $forum_info['icon'] : '',
'L_ICON' => $LANG['icon_forum'],
'L_ICON_EXPLAIN' => $LANG['icon_forum_explain'],
'L_OR_DIRECT_PATH' => $LANG['or_direct_path'],








Ajouter après la ligne 390 :







Code PHP : 
'L_ICON' => $LANG['icon_forum'],
'L_ICON_EXPLAIN' => $LANG['icon_forum_explain'],
'L_OR_DIRECT_PATH' => $LANG['or_direct_path'],












admin_forum_add.php









Ajouter après la ligne 78 :







Code PHP : 
$icon = retrieve(POST, 'icon', '');








Remplacer ligne 129 :







Code PHP : 
$Sql->query_inject("INSERT INTO " . PREFIX . "forum_cats (id_left, id_right, level, name, subname, url, nbr_topic, nbr_msg, last_topic_id, status, aprob, auth) VALUES('" . $id_left . "', '" . ($id_left + 1) . "', '" . $level . "', '" . $name . "', '" . $subname . "', '" . $url . "', 0, 0, 0, '" . $status . "', '" . $aprob . "', '" . addslashes(serialize($array_auth_all)) . "')", __LINE__, __FILE__);
 




par



Code PHP : 
$Sql->query_inject("INSERT INTO " . PREFIX . "forum_cats (id_left, id_right, level, name, subname, url, nbr_topic, nbr_msg, last_topic_id, status, aprob, auth, icon) VALUES('" . $id_left . "', '" . ($id_left + 1) . "', '" . $level . "', '" . $name . "', '" . $subname . "', '" . $url . "', 0, 0, 0, '" . $status . "', '" . $aprob . "', '" . addslashes(serialize($array_auth_all)) . "')", __LINE__, __FILE__);








Ajouter après la ligne 157 :







Code PHP : 
$rep = './';//Images disponibles
$image_list = '';
if (is_dir($rep)) //Si le dossier existe
{
    $img_array = array();
    $dh = @opendir( $rep);
    while (! is_bool($lang = @readdir($dh)))
    {    
        if (preg_match('`\.(gif|png|jpg|jpeg|tiff)+$`i', $lang))
            $img_array[] = $lang; //On crée un tableau, avec les different fichiers.                
    }    
    @closedir($dh); //On ferme le dossier
 
    foreach ($img_array as $key => $img_path)
        $image_list .= '<option value="' . $img_path . '">' . $img_path . '</option>';
}








Ajouter après la ligne 185 :







Code PHP : 
'IMG_LIST' => $image_list,
'L_ICON' => $LANG['icon_forum'],
'L_ICON_EXPLAIN' => $LANG['icon_forum_explain'],
'L_OR_DIRECT_PATH' => $LANG['or_direct_path'],












ForumExtensionPointProvider.class.php









ajouter après la ligne 73 :







Code PHP : 
$forum_cats .= '$CAT_FORUM[\'' . $row['id'] . '\'][\'icon\'] = ' . var_export($row['icon'], true) . ';' . "\n";












ForumHomePageExtensionPoint.class.php









remplacer la ligne 132 :







Code PHP : 
t.idcat, t.title, t.last_timestamp, t.last_user_id, t.last_msg_id, t.nbr_msg AS t_nbr_msg, t.display_msg, m.user_id, m.login, m.level as user_level, m.user_groups, v.last_view_id




par



Code PHP : 
t.idcat, t.title, t.last_timestamp, t.last_user_id, t.last_msg_id, t.nbr_msg AS t_nbr_msg, t.display_msg, m.user_id, m.login, m.level as user_level, m.user_groups, v.last_view_id, c.icon








Ajouter après la ligne 254 :







Code PHP : 
'ICON' => !empty($row['icon']) ? '<a href="forum' . url('.php?id=' . $row['cid'], '-' . $row['cid'] . '+' . Url::encode_rewrite($row['name']) . '.php') . '"><img src="' . $row['icon'] . '" alt="" class="valign_middle" /></a><br />' : '',
















Fichier TPL













L'administration









Il est nécessaire d'ajouter les éléments de sélection dans les formulaires de création et de modification d'un forum.







Voici le rendu que vous devez obtenir dans l'administration : screenshot_3







admin_forum_add.tpl









Ajouter après la ligne 29 :







Code TPL : 
function change_icon(img_path)
    {
        document.getElementById('icon_img').innerHTML = '<img src="' + img_path + '" alt="" class="valign_middle" />';
    }








Ajouter après la ligne 117 :







Code TPL : 
<div class="form-element">
    <label for="icon">{L_ICON}<br /><span class="field-description">{L_ICON_EXPLAIN}</span></label>
    <div class="form-field">
        <label>
            <select name="icon" id="icon" onchange="change_icon(this.options[this.selectedIndex].value)" onclick="change_icon(this.options[this.selectedIndex].value)">
                {IMG_LIST}
            </select>
            <span id="icon_img">{IMG_ICON}</span>
        </label>
        <br />
        <label>
            <span class="text_small">{L_OR_DIRECT_PATH}</span>
            <input type="text" class="text" name="icon_path" value="{IMG_PATH}" onblur="if( this.value != '' )change_icon(this.value);" onclick="document.getElementById('img_default_select').selected = 'selected';" />
        </label>
    </div>
</div>








admin_forum_cats_edit.tpl









Ajouter après la ligne 50 :







Code TPL : 
function change_icon(img_path)
    {
        document.getElementById('icon_img').innerHTML = '<img src="' + img_path + '" alt="" class="valign_middle" />';
    }








Ajouter après la ligne 127 :







Code TPL : 
<div class="form-element">
    <label for="icon">{L_ICON}<br /><span class="field-description">{L_ICON_EXPLAIN}</span></label>
    <div class="form-field">
        <label>
            <select name="icon" id="icon" onchange="change_icon(this.options[this.selectedIndex].value)" onclick="change_icon(this.options[this.selectedIndex].value)">
                {IMG_LIST}
            </select>
            <span id="icon_img">{IMG_ICON}</span>
        </label>
        <br />
        <label>
            <span class="text_small">{L_OR_DIRECT_PATH}</span>
            <input type="text" class="text" name="icon_path" value="{IMG_PATH}" onblur="if( this.value != '' )change_icon(this.value);" onclick="document.getElementById('img_default_select').selected = 'selected';" />
        </label>
    </div>
</div>








Le forum









Pour finir, il faut modifier les fichiers TPL du forum afin d'afficher l'image.



En fonction de vos besoins, la personnalisation est un peu différente. Dans le cas présent, j'ai ajouter les icônes uniquement au forum (par les url) et uniquement sur les pages index et forum.







Voici le rendu : screenshot_4







forum_forum.tpl









Remplacer la ligne 21 :







Code TPL : 
<th class="forum-text-column" colspan="2">{L_FORUM}</th>




par



Code TPL : 
<th class="forum-text-column" colspan="3">{L_FORUM}</th>








Ajouter après la ligne 48 :







Code TPL : 
<td class="forum-sous-cat-icon">
    {forums_list.subcats.ICON}
</td>








forum_index.tpl









Remplacer la ligne 31 :







Code TPL : 
<th class="forum-text-column" colspan="2">{L_FORUM}</th>




par



Code TPL : 
<th class="forum-text-column" colspan="3">{L_FORUM}</th>








Remplacer la ligne 39 :







Code TPL : 
<th colspan="5"></th>




par



Code TPL : 
<th colspan="6"></th>








Ajouter après la ligne 50 :







Code TPL : 
<td class="forum-sous-cat-icon">
    {forums_list.subcats.ICON}
</td>












Fichier CSS









Cette modification n'est pas forcement nécessaire, mais elle simplifiera votre travail de design.







Ajouter dans le forum.css après la ligne 80 la classe suivante :







Code CSS : 
td.forum-sous-cat-icon {
    width: 50px;
    text-align: center;    
}












Fichiers modifiés









Pour ceux qui le souhaite, voici les fichiers modifiés à mettre dans les bons répertoire : fichiers



Attention car ces fichiers ne prennent pas en compte vos éventuelles modifications. Il ne peuvent être appliqués que sur un site non modifié
Cette page a été vue 6234 fois