piouPiouM's dev» Archives pour le tag media – piouPiouM's dev

Shortcode WordPress : afficher les documents liés aux billets

piouPiouM — Thu, 23 Sep 2010 06:55:29 +0000

J’ai récemment eu besoin d’afficher de manière élégante les pièces jointes à des articles et des pages. Seulement, avec un WordPress qui autorise l’ajout de documents autres que des images/vidéos et rien pour les insérer proprement dans un contenu, la tâche est loin d’être aisée.

Un coup de XHTML et roule ma poule !

Oui ! Si j’étais le rédacteur du site (comme ici). Mais il n’en est rien. Il fallait une solution utilisable depuis l’éditeur WYSIWYG, sans avoir à intervenir sur la source XHTML (genre pour ajouter un div, une image, des classes CSS, etc).

Voici donc un shortcode WordPress qui affiche la liste des pièces jointes.

Le shortcode en action

Code source

Le shortcode présenté dans ce billet nécessite la présence de la classe abstraite d’aide à la création de shortcode PPM_Shortcode. Si ce n’est pas déjà fait, récupérez-là et rendez-la disponible pour la classe AttachmentsListShortCode.

Copiez le code qui suit dans le fichier functions.php de votre thème¹.


/**
 * Add the new shortcode `attachments`.
 */
$attachments_list = new AttachmentsListShortCode('attachments');
$attachments_list->register();
 
/**
 * Shortcode to display a list of attachments of the current post.
 *
 * Attributes to use as follows:
 *     'exclude' - Default is none. List of IDs of the attachments to exclude of search.
 *     'orderby' - Default is 'title ASC'. How to order the attachments.
 *     'style'   - Default is 'large'. Presentation style to use.
 *
 * @author Mehdi Kabab 
 * @copyright Copyright (C) 2010 Mehdi Kabab
 * @license http://www.gnu.org/licenses/gpl.html  GNU GPL version 3 or later
 * @version 1.0.0
 * @link http://pioupioum.fr/outils-astuces/wordpress-shortcode-afficher-fichiers-joints.html
 */
class AttachmentsListShortCode extends PPM_Shortcode
{
    /**
     * Default options.
     *
     * @var array
     **/
    protected $_default_options = array(
        'exclude' => array(),
        'orderby' => 'title ASC',
        'style'   => null,
    );
 
    /**
     * Keys allowed in the query ORDER BY clause.
     *
     * @param array
     */
    protected $_allowed_orderby = array(
        'mime_type'
    );
 
    /**
     * Directory of MIME icons.
     * The path is relative to the current theme.
     *
     * @var string
     */
    private $_icons_dir;
 
    /**
     * Clause ORDER BY to be applied to sorting.
     *
     * @var string
     */
    private $_orderby = null;
 
    /**
     * Stack of the presentation styles for the attachments.
     *
     * @var ArrayObject
     **/
    private $_styles;
 
    /**
     * Constructor.
     *
     * @param string $tag Shortcode tag to be searched in post content.
     * @param string $icons_dir Directory of MIME icons.
     */
    public function __construct($tag, $icons_dir = 'images/mime')
    {
        parent::__construct($tag);
        $this->setIconsDirectory($icons_dir);
 
        $this->_styles = new ArrayObject(array(),
                                         ArrayObject::ARRAY_AS_PROPS);
        foreach ($this->_getDefaultStyles() as $tpl => $data) {
            if (isset($data['default'])) {
                $default = (boolean) $data['default'];
                unset($data['default']);
            } else {
                $default = false;
            }
            $this->setStyle($tpl, $data, $default);
        }
    }
 
    /**
     * Retrieve directory of MIME icons.
     *
     * @return string
     */
    public function getIconsDirectory()
    {
        return $this->_icons_dir;
    }
 
    /**
     * Set the directory of MIME icons.
     *
     * @return PPM_Shortcode
     */
    public function setIconsDirectory($dir)
    {
        $this->_icons_dir = trim($dir, '/') . '/';
 
        return $this;
    }
 
    /**
     * Retrieve the stack of the presentation styles.
     *
     * @return ArrayObject
     */
    public function getStyles()
    {
        return $this->_styles;
    }
 
