Vous serez \u00e0 m\u00eame de g\u00e9rer la plupart de vos galeries de photos au sein de WP. Il est possible de manipuler cette pseudo-variable en lui affectant des \u00e9l\u00e9ments. C’est ce que nous allons voir dans cet article, on va dans un deuxi\u00e8me temps modifier Le fichier Cette r\u00e9flexion sur le bonne usage des galeries sous WordPress s’inscrit naturellement dans le pr\u00e9c\u00e8dent article qui avait \u00e9t\u00e9 consacr\u00e9 aux metadonn\u00e9es (metadas) qui \u00e9taient inject\u00e9es dans les photos.<\/p>\n Le header du fichier WordPress dispose d’un manager tr\u00e8s puissant pour manipuler vos images une fois upload\u00e9s dans le media manager pour ensuite les attacher notamment aux articles.<\/p>\n On va voir la proc\u00e9dure la plus simple pour attacher une image \u00e0 un article.<\/p>\n On recherche l’article<\/b> On attache l’image \u00e0 l’article<\/b> Lorsque vous passez par le media manager, automatiquement les images vont \u00eatre resiz\u00e9s \u00e0 la vol\u00e9e. Ces images vont en fait constituer le vivier de formats de photo appel\u00e9s via les options du param\u00e8tre Il vous suffit par exemple de chercher l’id d’une des images attach\u00e9es \u00e0 cette article et de l’exclure \u00e0 l’aide de la propri\u00e9t\u00e9 La valeur Pour la petite histoire, on va donc attach\u00e9 des photos de suisse \u00e0 une galerie consacr\u00e9e \u00e0 la Corse !<\/i><\/p>\n La galerie compl\u00e8te de l’article La galerie compl\u00e8te de l’article Le th\u00e8me de notre Blog WP ne se pr\u00eate pas trop \u00e0 un affichage sur deux colonnes et dans un format d’image plus grand type Vous pouvez aussi contr\u00f4ler les balises pour l’inclusion des caract\u00e9ristiques de l’image : Voici les informations concernant les options de la balise galerie de photos dans WordPress, de quoi faire du vrai photoblogging !<\/p>\n Options<\/p>\n The following basic options are supported:<\/p>\n columns id size Some advanced options are available:<\/p>\n orderby itemtag icontag captiontag link include exclude Source : http:\/\/codex.wordpress.org\/Gallery_Shortcode<\/a><\/em><\/p>\n On va tenter de coupler facilement cette balise Nous avons effectuer des tests sur un WordPress en local sur un mac \u00e0 l’aide de MAMP, avec un WordPresss Une fois ce bug r\u00e9solu, on va modifier le code pour g\u00e9n\u00e9rer la <\/p>\n qui se trouve dans dans la ligne <\/p>\n <\/b><\/p>\n Conlusion : Automatiquement toutes les images attach\u00e9s \u00e0 un article sont d\u00e9sormais disponibles dans la page via la balise Le choix de l’apparence de la div qui vient en surimpression<\/b> Affichage Affichage fa\u00e7on On a donc la possibilit\u00e9 de param\u00e8trer compl\u00e8tement la galerie via le plugin, en chargeant cette balise Depuis, la sortie de WordPress 2.5, vous pouvez g\u00e9rer de mani\u00e8re assez sophistiqu\u00e9 la publication de galerie de photos sans l’ajout d’une extension fonctionnelle quelconque.<\/p>\n","protected":false},"author":1,"featured_media":9417,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"WordPress permet de publier des galeries photos avec le gestionnaire de m\u00e9dias. Optimisez vos galeries en modifiant media.php pour ajouter prettyPhoto.","bf_ai_og_title":"WordPress Galerie Photos","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3454,3444,3451,3435,3452],"tags":[314,153,315,2211,20,2223],"class_list":["post-1493","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-journalism-writing","category-programming-databases","category-web-design-front-end","category-web-development","category-wordpress-cms","tag-galeries","tag-images","tag-jpg","tag-mysql","tag-php","tag-wordpress"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-o5","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/07\/wp_logo_generic4_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/1493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=1493"}],"version-history":[{"count":1,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/1493\/revisions"}],"predecessor-version":[{"id":9459,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/1493\/revisions\/9459"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9417"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=1493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=1493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=1493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}media.php<\/code> qui g\u00e8re la balise <\/code> dans wp-includes\/media.php<\/code> pour lui ajouter la vue prettyPhoto<\/code>.<\/b><\/p>\n\n
\nhttp:\/\/social.hecube.net\/bruno\/2010\/02\/26\/image-metadonnees-metadata-editer-supprimer-mettre-a-jour-des-metadata-sur-des-fichiers-de-photo\/<\/a><\/li>\n<\/ul>\nwp-includes\/media.php<\/code><\/b><\/p>\n\r\n\r\n\/**\r\n * The Gallery shortcode.\r\n *\r\n * This implements the functionality of the Gallery Shortcode for displaying\r\n * WordPress images on a post.\r\n *\r\n * @since 2.5.0\r\n *\r\n * @param array $attr Attributes attributed to the shortcode.\r\n * @return string HTML content to display gallery.\r\n *\/\r\n\r\n<\/pre>\n
G\u00e9rer ces images dans WordPress<\/h4>\n
![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/03\/wp_media_manager_19.jpg\")
<\/p>\nAttacher une image \u00e0 un article<\/h4>\n
\n![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/03\/wp_media_manager_20.jpg\")
<\/p>\n
\n![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/03\/wp_media_manager_21.jpg\")
<\/p>\nLes param\u00e8tres du resize d’image dans WordPress<\/h4>\n
size<\/code> qui sont : thumbnail<\/code>, medium<\/code>, large<\/code> et full<\/code>.<\/b><\/p>\n![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/03\/wp_media_manager_22.jpg\")
<\/p>\nQuelques cas d’\u00e9cole<\/h4>\n
exclude<\/code>. On trouve cette id via le media manager attachment_id=504<\/code>.<\/p>\n<\/pre>\n
![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/03\/wp_media_manager_9.jpg\")
<\/p>\n<\/pre>\n
![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/03\/wp_media_manager_8.jpg\")
<\/p>\ncolumns<\/code> affecte l’apparence de votre galerie en d\u00e9terminant le nombre de colonnes de la matrice de photos. Par exemple, vous disposez de 9 photos, en mettant 3, vos photos vont s’afficher sur une matrice 3×3. La valeur id=\"441\"<\/code> vous permet d’appeler une galerie attach\u00e9e \u00e0 un tout autre article dont l’id est 441<\/code> et on en profile pour exclure une photo qui se trouve dans cette galerie.<\/p>\n441<\/code><\/b><\/p>\n<\/pre>\n
![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/03\/wp_media_manager_10.jpg\")
<\/p>\n441<\/code> exclusion faite de la photo 486<\/code><\/b><\/p>\n<\/pre>\n
![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/03\/wp_media_manager_11.jpg\")
<\/p>\n<\/pre>\n
![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/03\/wp_media_manager_12.jpg\")
<\/p>\nsize=\"large\"<\/code> ou size=\"full\"<\/code> mais voici les bouts de code \u00e0 tout hasard.<\/p>\n<\/pre>\n
<\/pre>\n
itemtag<\/code>, icontag<\/code>, captiontag<\/code>.<\/b><\/p>\n<\/pre>\n
Les options de la balise <\/h4>\n
\n
\n specify the number of columns. The gallery will include a break tag at the end of each row, and calculate the column width as appropriate. The default value is 3. If columns is set to 0, no row breaks will be included. For example, to display a 4 column gallery: <\/p>\n<\/pre>\n
\n specify the post ID. The gallery will display images which are attached to that post. The default behaviour if no ID is specified is to display images attached to the current post. For example, to display images attached to post 123: <\/p>\n<\/pre>\n
\n specify the image size to use for the thumbnail display. Valid values include “thumbnail”, “medium”, “large” and “full”. The default is “thumbnail”. The size of the images for “thumbnail”, “medium” and “large” can be configured in WordPress admin panel under Settings > Media. For example, to display a gallery of medium sized images: <\/p>\n<\/pre>\n
\n specify the sort order used to display thumbnails. The default is “menu_order ASC, ID ASC”. “RAND” (random) is also supported. <\/p>\n
\n the name of the XHTML tag used to enclose each item in the gallery. The default is “dl”. <\/p>\n
\n the name of the XHTML tag used to enclose each thumbnail icon in the gallery. The default is “dt”. <\/p>\n
\n the name of the XHTML tag used to enclose each caption. The default is “dd”. For example, to change the gallery markup to use div, span and p tags: <\/p>\n
\n you can set it to “file” so each image will link to the image file. The default value links to the attachment’s permalink. <\/p>\n
\n comma separated attachment IDs, will show only the images from these attachments. <\/p>\n
\n comma separated attachment IDs, excludes the images from these attachments. Please note that include and exclude cannot be used together.\n<\/p><\/blockquote>\nJoindre prettyPhoto \u00e0 vos galeries sous WordPress<\/h4>\n
<\/code> avec le c\u00e9l\u00e9brissime affichage connu sous le nom de prettyPhoto<\/b>. Pour charger l’environnement n\u00e9cessaire au bon fonctionnement de prettyPhoto, le plus simple est d’installer le plugin WordPress wp-prettyphoto<\/code> <\/p>\nVersion 2.9.2<\/code> et le plugin WP prettyPhoto<\/code> Version: 1.6<\/code>. Il y a un petit bug \u00e0 r\u00e9gler sur le plugin avec cette version de WordPresss. Le r\u00e8glement se fait facilement, il faut placer la valeur autoplay sur true<\/code> et donc cocher la checkbox.<\/b><\/p>\nTrue to Autoplay, False not to.<\/code>
\n![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/03\/wp_media_manager_14.jpg\")
<\/p>\n<\/pre>\n
wp-includes\/media.php<\/code>. La modification est simple, \u00e0 l’aide des fonctions wp_get_attachment_image<\/code> et wp_get_attachment_url<\/code>, on va modifier la valeur $output<\/code> en introduisant la balise <\/p>\nrel=\"wp-prettyPhoto\"<\/pre>\n
<a rel="wp-prettyPhoto" href="$file">$img <\/a><\/pre>\n
\r\n\t\r\n\t\t$i = 0;\r\n\r\n\t\tforeach ( $attachments as $id => $attachment ) {\r\n\t\t\t\/* $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false); *\/\r\n\r\n\t\t\t$img = wp_get_attachment_image($id, $size, false);\r\n\t\t\t$file = wp_get_attachment_url($id);\r\n\r\n\r\n\t\t\t$output .= "<{$itemtag} class='gallery-item' >";\r\n\t\t\t\/* $output .= "<{$icontag} class='gallery-icon'> $link <\/{$icontag}>"; *\/\r\n\t\t\t$output .= "<{$icontag} class='gallery-icon'> <a rel="wp-prettyPhoto" href="$file">$img <\/a><\/{$icontag}>"; \r\n\t\t\tif ( $captiontag && trim($attachment->post_excerpt) ) {\r\n\t\t\t\t$output .= "\r\n\t\t\t\t\t<{$captiontag} class='gallery-caption'>\r\n\t\t\t\t\t" . wptexturize($attachment->post_excerpt) . "\r\n\t\t\t\t\t<\/{$captiontag}>";\r\n\t\t\t}\r\n\t\t\t$output .= "<\/{$itemtag}>";\r\n\t\t\tif ( $columns > 0 && ++$i % $columns == 0 )\r\n\t\t\t\t$output .= '<br style="clear: both" \/>';\r\n\t\t}\r\n\r\n\t\t$output .= "\r\n\t\t\t\t<br style='clear: both;' \/>\r\n\t\t\t<\/div>n";\r\n\r\n\t\treturn $output;\r\n\t}\r\n\t\r\n\t\r\n<\/pre>\ngallery<\/code> et dans une vue prettyPhoto. WordPress est donc bien nativement un e vrai outil de photoblogging pour ceux qui en doutaient encore !<\/b><\/p>\n
\n![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/03\/wp_media_manager_15.jpg\")
<\/p>\ndark_rounded<\/code><\/b>
\n![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/03\/wp_media_manager_16.jpg\")
<\/p>\n![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/03\/wp_media_manager_17.jpg\")
<\/p>\nfacebook<\/code><\/b>
\n![\"Wordpress,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/03\/wp_media_manager_18.jpg\")
<\/p>\nrel=\"wp-prettyPhoto\"<\/code> notamment de faire d\u00e9filer les photos de la galerie.<\/p>\nEn savoir plus<\/h2>\n
\n
<\/code>
\n\t\thttp:\/\/codex.wordpress.org\/Gallery_Shortcode<\/a><\/li>\ngallery<\/code>
\n\t\thttp:\/\/graphpaperpress.com\/2008\/05\/31\/photo-galleria-plugin-for-wordpress\/<\/a><\/li>\n
\n\t\thttp:\/\/codex.wordpress.org\/Template_Tags\/wp_get_attachment_link<\/a><\/li>\n
\n\t\thttp:\/\/codex.wordpress.org\/Function_Reference\/wp_get_attachment_image<\/a><\/li>\nwp-prettyphoto<\/code>
\n\t\thttp:\/\/wordpress.org\/extend\/plugins\/wp-prettyphoto\/<\/a><\/li>\nwp-prettyphoto<\/code>
\n\t\thttp:\/\/blog.fusi0n.org\/category\/wp-prettyphoto<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"