WordPress: un widget per mostrare le miniature di una galleria di foto nella sidebar

Wordpress: un widget per mostrare le miniature di una galleriaQuesto 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:

photogallery_be

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