Questo widget è veramente semplicissimo, serve a mostrare in un riquadro le miniature (thumbnails) 64×64 pixel di una qualsiasi galleria di foto (photogallery) nativa di WordPress. L’installazione è immediata, basta includere nel file “functions.php” del tema attivo, il file con il codice che illustrerò qui sotto. Nell’area Aspetto -> widget sarà disponibile il widget: “MS Gallery Thumbs Widget”, è sufficiente trascinarlo nell’area dove lo si desidera posizionare e impostare nell’ordine:
- 1) Titolo
- 2) Post ID (l’ID della pagina o del post che contiene la (o le) galleria
- 3) Il numero di immagini in miniatura che si desidera mostrare
- 4) Il tipo di link all’immagine (Full size: l’immagine a dimensione originale, Gallery size: l’immagine con la dimensione impostata nella galleria)
- 5) La forma della miniatura (Thumbnail shape): con i bordi squadrati (squared), con i bordi arrotondati (rounded) oppure in forma circolare (circle)
Ecco come appare nell’area amministrativa:
Ed ecco dunque il codice del widget:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 | <?php /* * ms_gallery_thumbs.php * * Copyright 2016 Mario Spada <spadamar@spadamar.com> * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation; either version 2 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, * MA 02110-1301, USA. * * */ class ms_gallery_thumbs extends WP_Widget { protected $imgShapeOpts = array('square','circle','rounded corner'); function __construct() { parent::__construct( 'ms_gallery_thumbs', __('MS Gallery Thumbs Widget', 'ms_gallery_thumbs_domain'), array( 'description' => __( 'This widget displays an array of thumbnails 64x64 from a given post ID with one or more galleries attached', 'ms_gallery_thumbs_domain' ), ) ); } // Front-end public function widget( $args, $instance ) { $title = apply_filters( 'widget_title', $instance['title'] ); echo $args['before_widget']; if ( ! empty( $title ) ) echo $args['before_title'] . $title . $args['after_title']; echo $this->_outHtml($instance[ 'postID' ],$instance[ 'imgNums' ],$instance[ 'fullImgSize' ],$instance[ 'imgShape' ]); echo $args['after_widget']; } // Widget Backend public function form( $instance ) { if ( isset( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; } else { $title = __( 'New title', 'ms_gallery_thumbs_domain' ); } if ( isset( $instance[ 'postID' ] ) ) { $postID = (int) $instance[ 'postID' ]; } else { $postID = 1; } if ( isset( $instance[ 'imgNums' ] ) ) { $imgNums = (int) $instance[ 'imgNums' ]; } else { $imgNums = 100; } if ( isset( $instance[ 'fullImgSize' ] ) ) { $fullImgSize = (int) $instance[ 'fullImgSize' ]; } else { $fullImgSize = 0; } $imgShapeOpts = array('square','circle','rounded corner'); if ( isset( $instance[ 'imgShape' ] ) ) { $imgShape = esc_attr( $instance[ 'imgShape' ] ); } else { $imgShape = $this->imgShapeOpts[0]; } // Widget admin form ?> <p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" /></p> <p><label for="<?php echo $this->get_field_id( 'postID' ); ?>"><?php _e( 'Post ID:' ); ?></label> <input class="widefat" id="<?php echo $this->get_field_id( 'postID' ); ?>" name="<?php echo $this->get_field_name( 'postID' ); ?>" type="text" value="<?php echo esc_attr( $postID ); ?>" /></p> <p><label for="<?php echo $this->get_field_id( 'imgNums' ); ?>"><?php _e( 'Image number:' ); ?></label> <input class="widefat" id="<?php echo $this->get_field_id( 'imgNums' ); ?>" name="<?php echo $this->get_field_name( 'imgNums' ); ?>" type="text" value="<?php echo esc_attr( $imgNums ); ?>" /></p> <p><label for="<?php echo $this->get_field_id( 'fullImgSize' ); ?>"><?php _e( 'Linked image size:' ); ?></label> <select class="widefat" id="<?php echo $this->get_field_id( 'fullImgSize' ); ?>" name="<?php echo $this->get_field_name( 'fullImgSize' ); ?>"> <?php if ( $fullImgSize ) { $sel1 = ""; $sel2 = "selected"; } else { $sel1 = "selected"; $sel2 = ""; } ?> <option value='0' <?php echo $sel1; ?>>Gallery size</option><option value='1' <?php echo $sel2; ?>>Full size</option></select></p> <p><label for="<?php echo $this->get_field_id( 'imgShape' ); ?>"><?php _e( 'Thumbnail shape:' ); ?></label> <select class="widefat" id="<?php echo $this->get_field_id( 'imgShape' ); ?>" name="<?php echo $this->get_field_name( 'imgShape' ); ?>"> <?php foreach($this->imgShapeOpts as $opt) { $selected = $opt == $imgShape ? "selected" : ""; echo "<option {$selected}>{$opt}</option>"; } ?> </select></p> <?php } public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; $instance['postID'] = ( ! empty( $new_instance['postID'] ) ) ? intval( $new_instance['postID'] ) : 1; $instance['imgNums'] = ( ! empty( $new_instance['imgNums'] ) ) ? intval( $new_instance['imgNums'] ) : 100; $instance['fullImgSize'] = ( isset( $new_instance['fullImgSize'] ) ) ? intval( $new_instance['fullImgSize'] ) : 0; $instance['imgShape'] = ( isset( $new_instance['imgShape'] ) ) ? esc_attr( $new_instance['imgShape'] ) : $this->imgShapeOpts[0]; return $instance; } private function _get_thumb_info($file_name) { if (empty($file_name)) return array(); $relpathimg = parse_url($file_name, PHP_URL_PATH); $ext = pathinfo($relpathimg, PATHINFO_EXTENSION); $name = pathinfo($relpathimg, PATHINFO_FILENAME); $path = pathinfo($relpathimg, PATHINFO_DIRNAME); $size = substr(strrchr($name,'-'),1); $oname = substr($name,0,-strlen($size)-1); return array("ext" => $ext, "name" => $name, "path" => $path, "orig-name" => $oname); } private function _outHtml($id,$imgnum=100,$fullSize=0,$imgShape) { if ($imgShape == $this->imgShapeOpts[0]) { $cssThumbImg = 'border-radius:0%'; } elseif($imgShape ==$this->imgShapeOpts[1]) { $cssThumbImg = 'border-radius:50%'; } else { $cssThumbImg = 'border-radius:15%'; } $thumbPostName = "-150x150"; $i = 1; $html = ""; $galleries = get_post_galleries_images( $id ); $html .= "<div class='ms-gallery-thumbs' style='display:block'>\n"; foreach($galleries as $key => $imgs){ foreach($imgs as $img){ if ($i <= $imgnum) { $r = $this->_get_thumb_info($img); $filename = $r['path']."/".$r['orig-name'].$thumbPostName.".".$r['ext']; $fullSizeFilename = $fullSize ? $r['path']."/".$r['orig-name'].".".$r['ext'] : $r['path']."/".$r['name'].".".$r['ext']; if (file_exists($_SERVER["DOCUMENT_ROOT"].$filename)) { $html .= "<a rel='lightbox[gallery".$id."]' href='".$fullSizeFilename."'><img src='".$filename."' style='height:64px;width:64px;float:left;margin:5px;{$cssThumbImg};overflow:hidden;'></a>\n"; $i++; } } } } $html .= "</div>"; return $html; } } // End Class // Register and load the widget function ms_gallery_thumbs_load_widget() { register_widget( 'ms_gallery_thumbs' ); } add_action( 'widgets_init', 'ms_gallery_thumbs_load_widget' ); ?> |
Se è installato il plugin wp-jquery-lightbox facendo click sulle miniature esse verranno aperte con gli effetti delle gallerie lightbox, perché le miniature sono già preimpostate con la proprietà CSS: rel='lightbox[galleryID]'
Per installare questo widget è sufficiente copiare ed incollare il codice proposto nel file “functions.php” del tema attivo, altrimenti per maggiore ordine è possibile copiarlo ed incollarlo in un nuovo file, p.e.: “ms_gallery_thumbs.php” che dovrà essere posto nella directory del tema attivo e poi includerlo tramite questa istruzione: require_once('ms_gallery_thumbs.php');
nel file “functions.php”
E’ doveroso notare che il codice individua il nome dell’immagine originale tramite la codifica standard delle thumbnails generate da WordPress. E’ quindi evidente che, se per qualche motivo queste thumbnails non sono state correttamente generate, il widget non sarà in grado di mostrare le immagini.
Riferimenti:
Function Reference/get post galleries images