    /**
     * Set a presentation style of the attachments.
     *
     * @param string $name Presentation style name.
     * @param array $data Style data.
     * @param boolean $default True for set this style as default style.
     * @return PPM_Shortcode
     * @throws Exception If the data are not valid.
     */
    public function setStyle($name, $data, $default = false)
    {
        if (!$this->_isValidStyle($data)) {
            throw new Exception(sprintf('Data for the style `%s` are not valid!',
                                        $name));
        }
        $this->_styles[$name] = new ArrayObject($data,
                                                   ArrayObject::ARRAY_AS_PROPS);
        if (true === $default) {
            $this->setStyleByDefault($name);
        }
 
        return $this;
    }
 
    /**
     * Retrieve name of the presentation style used by default.
     *
     * @return string
     */
    public function getStyleByDefault()
    {
        return $this->_default_options['style'];
    }
 
    /**
     * Set name of the presentation style to use by default.
     *
     * @param string $name
     * @return PPM_Shortcode
     */
    public function setStyleByDefault($name)
    {
        $this->_default_options['style'] = $name;
 
        return $this;
    }
 
    /**
     * [filter] Edit the clause ORDER BY to allow sorting by mime_type.
     *
     * @param string $orderby The ORDER BY clause.
     * @return string The new ORDER BY clause.
     */
    public function filterOrderby($orderby)
    {
        if (null !== $this->_orderby && in_array($this->_orderby, $this->_allowed_orderby)) {
            $orderby = preg_replace('#^([^\.]+\.)(\w+)(\s+ASC|DESC)$#i',
                                    '$1post_' . $this->_orderby . '$3',
                                    $orderby);
        }
 
        return $orderby;
    }
 
    /**
     * @see PPM_Shortcode::_process()
     */
    protected function _process($attributes, $content = null)
    {
        if ($this->getStyles()->offsetExists($this->getOption('style'))) {
            $style = $this->getOption('style');
        } else {
            $style = $this->getStyleByDefault();
        }
 
        // Order and Order by clauses
        list($orderby, $order) = explode(' ', $this->_default_options['orderby']);
        if (false !== strpos($this->getOption('orderby'), ' ')) {
            list($orderby, $order) = explode(' ', $this->getOption('orderby'));
        } else {
            $orderby = $this->getOption('orderby');
        }
        $this->_orderby = $orderby;
 
        // Retrieve the attachments
        $attachments = get_children(array(
            'post_parent' => get_the_ID(),
            'post_type'   => 'attachment',
            'numberposts' => -1,
            'exclude'     => $this->getOption('exclude'),
            'orderby'     => $this->_orderby,
            'order'       => ('ASC' === strtoupper($order)) ? 'ASC' : 'DESC',
            'exclude'     => $this->getOption('exclude'),
            'suppress_filters' => false // Allows to edit the query
        ));
        if (false === $attachments) {
            return '';
        }
 
        // Edit the query
        add_filter('posts_orderby', array($this, 'filterOrderby'));
 
        $result = '';
        $tpl = $this->getStyles()->$style;
        foreach ($attachments as $attachment) {
            // Do not display image attachments
            if (0 === strpos($attachment->post_mime_type, 'image/')) {
                continue;
            }
 
            // Determine the filename
            $file_type = strtr($attachment->post_mime_type, '/-', '__');
            $file_name = $this->getIconsDirectory() . $file_type . '.png';
            if (file_exists(get_stylesheet_directory() . '/' . $file_name))
            {
                $icon_file = get_bloginfo('stylesheet_directory', false) .
                             '/' . $file_name;
            }
            else
            {
                $icon_file = wp_mime_type_icon($attachment->ID);
            }
 
            if (function_exists('getimagesize')) {
                $size_attr =  getimagesize($icon_file);
                $size_attr = $size_attr[3];
            } else {
                $size_attr = '';
            }
 
            $file_path = get_attached_file($attachment->ID);
            $context = array(
                'ID'        => $attachment->ID,
                'filename'  => basename($attachment->guid),
                'file_date' => mysql2date(get_option('date_format'),
                                          $attachment->post_date),
                'file_size' => esc_attr(size_format(filesize($file_path))),
                'file_type' => $attachment->post_mime_type,
                'file_url'  => esc_attr($attachment->guid),
                'icon_atts' => $size_attr,
                'icon_path' => esc_attr($icon_file),
                'title'     => esc_attr(get_the_title($attachment->ID)),
                'label_filename'  => __('File name:'),
                'label_file_date' => __('Upload date:'),
                'label_file_size' => __('Size:')
            );
 
            // Hook for customize the context
            $context = apply_filters('attachments_list_context',
                                     $context,
                                     $attachment,
                                     $this->getStyles()->$style);
 
            $result .= $this->_compileMarkup($tpl, $context);
        }
 
        return $tpl->before . do_shortcode($content) . $result . $tpl->after;
    }
 
