Mise en page avant impression d'un article PluXML

Rédigé par Angeraph - - Aucun commentaire

Autant il est facile d'afficher un bouton imprimer là ou l'on veut dans PluXML, autant c'est un peu plus complexe de cibler les éléments de la page que l'on veut ou que l'on ne veut pas imprimer. Voici la méthode que j'ai appliqué pour le faire ici.

​Références qui m'ont aidé: 

enlightened Pour affiner la mise en page avant impression et éviter les sauts de page en pleine phrase, il reste la possibilité d'utiliser la méthode HTML en ajoutant la balise ci-dessous. Cela ajoutera de façon transparente un saut de page à l'endroit désiré et ainsi vous permettra une meilleure mise en page avant impression.

  • <p style="page-break-after:always;"></p>

 

Code

1. Créer une feuille CSS qui sera appelée lors de l'impression et l'éditer. Ici print.css.

Fichier : .themes<nom du thème>cssprint.css
Ajouter: @media print {.noPrint {display:none}}

2. Pour l'appel de la feuille CSS print.css, on édite le fichier header.php et on ajoute la ligne suivante entre la balise <head> ici </head>

Fichier : .themes<nom du thème>header.php
Ajouter : <link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/print.css" media="print">

3. Ajout de l'icône imprimer à l'endroit désiré sur la page, avec l'appel à la fonction window.print() lorsqu'on clique sur l'icône. Ici l'icône à été placée à coté du nombre des commentaires.

Fichier : .themes<nom du thème>article.php
Ajouter : <span onclick="funcPrint()">
             <a href=""><img src="./themes/<nom du thème>/img/print.png"></a>
             <script>function funcPrint() { window.print();}</script>
          </span>

 

4. Ajout de class="noPrint" a chaque endroit que l'on ne veut pas voir apparaître dans la page d'impression.

Fichier : .themes<nom du thème>header.php
Ajouter : <nav role="navigation" class="noPrint">
Ajouter : <header role="banner" class="noPrint">
Fichier : .themes<nom du thème>article.php
Ajouter : <p class="noPrint"> (Bloc qui affiche l'auteur, la date et le nombre de commentaires)
Ajouter : <footer class="noPrint">
Ajouter : <span class="noPrint">
            <?php $plxShow->artAuthorInfos('<div class="author-infos">#art_authorinfos</div>'); ?>
            <?php include(dirname(__FILE__).'/commentaires.php'); ?></div>
            <?php include(dirname(__FILE__).'/sidebar.php'); ?></div>
          </span>
Fichier : .themes<nom du thème>sidebar.php
Ajouter : <aside role="complementary" class="noPrint">
Fichier : .themes<nom du thème>footer.php
Ajouter : <footer role="contentinfo" class="noPrint">

 

Écrire un commentaire

Quelle est le cinquième caractère du mot w1sq8axr ?