J'ai publié mon thème Bludit

- Temps de lecture: 2 minutes
J'ai publié mon thème Bludit

J'utilise le thème Andy que j'ai amélioré pour mes besoins personnels

On retrouve notamment par rapport à l'original :

  • Une meilleure pagination (présentée ici : https://blog.nibel.fr/une-pagination-custom-sur-bludit)
  • Un chargement des CSS et JS amélioré avec un chargement asynchrone
  • Une amélioration des respects des standards W3C même si c'est encore loin d'être parfait
  • Affichage étendu jusqu'aux écrans 4K
  • Quelques traductions françaises en dur
  • Quelques fix de CSS

Je prévois encore quelques petites améliorations au fil du temps. J'aimerai notamment être totalement respectueux des standards W3C, on verra si c'est possible. En l'état c'est utilisable et ça fonctionne aussi bien sous Chrome que Firefox.

Soyez libre de l'utiliser, l'améliorer, le modifier, le partager à votre convenance :

https://github.com/perru/andy-enhanced/releases

Une pagination custom sur Bludit

- Temps de lecture: 5 minutes
Une pagination custom sur Bludit

La pagination par défaut de Bludit n'est pas terrible. Voici comment l'améliorer.

Dans son thème, remplacer la partie pagination par : (ex pour moi : bl-themes/andy/php/home.php) :

<!-- Pagination -->
<?php if (Paginator::numberOfPages()>1): ?>
<div class="paginator-label">
    Pages : 
</div>

<nav class="paginator">
<?php 
    if(!isset($_GET['page'])){
        $getPage = 1;
    } else {
        $getPage = $_GET['page'];
    } 
?>
    <ul class="list-group flex-md-row">

        <!-- Previous button -->
        <?php if (Paginator::showPrev()): ?>
        <li class="list-group-item">
          <a class="btn" href="<?php echo Paginator::previousPageUrl() ?>" tabindex="-1"><< 
            <?php echo $L->get('Previous'); ?></a>
        </li>
        <?php endif; ?>

        <?php if ($getPage >= 4) { ?>
        <li class="list-group-item">
            <a class="btn" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); ?>">Début</a>
        </li>
        <li>...&nbsp;</li>
        <?php } ?>

        <?php if ($getPage >= 3) { ?>
        <li class="list-group-item">
            <a class="btn" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); ?>
            ?page=<?php echo $getPage - 2; ?>"><?php echo $getPage - 2; ?></a>
        </li>
        <?php } ?>

        <?php if ($getPage >= 2) { ?>
        <li class="list-group-item">
            <a class="btn" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); ?>
            ?page=<?php echo $getPage - 1; ?>"><?php echo $getPage - 1; ?></a>
        </li>
        <?php } ?>

        <?php if ($getPage) { ?>
        <li class="list-group-item">
            <a class="btn btn-selected" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); ?>
            ?page=<?php echo $getPage; ?>"><?php echo $getPage; ?></a>
        </li>
        <?php } ?>

        <?php if (Paginator::numberOfPages()-1 >= $getPage) { ?>
        <li class="list-group-item">
            <a class="btn" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); ?>
            ?page=<?php echo $getPage + 1; ?>"><?php echo $getPage + 1; ?></a>
        </li>
        <?php } ?>

        <?php if (Paginator::numberOfPages()-2 >= $getPage) { ?>
        <li class="list-group-item">
            <a class="btn" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); ?>?page=<?php echo $getPage + 2; ?>"><?php echo $getPage + 2; ?></a>
        </li>
        <?php } ?>

        <?php if (Paginator::numberOfPages()-3 >= $getPage) { ?>
        <li>...&nbsp;</li>
        <li class="list-group-item">
            <a class="btn" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH).'?page='.Paginator::numberOfPages(); ?>">Fin</a>
        </li>
        <?php } ?>

        <!-- Next button -->
        <?php if (Paginator::showNext()): ?>
        <li class="list-group-item">
            <a class="btn" href="<?php echo Paginator::nextPageUrl() ?>"><?php echo $L->get('Next'); ?> >> </a>
        </li>
        <?php endif; ?> 

  </ul>
</nav>
<?php endif ?>

Et ajouter le CSS :

.btn {
    padding: 2px 10px 0 10px;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 3px;
    font-size: 17px;
    }

.btn-selected,
.btn:hover {
    color: #fff !important;
    background-color: #036BAA;
    font-weight:600;
}

.paginator-label {
  float: left;
}

Ce qui offre ce rendu :

Screenshot pagination exemple

Activer / Désactiver rapidement la vue TinyMCE dans l'admin Bludit

- Temps de lecture: 2 minutes
Activer / Désactiver rapidement la vue TinyMCE dans l'admin Bludit

Petit script à placer dans Plugins --> Code HTML --> Paramètres --> Admin Area --> Header :

<script>
    /// Fires when an editor is added to the EditorManager collection.
    tinymce.on('addeditor', function( event ) {
        $("<button id=\"switch-tinymce\" class=\"btn btn-sm btn-success\" type=\"button\" onclick=\"tinymce.execCommand('mceToggleEditor',false,'jseditor'); $('#switch-tinymce').toggleClass('btn-success btn-danger');\">ON/OFF</button>").insertAfter("#jsbuttonPreview"); 
        $("#switch-tinymce").before(" ").append(" ");
    }, true );
</script>

Le script est un peu dégueu mais le rendu est largement acceptable :

Screenshot 1 - ON

Screenshot 2 - OFF