    /**
     * Performs substitutions in the markup of the selected presentation style.
     *
     * @param ArrayObject $tpl
     * @param array $context
     * @return string The markup after substitutions.
     */
    protected function _compileMarkup($tpl, $context)
    {
        $markup = $tpl->markup;
        foreach ($context as $key => $value) {
            $markup = str_replace('%' . $key . '%', $value, $markup);
        }
 
        return $markup;
    }
 
    /**
     * Retrieve the default stack of the presentation styles.
     *
     * Declare the `medium`, `small` and `large` presentation styles.
     *
     * @return array
     */
    protected function _getDefaultStyles()
    {
        return array(
            'medium' => array(
                'before' => '',
                'after'  => '
',
                'markup' => '' .
                            '' .
                            '%title%' . 
                            '
'
            ),
            'small'  => array(
                'before' => '',
                'after'  => '
',
                'markup' => '' .
                            '' .
                            '' .
                            '%title% (%file_size%)' . 
                            '
'
            ),
            'large'  => array(
                'before' => '',
                'after'  => '
',
                'markup' => '' .
                            '' .
                            '' .
                            '%title%
' .
                            '%label_filename% %filename%
' .
                            '%label_file_date% %file_date%
' .
                            '%label_file_size% %file_size%
' .
                            '
',
                'default' => true
            )
        );
    }
 
    /**
     * Test if the data of a presentation style are well formed.
     *
     * @param array $data
     * @return boolean
     */
    protected function _isValidStyle($data)
    {
        $ok = 3 === count($data) &&
              isset($data['before']) &&
              isset($data['after']) &&
              isset($data['markup']);
 
        return $ok;
    }
 
}
?>

Il vous faut également intégrer à votre thème les styles CSS qui suivent. Ceux-ci demeurant être une suggestion.

.attachments-list-large, .attachments-list-medium, .attachments-list-small {
  margin-bottom: 1em;
}
.attachments-list-large .attachment-item img, .attachments-list-medium .attachment-item img, .attachments-list-small .attachment-item img {
    border: none;
}
.attachments-list-large .attachment-item dl {
    margin: 0 0 1.5em 1em;
}
.attachments-list-large .attachment-item dt {
    font-weight: bold;
}
.attachments-list-large .attachment-item dd {
    font-size: 0.85em;
    margin-left: 1.5em;
}
.attachments-list-large .attachment-item img {
    display: inline;
    float: left;
}
.attachments-list-large .attachment-item img {
    margin-right: 1em;
}
.attachments-list-medium .attachment-item {
    display: inline-table;
    margin-bottom: 1.5em;
    padding: 0 0.15em;
    text-align: center;
    vertical-align: top;
    width: 10em;
}
.attachments-list-medium .attachment-item a {
    text-decoration: none;
}
.attachments-list-medium .attachment-item small {
    display: block;
    font-size: 0.85em;
}
.attachments-list-small img {
    margin-right: 5px;
    vertical-align: text-bottom;
    height: 16px;
    width: 16px;
}

Ou si vous utilisez SCSS :

.attachments-list-large, .attachments-list-medium, .attachments-list-small {
    margin-bottom: 1em;
    .attachment-item {
        img {
            border: none;
        }
    }
}
.attachments-list-large {
    .attachment-item {
        $space: 1em;
        dl {
            margin: 0 0 ($space + 0.5em) $space;
        }
        dt {
            font-weight: bold;
        }
        dd {
            font-size: 0.85em;
            margin-left: ($space + 0.5em);
        }
        img {
            display: inline;
            float: left;
            margin: {
                right: $space;
            }
        }
    }
}
.attachments-list-medium {
    .attachment-item {
        display: inline-table;
        margin-bottom: 1.5em;
        padding: 0 0.15em;
        text-align: center;
        width: 10em;
        a {
            text-decoration: none;
        }
        small {
            display: block;
            font-size: 0.85em;
        }
    }
}
.attachments-list-small {
    img {
        margin-right: 5px;
        vertical-align: text-bottom;
        height: 16px;
        width: 16px;
    }
}

