Template derfotograf page de présentation d'un article

[seseba]

Bonjour,

j'ai ajouté des liens vers des articles sur mon site http://joomla.physio-in-esslingen.de/site/index.php.
Quand on va sur Leistungen puis sur Krankengymnastik, le lien s'ouvre sur dans une Iframe, ce dernier devrait ensuite montrer seulement un article mais la page complète apparaît dans l'Iframe.
Je suppose que c'est une erreure de configuration. Peut être que quelqu'un pourrait me dire comment je peux configurer la page dans laquelle s'ouvre un article.

Merci

[Rajoz]

Re : Template derfotograf page de présentation d'un article

Bonjour seseba,

Le lien qui est donné (http://joomla.physio-in-esslingen.de...ankengymnastik) est le lien du site. Si on clique dessus on a le site complet et c'est pareil à l'intérieur d'un iframe.

Pour ne voir que l'article il faut ajouter la variable tmpl=component à l'url. Les variables d'url se passent avec '?' pour la première et '&' pour les suivantes. Ici comme il n'y a pas d'autre variable le lien devient http://joomla.physio-in-esslingen.de...tmpl=component soit le lien initial auquel est ajouté ?tmpl=component à la fin.

Cette variable indique à Joomla d'utiliser component.php au lieu d'index.php soit templates/[mon_template]/component.php

Le fichier component.php est une version réduite de index.php. Il est prévu principalement pour l'impression de l'article (c'est lui qui est utilisé quand on clique sur le bouton Imprimer), mais il peut aussi être utilisé pour la vue en popup d'un article.

Si le template ne comporte pas de fichier component.php, Joomla utilise templates/system/component.php qui n'a que le minimum de style css.

Amicalement,
Rajoz

[seseba]

Re : Template derfotograf page de présentation d'un article

Merci Beaucoup!

Mais étant donné qu'il s'agit d'un module (http://www.joomshaper.com/joomla-ext.../news-show-sp2) je ne sais où changer la constitution du lien.
Je suppose dans Template-> default.php mais je ne sais où exactement. default.doc
Pouvez vous m'aider?

Merci

[Rajoz]

Re : Template derfotograf page de présentation d'un article

Bonjour seseba,

Il s'agit effectivement du module News Show SP2. Je l'ai installé sur mon site de test. Mais ce module ne permet pas d'afficher les liens en pop-up comme sur le site.

Sur le site, les attributs "class" et "rel" qui permettent le pop-up sont ajoutés aux liens :

• Lien du site : <a class="modal" rel="{handler: 'iframe', size: {x: 600, y: 600}}" href="#">
• Lien de mon site : <a href="#">
• Lien du site de démo du module : <a href="#">
• Code du module : <a href="<?php echo $list[$i]->link ?>">

Pour modifier/configurer les liens pour y ajouter ?tmpl=component il faut d'abord savoir comment sont générés les liens en pop-up.

En pratique l'affichage en pop-up des liens a pu être réalisé :

• par une autre extension comme un plugin de pop-up
• par une modification en surcharge dans le template de l'affichage du module
• par une modification en direct de l'affichage du module News Show SP2

En regardant le site je n'ai accès qu'au css et au résultat html, je ne peux pas voir les php donc pas possible de donner une indication ni sur le plugin ni sur la modification du module.

Au cas où la modification aurait été faite directement dans l'affichage du module, pourrais-tu attacher ici le fichier modules/mod_news_show_sp2/tmpl/default.php en le "zippant". Je pourrai ainsi le comparer au fichier d'origine et voir si "class" et "rel" y ont été ajoutés.

Amicalement,
Rajoz

[seseba]

Re : Template derfotograf page de présentation d'un article

Bonsoir,

merci de ta réponse.
Oui j'ai bien ajouter class="modal" rel="{handler: 'iframe', size: {x: 600, y: 600}}" dans la parenthèse <a>. Je n'ai pas charger de module supplémentaire.
Voici mon fichier default.php :
default.zip

[Rajoz]

Re : Template derfotograf page de présentation d'un article

Bonjour seseba,

Voici les modifications à faire dans default.php

1) Ajouter le code pour calculer le lien avec ?tmpl=component ou &tmpl=component selon si cette variable est la première ou une des suivantes dans l'url.

Ajouter après la ligne 57 (le code ajouté est en rouge) :

<?php if ($i <$c_article_count): ?>
[COLOR=#ff0000]    <?php[/COLOR]
[COLOR=#ff0000]        $link = $list[$i]->link;[/COLOR]
[COLOR=#ff0000]        $link .= strpos($link,'?') ? '&tmpl=component' : '?tmpl=component';[/COLOR]
[COLOR=#ff0000]    ?>[/COLOR]
<div class="ns2-column flt-left col-<?php echo $article_column ?>">

2) Modifier le "href" des balises <a> pour les lignes où tu as ajouté les attributs class" et "rel" (maintenant en lignes 88 et 133) :

Remplacer :

href="<?php echo $list[$i]->link ?>"

Par : (la modification est en rouge)

href="<?php echo [COLOR=#ff0000]$link[/COLOR] ?>"

Note : Pour éviter que les modifications ne soient écrasées lors d'une prochaine mise à jour du module News Show SP2, il aurait mieux valu faire une surcharge du module dans le template plutôt que de modifier directement le fichier du module.

Amicalement,
Rajoz

[seseba]

Re : Template derfotograf page de présentation d'un article

J'ai effectué les manip sur moin site et fait directement la surcharge et ca marche parfaitement!
Merci beaucoup!

Comment puis je faire pour que le formatage de ma page d'article soit le même que celui de ma page principale?

Voici mes dossiers component component.zip et index index.zip

Merci

[Rajoz]

Re : Template derfotograf page de présentation d'un article

Bonsoir seseba,

Comment puis je faire pour que le formatage de ma page d'article soit le même que celui de ma page principale?

Normalement c'est au développeur du template de fournir un fichier component.php qui contient le même style que celui de son template.

Comme il s'agit d'un template gratuit, le développeur ne sera probablement pas enclin à modifier son component.php. On va donc essayer de s'en sortir sans lui.

Entre la page principale qui est composée uniquement de modules et la page d'article affichée par component.php, il y a trois types de différences :

• les fichiers css chargés
• les fichiers javascript chargés
• les classes css utilisées

Par exemple le titre d'un module et le titre d'un article n'ont pas les mêmes classes :

• uk-article-title pour un article : le titre n'est pas centré
• uk-text-center pour un module : le titre est centré

Pour rester simple, je te propose de ne charger dans component.php que les css principaux du style de ton template en faisant l'impasse sur les javascripts et les css liés à des extensions comme roksprocket, slideshowck, etc.

Dans component.php après la ligne 17 ajouter le code suivant (la partie à ajouter est en rouge)

$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');

[COLOR=#ff0000]// Add Stylesheets from template style
$doc->addStyleSheet($this->baseurl . '/templates/derfotograf/styles/fotograf/css/bootstrap.css');
$doc->addStyleSheet($this->baseurl . '/templates/derfotograf/styles/fotograf/css/theme.css');
$doc->addStyleSheet($this->baseurl . '/templates/derfotograf/styles/fotograf/css/custom.css');[/COLOR]

// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');

Pour revenir à mon exemple de différence d'utilisation des classes css et donc centrer le titre de l'article comme celui des modules, tu peux ajouter à la fin de templates/derfotograf/styles/fotograf/css/custom.css :

h1.uk-article-title { text-align: center !important; }

Amicalement,
Rajoz

[seseba]

Re : Template derfotograf page de présentation d'un article

Merci,

j'ai effectué les changements mais cela n'a rien changé au design...

component.zip

Ce que je souahiterais c'est que mon Ifram est en Haut mon Logo avec mon numéro de téléphone à la place de là où il y a marqué Home.
Et que le texte de l'article ressemble à celui-ci: http://www.physio-in-esslingen.de/le...elle-therapie/

Sinon j'ai encore le problème que mon Iframe n'est pas responsive.

[Rajoz]

Re : Template derfotograf page de présentation d'un article

Bonjour seseba,

j'ai effectué les changements mais cela n'a rien changé au design...
Ce que je souahiterais c'est que mon Ifram est en Haut mon Logo avec mon numéro de téléphone à la place de là où il y a marqué Home.

Les modifications proposées précédemment avaient pour but d'avoir le même style pour l'article que pour les modules de la page principale.

Modifier le "design" en y ajoutant un logo et un numéro de téléphone revient à créer un nouveau template sur la base de component.php

Voilà un essai de ce que l'on pourrait mettre comme body pour component.php :

<body class="contentpane">
    <div class="uk-container uk-container-center">
        <div class="uk-hidden-small uk-clearfix" style="border-bottom: 1px solid #ddd;">
            <a style="float: left; margin-top: 14px;" href="<?php echo $this->baseurl; ?>">
                <img src="<?php echo $this->baseurl; ?>/images/fotograf/logo.png" alt="logo">
            </a>
            <div style="float: right; margin-top: 6px;">
                <p style="text-align: left;">Physio in Esslingen<br />+49 6868 41 65</p>
            </div>
        </div>
        <div class="uk-visible-small uk-clearfix" style="text-align: center; border-bottom: 1px solid #ddd;">
            <a style="" href="<?php echo $this->baseurl; ?>">
                <img src="<?php echo $this->baseurl; ?>/images/fotograf/logo_mobil.png" alt="logo_mobil">
            </a>
            <div style="margin-top: 6px;">
                <p style="">Physio in Esslingen<br />+49 6868 41 65</p>
            </div>
        </div>
        <jdoc:include type="message" />
        <jdoc:include type="component" />
    </div>
</body>

Notes :

• Ne connaissant ni Warp ni Uikit, j'ai choisi de coder "en dur" cet en-tête (logo + téléphone) qui ne devrait pas changer plutôt que de créer de nouvelles positions de module spécifiques
• Le logo et le texte sont responsive, en cas de modification, il faudra le faire sur les deux affichages : le grand (uk-hidden-small) et le petit (uk-visible-small).

à la place de là où il y a marqué Home

Home est affiché parce que Joomla va chercher le lien de menu correspondant à l'article pour déterminer les paramètres à appliquer. Comme pour cet article il n'y a pas de lien de menu Joomla va chercher le plus proche.
Dans la version de démonstration de Derfotograf, il y a un menu caché (Hidden Menü) avec un lien Home (Blog des articles en vedette). Dans ce lien, dans l'onglet "Paramètres d'affichage de la page", dans le paramètre "Afficher l'en-tête de page", il y a "Oui" ce qui signifie que le titre du lien (Home) est utilisé en en-tête de page. C'est le seul lien de menu qui concerne des articles.
Je pense donc que c'est ce lien qui est utilisé et donc configurer le paramètre à Non devrait enlever "Home" de l'affichage de l'article.

j'ai encore le problème que mon Iframe n'est pas responsive.

Le modal popup que tu utilises est celui de Joomla qui n'est pas responsive. Pour le rendre responsive tu peux lire l'article : https://techjoomla.com/blog/joomla-d...esponsive.html
Une autre possibilité est de changer de modal popup, j'ai vu dans le code source du site que tu utilises RokBox. Cette extension de RocketTheme est responsive d'après sa description (http://www.rockettheme.com/joomla/extensions/rokbox). Tu pourrais essayer de l'utiliser à la place du modal popup de Joomla..

Amicalement,
Rajoz

[seseba]

Re : Template derfotograf page de présentation d'un article

Le modal popup que tu utilises est celui de Joomla qui n'est pas responsive. Pour le rendre responsive tu peux lire l'article : https://techjoomla.com/blog/joomla-d...esponsive.html
Une autre possibilité est de changer de modal popup, j'ai vu dans le code source du site que tu utilises RokBox. Cette extension de RocketTheme est responsive d'après sa description (http://www.rockettheme.com/joomla/extensions/rokbox). Tu pourrais essayer de l'utiliser à la place du modal popup de Joomla..

Amicalement,
Rajoz

Bonsoir,

merci tout à fonctionné (sauf le Logo qui apparaît 3 fois) mais je n'ai pas compris comment rendre le popup responsive. En ajoutant class=rokbox l'article ne s'ouvre plus dans un pop up (je l'ai fait pour team).
Pour le Modal de joomla je n'ai pas compris le changement à faire car je ne comprend pas où faire les changements (1. Import following library at the start of the page., 2. Add following function in javascript).

Merci

[Rajoz]

Re : Template derfotograf page de présentation d'un article

Bonsoir seseba,

tout à fonctionné (sauf le Logo qui apparaît 3 fois)

Quand je regarde le code source du site, je ne vois pas les trois css que j'avais indiqués à mettre dans component.php.
Comme ces css contiennent la gestion du responsive, le logo prévu pour les grands écrans (logo.png) et le logo prévu pour les petits écrans (logo_mobil.png) apparaissent en même temps.
Le troisième logo que tu indiques doit être celui du site qui se voit par transparence en arrière plan en grisé derrière le popup : c'est la présentation normale d'un popup (voir les images à la fin du post).

Il suffit pour que ça marche de reprendre le post où je montrais comment mettre les trois css dans component.php et le code pour centrer le titre à ajouter à la fin de custom.css.

En ajoutant class=rokbox l'article ne s'ouvre plus dans un pop up (je l'ai fait pour team).

Des fois ça peut être utile de lire la documentation...

La documentation de RoxBox (http://www.rockettheme.com/docs/joom.../how_to_use.md) indique la syntaxe suivante :

<a data-rokbox href="/images/my_image.jpg">This is a RokBox 2 Link</a>

D'après le code source du site, tu as gardé l'ancienne syntaxe en ne changeant que class="modal" par class="roxbox" (cela ne correspond pas du tout à la syntaxe de RoxBox) :

<a class="rokbox" href="/site/index.php/9-team/16-sebastienfournereau?tmpl=component" rel="{handler: 'iframe', size: {x: 600, y: 600}}">Name</a>

D'après la documentation de RoxBox, tu aurais dû utiliser la syntaxe suivante (ajout de data-rokbox et suppression de class et de rel) :

<a data-rokbox href="/site/index.php/9-team/16-sebastienfournereau?tmpl=component">Name</a>

En utilisant Firebug pour simuler les modifications sur ton site voilà le résultat du popup affiché sur grand écran et sur petit écran (la barre de titre est responsive) :


Amicalement,
Rajoz

[seseba]

Re : Template derfotograf page de présentation d'un article

Bonsoir seseba,


Quand je regarde le code source du site, je ne vois pas les trois css que j'avais indiqués à mettre dans component.php.
Comme ces css contiennent la gestion du responsive, le logo prévu pour les grands écrans (logo.png) et le logo prévu pour les petits écrans (logo_mobil.png) apparaissent en même temps.
Le troisième logo que tu indiques doit être celui du site qui se voit par transparence en arrière plan en grisé derrière le popup : c'est la présentation normale d'un popup (voir les images à la fin du post).

Il suffit pour que ça marche de reprendre le post où je montrais comment mettre les trois css dans component.php et le code pour centrer le titre à ajouter à la fin de custom.css.

Tu parle bien de ce code:
// Add Stylesheets from template style $doc->addStyleSheet($this->baseurl . '/tempates/derfotograf/styles/fotograf/css/bootstrap.css');$doc->addStyleSheet($this->baseurl . '/templates/derfotograf/styles/fotograf/css/theme.css');$doc->addStyleSheet($this->baseurl . '/templates/derfotograf/styles/fotograf/css/custom.css');

Je l'ai bien ajouté:
component.php.zip

Merci

[Rajoz]

Re : Template derfotograf page de présentation d'un article

Bonjour seseba,

J'avais dis qu'il fallait ajouter :

$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');

[COLOR=#ff0000]// Add Stylesheets from template style
$doc->addStyleSheet($this->baseurl . '/templates/derfotograf/styles/fotograf/css/bootstrap.css');
$doc->addStyleSheet($this->baseurl . '/templates/derfotograf/styles/fotograf/css/theme.css');
$doc->addStyleSheet($this->baseurl . '/templates/derfotograf/styles/fotograf/css/custom.css');[/COLOR]

// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');

Dans le component.php que tu as posté, tu as effectivement ajouté ce code... mais tout à la suite sur une seule ligne (ligne 18) :

$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');

// Add Stylesheets from template style $doc->addStyleSheet($this->baseurl . '/tempates/derfotograf/styles/fotograf/css/bootstrap.css');$doc->addStyleSheet($this->baseurl . '/templates/derfotograf/styles/fotograf/css/theme.css');$doc->addStyleSheet($this->baseurl . '/templates/derfotograf/styles/fotograf/css/custom.css');// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');

Comme cette ligne 18 commence par // elle est considérée par PHP comme un commentaire. C'est pour cela que le site ne pouvait pas utiliser ce code et que moi je ne pouvais pas le voir.

C'est corrigé : component.zip

Il y a deux types d'éditeurs que tu peux utiliser pour modifier les fichiers comme component.php :

• En local : un éditeur comme Notepad++ sur PC ou Editra sur Mac
• En ligne sur Joomla : pour éditer un fichier aller sur Extensions > Gestions des templates > Templates > [nom du template] Détails et fichiers > [nom du fichier]

Ces deux éditeurs ont l'avantage d'être des éditeurs de code :

• ils laissent le code "propre" sans ajouter des caractères de mise en forme comme Word
• ils utilisent l'encodage des caractères en UTF-8 et les sauts de ligne de type Unix
• ils permettent de distinguer par des couleurs les balises du code (cela t'aurait permis de voir que ta ligne était entièrement en commentaire)
• ils font les indentations automatiquement
• ils permettent de vérifier que les balises d'ouverture ont bien leur balise de fermeture correspondante (ex: que pour un <p> il y a bien un </p>)
• l'éditeur de Joomla a plusieurs avantages :
  • il n'a pas besoin de copier localement le fichier à modifier
  • il fonctionne sur tout navigateur (y compris sur tablette)
  • il permet des fonctions spécifiques à Joomla comme la copie de template, la substitution, la prévisualisation du template, etc...

Amicalement,
Rajoz

[seseba]

Re : Template derfotograf page de présentation d'un article

Bonjour,

et merci! Mea culpa.

Il me reste une question quand à la présentation de l'article.
Dans quel document est ce qu'elle est formaté.
J'essaie d'enlever le "Veröffentlicht in..." ainsi que le "Drucken" et "E-Mail" et le "Weiter" mais je n'ai rien trouvé dans component.php.