Différents styles d’affichage

Le shortcode attachments propose trois formats d’affichage des pièces jointes : medium, large (par défaut) et small.

[attachments style="small"]

[attachments style="medium"]

[attachments style="large"]

Exemples d’utilisation

Usage basique

[attachments]

Exclure des documents de la liste

Ici, nous excluons de la liste les documents ayant les identifiants 53 et 56.

[attachments exclude="53,56"]

Liste des documents triés par date de mise en ligne

[attachments orderby="date"]

Liste des documents triés par date, les plus récents en premier

[attachments orderby="date DESC"]

Liste des documents triés par type de document

[attachments orderby="mime_type"]

Cumul des paramètres

Les paramètres peuvent être cumulés, sans ordre précis.

[attachments style="large" exclude="53" orderby="date"]

Ajouter un titre à la liste

Le shortcode attachments existe aussi en forme englobante. Tout contenu englobé préfixera la liste des pièces jointes générées.

[attachments]
Avec un contenu
Ce shortcode englobe le titre qui précède et ce paragraphe.
[/attachments]

Liste des paramètres

Voici la liste des paramètres acceptés par le shortcode attachments :

exclude
(optionnel) La liste des ID séparés par des virgules des documents à exclure de la liste. Vide par défaut. Toutes les pièces jointes au contenu sont affichées.

orderby
(optionnel) Le type de tri appliqué à la liste. Par défaut title ASC, les document sont triés par titre et par ordre alphabétique.

style (optionnel) Le type de présentation de la liste. Trois formats sont disponibles : small, medium et large (par défaut). Se reporter aux exemples pour avoir des aperçus.

Personnaliser le shortcode

Afin de correspondre aux besoins du plus grand nombre, le shortcode attachments offre diverses possibilités de personnalisation.

Ajouter un type de présentation

Si vous souhaitez afficher une simple liste ordonnée des pièces jointes, déclarez un nouveau style au shortcode comme suit :


$attachments_list = new AttachmentsListShortCode('attachments');
$ol_style = array(
    'before' => '',
    'after'  => '
',
    'markup' => '%title%
'
);
$attachments_list->setStyle('ol', $ol_style)
                 ->register();
?>

Puis, appelez-le dans un billet :

[attachments style="ol"]

Notez que la déclaration d’un style peut se faire après l’enregistrement du shortcode. La seule contrainte étant de la faire avant l’appel au shortcode par WordPress.

Si vous souhaitez définir un style de présentation à utiliser par défaut, deux possibilités :

Lors de la déclaration d’un style, préciser la clé 'default' => true.
À l’aide de la méthode setStyleByDefault($name) : $attachments_list->setStyleByDefault('ol);.

Ci-après, la liste des différentes tags disponibles pour vos styles :

ID. L’identifiant de la pièce jointe.
title. Le titre de la pièce jointe.
filename. Le nom de fichier de la pièce jointe.
file_date. La date de transfert de la pièce jointe.
file_size. La taille de la pièce jointe, en [K|M]Bytes.
file_type. Le type MIME du fichier.
file_url. L’URL de téléchargement de la pièce jointe.
icon_atts. D’éventuels attributs ajoutés à la balise .
icon_path. L’URL de l’icône illustrative.
label_filename. Label annonçant le titre du fichier.
label_file_date. Label annonçant la date de transfert du document.
label_file_size. Label annonçant la taille de la pièce jointe.

Personnaliser les icônes

Par défaut le shortcode affiche les icônes disponibles dans WordPress. Le shortcode permet d’utiliser un set d’icône personnalisé.

Il suffit pour cela de déclarer un chemin d’accès aux icônes des différents types MIME. Par défaut images/mime. Ce chemin doit être relatif au dossier du thème.


$attachments_list = new AttachmentsListShortCode('pièces jointes');
$attachments_list->setIconsDirectory('img/icons')
                 ->register();
?>

Afin que les icônes soient récupérées, les fichiers images des types MIME doivent être de la forme type_mime.png.
C’est à dire qu’un document PDF de type MIME application/pdf aura pour icône le fichier application_pdf.png. Un document ODT de type MIME application/vnd.oasis.opendocument.text se référera quand à lui à l’image application_vnd.oasis.opendocument.text.png.

J’utilise le pack d’icônes Oxygen dans les exemples présentés de cette page.

Filtre `attachments_list_context`

Le filtre attachments_list_context permet de modifier le contexte qui sera utilisé pour réaliser les substitions dans le style de présentation.


function filter_attachments_list_context($context, $attachment, $size)
{
    // WordPress ne comportant pas de chaîne 'Size:', cette
    // dernière ne peut être localisée automatiquement.
    // Travaillant sur un site exclusivement localisé en français
    // on peut se permettre les deux traitements qui suivent.
    $context['label_file_size'] = 'Taille :';
    $context['file_size'] = strtr($context['file_size'], 'B', 'o');
 
    return $context;
}
 
add_filter('attachments_list_context', 'filter_attachments_list_context', 10, 3);
?>

Historique des versions et changelog

1.0.0

Version initiale.

Continuez votre lecture sur des sujets similaires

ou dans un fichier à part, à inclure dans le fichier functions.php. ↩

WordPress : autoriser l’upload de fichiers au format non-supporté

piouPiouM — Tue, 09 Feb 2010 14:50:30 +0000

WordPress ne supporte en upload qu’une liste exhaustive de formats de fichiers. Si comme moi vous souhaitez uploader¹ des fichiers issus de TextMate, comme les .tmCommand et autres .tmSnippet, ajoutez le code qui suit dans le fichier functions.php de votre thème².


// Add the new filter
add_filter('upload_mimes', 'addUploadMimes');
 
/**
 * Adds new supported media types for upload.
 *
 * @see wp_check_filetype() or get_allowed_mime_types()
 * @param array $mimes Array of mime types keyed by the file extension regex corresponding to those types.
 * @return array
 */
function addUploadMimes($mimes)
{
	$mimes = array_merge($mimes, array(
		'tmbundle|tmCommand|tmDragCommand|tmSnippet|tmLanguage|tmPreferences' => 'application/octet-stream'
	));
 
	return $mimes;
}
?>

Indiquez en clé les nouvelles extensions de fichier (séparées par des pipes) et en valeur le type mime associé.

Continuez votre lecture sur des sujets similaires

sous Mac OS X tout du moins, SWFUpload me désactive la sélection des fichiers de TextMate m’obligeant à passer par l’interface d’upload native du navigateur. Je suis preneur de toute solution. ↩
à choisir, l’ajouter dans un plugin serait plus judicieux puisque cette fonctionnalité ne dépend pas du thème. ↩

WordPress : récupération avancée des images d’un article

piouPiouM — Tue, 15 Sep 2009 00:11:27 +0000

De nombreux thèmes WordPress proposent, via un champ personnalisé, une gestion des miniatures à afficher sur la page d’accueil. Mais pourquoi contraindre ses rédacteurs à cette manipulation, qui, il faut le dire, est relativement lourde,surtout pour le néophyte¹. Le plus simple serait de recourir dans son thème à une fonction qui automatiserait la recherche de l’image à afficher en tant que thumbnail.

Évidemment, nous pouvons trouver au détour du web des fonctions au code douteux² qui vont se contenter de chercher la première image dans le contenu du billet.

Pourquoi ne pas étendre (et améliorer tant que nous y sommes =) ce type de fonction afin d’obtenir un outil de recherche d’images au sein d’un billet ? C’est ce que je vous propose ici.

Table des matières

Code source
Fonctionnement
Exemples d’utilisation
Liste des paramètres
Historique des versions et changelog

Code source

Copiez le code qui suit dans le fichier functions.php de votre thème.

Télécharger wp-get_post_images.phps (1.62 Ko)

Fonctionnement

Petit retour sur ce code non commenté³, car, à la lecture aisée.

Recherche des images

La fonction get_post_images va effectuer une recherche d’image(s) dans les images jointes au billet cible si l’ordre de tri est différent à natural. En effet, cette option oblige à parser le contenu dans le sens de lecture de l’article, qui peut différer de l’ordre d’ajout des images dans sa bibliothèque de médias.
Notez que la recherche non naturelle prend directement en compte les ordres de tri.

Si la recherche échoue (ou si l’ordre de tri est défini à natural), le contenu du post est analysé. Seront considérées les images comportants une classe wp-image-(\d+). Si la recherche s’avère fructueuse, le tri est appliqué.

Finalement, get_post_images retournera le résultat de la recherche au format spécifié via le paramètre output. En cas d’échec, le booléen false est retourné.

Quid de la présentation ?

Le formatage et l’affichage des données est laissé à la discrétion du développeur. La présentation pourra ainsi évoluer indépendamment de la fonction.

Exemples d’utilisation

Récupérer les images triées par date (défaut)

Nous supposons ici que l’action se déroule dans la boucle puisque qu’aucun identifiant d’article n’a été fourni. Autrement, la valeur de retour sera FALSE.

 get_post_images(); ?>

Liste des images triées par date inverse

 get_post_images('order=DESC'); ?>

Liste des images triées par ordre d’arrivée dans le billet

 get_post_images('orderby=natural'); ?>

Récupération de la première image

 get_post_images('number=1'); ?>

Récupération de la première image (par contenu, forcé)

 get_post_images('number=1&orderby=natural'); ?>

Afficher la miniature de la première image d’un article

La fonction first_thumbnail qui suit affichera au format thumbnail la première image du billet ayant pour identifiant $post_id. Si ce dernier est omit, l’identifiant du billet en cours d’itération depuis la boucle sera utilisé.

/**
 * Display thumb of the first image from a post.
 *
 * @author Mehdi Kabab 
 * @copyright Copyright (C) 2009 Mehdi Kabab
 * @license http://www.gnu.org/licenses/gpl.html  GNU GPL version 3 or later
 *
 * @param  array $post_id Optional. Post ID.
 * @return bool False on failure.
 */
function first_thumbnail($post_id = null)
{
    $img = get_post_images("post_id=$post_id&number=1");
    if (false !== $img)
    {
        echo wp_get_attachment_link($img[0]->ID, 'thumbnail');
    }
    else
    {
        return false;
    }
}

Générer une miniature de la première image d’un article avec timthumb

La même fonction mais qui fait appel à timthumb pour générer une miniature aux dimensions arbitraires.

/**
 * Display a dynamic thumbnail of the first image from a post.
 *
 * The defaults are as follows:
 *     'post_id' - Default is null. Post ID.
 *     'h' - Default is null. Thumbnail height.
 *     'w' - Default is null. Thumbnail width.
 *     'q' - Default is null. Thumbnail quality.
 *     'zc' - Default is null. Zoom crop used for generates the thumbnail.
 *
 * @author Mehdi Kabab 
 * @copyright Copyright (C) 2009 Mehdi Kabab
 * @license http://www.gnu.org/licenses/gpl.html  GNU GPL version 3 or later
 *
 * @link http://code.google.com/p/timthumb/ Timthumb
 *
 * @param  array $args Optional. Overrides defaults.
 * @return bool False on failure.
 */
function first_thumbnail($args = array())
{
    $defaults = array(
        'post_id' => null,
        'h'  => null,
        'q'  => null,
        'w'  => null,
        'zc' => null,
    );
    $args    = wp_parse_args($args, $defaults);
    $post_id = $args['post_id'];
    $img     = get_post_images("post_id=$post_id&number=1");
    unset($args['post_id']);
 
    if (false !== $img)
    {
        $img = $img[0];
 
        if (null === $post_id)
        {
            if (in_the_loop())
            {
                global $post;
                $post_id = $post->ID;
            }
            else
            {
                if (isset($img->post_parent))
                {
                    $post_id = $img->post_parent;
                }
                else
                {
                    return false;
                }
            }
        }
        $query     = http_build_query($args, '', '&');
        $thumbnail = sprintf('',
            get_bloginfo('template_url', 'display') . '/timthumb.php', // customize timthumb url
            $img->guid,
            ($query) ? '&' . $query : '',
            (isset($args['w'])) ? " width=\"{$args['w']}\"" : '',
            (isset($args['h'])) ? " height=\"{$args['h']}\"" : ''
        );
 
        printf('%s',
            get_permalink($post_id),
            esc_attr(get_the_title($post_id)),
            $thumbnail
        );
    }
    else
    {
        return false;
    }
}

Ainsi, pour afficher une miniature de 260x120 pixels de la première image de l’article courant nous utiliserons :

 first_thumbnail('w=260&h=120'); ?>

Liste des paramètres

Voici la liste des paramètres acceptés par l’argument $args de la fonction get_post_images :

number
(integer) (optionnel) Le nombre maximal d’images à retourner. Par défaut à -1, retourne toutes les images.

order
(string) (optionnel) Ordre de tri. Les valeurs valides sont :

'ASC' - Croissant (du plus petit au plus grand). (Par défaut)
'DESC' - Décroissant (du plus grand au plus petit).

orderby
(string) (optionnel) Ordonner les images par l’une des valeurs qui suivent :

'date' - Trier selon la date de création. (Par Défaut)
'post_id' - Trier numériquement par l’ID des articles.
'natural' - Trier selon l’affichage des images dans le contenu de l’article.

output
(string) (optionnel) Le format de sortie.

OBJECT - Retourne un tableau d’objets instances de la classe stdClass. (Par défaut)
ARRAY_A - Retourne un tableau associatif (nom des champs => valeurs).
ARRAY_N - Retourne un tableau indexé numériquement de la valeur des champs.

post_id
(integer) (optionnel) L’identifiant de l’article à analyser. Par défaut à NULL, utilise celui du billet courant dans la boucle.

preserve_keys
(boolean) (optionnel) Préserver les clés retournées par l’API de WordPress, c.-à-d les identifiants des images. Par défaut à FALSE, le tableau résultat est indexé numériquement à partir de 0.

Historique des versions et changelog

1.0.0

Version initiale.

Continuez votre lecture sur des sujets similaires

uploader l’image, récupérer son URL relative donc en supprimer la racine du site, ajouter un champ personnalisé pour y renseigner l’URL précédemment copiée. ↩
franchement, que d’erreurs dans cette fonction qui a pourtant fait du bruit : la temporisation n’est d’aucune utilité, la globale $posts ne sert à rien, une Notice est générée lorsque l’article ne contient pas d’image, l’auteur de la fonction sait qu’il recherche 1 image alors pourquoi recourir à preg_match_all au lieu d’un simple preg_match ? C’est court donc c’est cool, c’est ça ? (‘o_o) ↩
vous pouvez me flageller ↩

WordPress : lister les images d’un article sur une page media

piouPiouM — Wed, 26 Aug 2009 15:04:50 +0000

Julien a présenté ce 25 août 2009 une fonction d’affichage des miniatures liées à un même article pour WordPress. Bien que fonctionnelle, elle ne se révèle pas être des plus pratique.

Note :
J’écris ici même parce qu’en fin de billet je colle une fonction qui ferait un peu pavé dans les commentaires de l’article de Julien. Je ne fais également plus confiance aux services de pasties en ligne, ayant perdu trop d’extraits de code…

Comme le relève OncleTom, la présentation et la logique sont mélangées.
La fonction wallthumb dispose d’un argument $id qui est finalement inutile. Il sert simplement à tester la vignette courante, mais, comme la fonction est à appeler sur la page d’un media, l’élément courant est obligatoirement le media affiché.
Enfin, les arguments de présentation cassent avec la logique introduite par WordPress. Dans son API, ce dernier fait généralement appel à un unique argument¹, passé sous la forme d’un tableau ou d’une chaîne de caractères.

Ci-dessous, une fonction de remplacement à ajouter dans le fichier functions.php de votre thème.


/**
 * Retrieve the list of images attached to the same post that the current attachment.
 *
 * @author Mehdi Kabab 
 * @copyright Copyright (C) 2009 Mehdi Kabab
 * @license http://www.gnu.org/licenses/gpl.html  GNU GPL version 3 or later
 *
 * @link http://www.webinventif.fr/wordpress-afficher-toutes-miniatures-liees-article-pages-media/ Inspiration
 *
 * @param  string $output Optional. Constant for return type, either OBJECT (default), ARRAY_A, ARRAY_N.
 * @return array|bool False on failure
 **/
function get_other_attachments($output = OBJECT)
{
    global $post;
    if (!is_attachment() || false === (bool) $post->post_parent)
        return false;
 
    $attachments = get_children(array(
        'post_type'      => 'attachment',
        'post_mime_type' => 'image',
        'post_status'    => 'inherit',
        'post_parent'    => $post->post_parent
    ), $output);
 
    return $attachments;
}
 
/**
 * Display the HTML list of images attached to the same post that the current attachment.
 *
 * Only works on an attachment page.
 *
 * @author Mehdi Kabab 
 * @copyright Copyright (C) 2009 Mehdi Kabab
 * @license http://www.gnu.org/licenses/gpl.html  GNU GPL version 3 or later
 *
 * @link http://www.webinventif.fr/wordpress-afficher-toutes-miniatures-liees-article-pages-media/ Inspiration
 *
 * @param  string|array $args Optional. User defined arguments for replacing the defaults.
 * @return bool False on failure.
 */
function wallthumb($args = array())
{
    global $post;
    $attachments = get_other_attachments();
    if (!$attachments)
        return false;
 
    $defaults = array(
        'id'            => 'gallery-%d',
        'current_class' => 'current',
        'thumb_class'   => 'gallerythumb',
        'before_thumb'  => '',
        'after_thumb'   => '
',
        'before_list'   => '',
        'after_list'    => '
',
    );
    $args        = wp_parse_args($args, $defaults);
    $current_id  = $post->ID;
    $thumb_class = trim($args['thumb_class']);
 
    static $i = 0;
    $stack = array(sprintf($args['before_list'], sprintf($args['id'], ++$i)));
    foreach ($attachments as $attachment)
    {
        if ($current_id != $attachment->ID)
        {
            $buf = sprintf($args['before_thumb'], $thumb_class);
        }
        else
        {
            $buf = sprintf($args['before_thumb'], trim($thumb_class . ' ' . $args['current_class']));
        }
        $buf .= sprintf('%s',
            get_attachment_link($attachment->ID),
            esc_attr(get_the_title($attachment->ID)),
            wp_get_attachment_image($attachment->ID, 'thumbnail')
        );
        $buf .= $args['after_thumb'];
        $stack[] = $buf;
    }
    echo implode("\n\t", $stack) . "\n{$args['after_list']}";
}

Continuez votre lecture sur des sujets similaires

Voir la fonction register_sidebar par exemple. ↩

piouPiouM's dev» Archives pour le tag media – piouPiouM's dev

Shortcode WordPress : afficher les documents liés aux billets

Table des matières

Code source

Différents styles d’affichage

Exemples d’utilisation

Usage basique

Exclure des documents de la liste

Liste des documents triés par date de mise en ligne

Liste des documents triés par date, les plus récents en premier

Liste des documents triés par type de document

Cumul des paramètres

Ajouter un titre à la liste

Avec un contenu

Liste des paramètres

Personnaliser le shortcode

Ajouter un type de présentation

Personnaliser les icônes

Filtre attachments_list_context

Historique des versions et changelog

1.0.0

Continuez votre lecture sur des sujets similaires

WordPress : autoriser l’upload de fichiers au format non-supporté

Continuez votre lecture sur des sujets similaires

WordPress : récupération avancée des images d’un article

Table des matières

Code source

Fonctionnement

Recherche des images

Quid de la présentation ?

Exemples d’utilisation

Récupérer les images triées par date (défaut)

Liste des images triées par date inverse

Liste des images triées par ordre d’arrivée dans le billet

Récupération de la première image

Récupération de la première image (par contenu, forcé)

Afficher la miniature de la première image d’un article

Générer une miniature de la première image d’un article avec timthumb

Liste des paramètres

Historique des versions et changelog

1.0.0

Continuez votre lecture sur des sujets similaires

WordPress : lister les images d’un article sur une page media

Continuez votre lecture sur des sujets similaires

Filtre `attachments_list_context`