YaWK  24.1
Yet another WebKit
gallery.php
Go to the documentation of this file.
1 <?php
2 namespace YAWK\WIDGETS\GALLERY\IMAGES
3 {
4  /**
5  * @details<b>Embed plugin: photo gallery</b>
6  *
7  * <p>This is the widget to the gallery plugin. With this widget you can embed image galleries
8  * that you've created before using the gallery plugin. Simply set the ID of the photo gallery you
9  * would like to embed. </p>
10  *
11  *
12  * @author Daniel Retzl <[email protected]>
13  * @copyright 2018 Daniel Retzl
14  * @version 1.0.0
15  * @brief Embed a photo gallery on your website.
16  */
17  class gallery extends \YAWK\widget
18  {
19  /** @param object global widget object data */
20  public $widget = '';
21  /** @param int Gallery ID */
22  public $galleryID = '';
23  /** @param string Title that will be shown above widget */
24  public $galleryHeading = '';
25  /** @param string Subtext will be displayed beside title */
26  public $gallerySubtext = '';
27 
28  /** @param int Image Item ID */
29  public $itemID = '';
30  /** @param string Image filename */
31  public $filename = '';
32  /** @param string Image Description */
33  public $itemTitle = '';
34  /** @param string Image Author (Copyright Notice) */
35  public $itemAuthor = '';
36  /** @param string Image Author URL */
37  public $itemAuthorUrl = '';
38  /** @param string Headline above widget */
39  public $headline = '';
40 
41  /** @param bool galleryNavOnTouchDevices If true, the left and right navigation arrows which appear on mouse hover when viewing image sets will always be visible on devices which support touch. */
42  public $galleryNavOnTouchDevices = false;
43  /** @param string The text displayed below the caption when viewing an image set. The default text shows the current image number and the total number of images in the set. */
44  public $galleryAlbumLabel = 'Image %1 of %2';
45  /** @param bool If true, prevent the page from scrolling while Lightbox is open. This works by settings overflow hidden on the body. */
46  public $galleryDisableScrolling = false;
47  /** @param string The time it takes for the Lightbox container and overlay to fade in and out, in milliseconds. */
48  public $galleryFadeDuration = '600';
49  /** @param bool If true, resize images that would extend outside of the viewport so they fit neatly inside of it. This saves the user from having to scroll to see the entire image. */
50  public $galleryFitImagesInViewport = true;
51  /** @param string The time it takes for the image to fade in once loaded, in milliseconds. */
52  public $galleryImageFadeDuration = '600';
53  /** @param string If set, the image width will be limited to this number, in pixels. Aspect ratio will not be maintained. */
54  public $galleryMaxWidth = '';
55  /** @param string If set, the image height will be limited to this number, in pixels. Aspect ratio will not be maintained. */
56  public $galleryMaxHeight = '';
57  /** @param string If set, the thumbnail image width will be limited to this number, in pixels. Aspect ratio will not be maintained. */
58  public $galleryTnWidth = '';
59  /** @param string If set, the thumbnail image height will be limited to this number, in pixels. Aspect ratio will not be maintained. */
60  public $galleryTnHeight = '';
61  /** @param string The distance from top of viewport that the Lightbox container will appear, in pixels */
62  public $galleryPositionFromTop = '50';
63  /** @param string The time it takes for the Lightbox container to animate its width and height when transition between different size images, in milliseconds. */
64  public $galleryResizeDuration = '700';
65  /** @param bool If false, the text indicating the current image number and the total number of images in set (Ex. "image 2 of 4") will be hidden. */
66  public $galleryShowImageNumberLabel = true;
67  /** @param bool If true, when a user reaches the last image in a set, the right navigation arrow will appear and they will be to continue moving forward which will take them back to the first image in the set. */
68  public $galleryWrapAround = false;
69 
70  /** @param int How many pictures should be drawn per row? */
71  public $galleryLayoutRows = 3;
72  /** @param bool true|false Shuffle Images */
73  public $galleryShuffle = false;
74 
75  /** @param string <img Width HTML Markup */
76  public $galleryWidthMarkup = '';
77  /** @param string Image Class */
78  public $galleryImageClass = 'img-responsive img-rounded hvr-grow';
79 
80 
81  /**
82  * @brief Load all widget settings from database and fill object
83  * @param object $db Database Object
84  * @brief Load all widget settings on object init.
85  */
86  public function __construct($db)
87  {
88  // load this widget settings from db
89  $this->widget = new \YAWK\widget();
90  $settings = $this->widget->getWidgetSettingsArray($db);
91  foreach ($settings as $property => $value) {
92  $this->$property = $value;
93  }
94  }
95 
96  /**
97  * @brief Print all object data
98  * @brief (for development and testing purpose)
99  */
100  public function printObject()
101  {
102  echo "<pre>";
103  print_r($this);
104  echo "</pre>";
105  }
106 
107  /**
108  * @brief Init Gallery and load methods
109  * @brief load Javascript and draw image gallery
110  */
111  public function init($db)
112  {
113  $this->loadJavascript();
114  $this->drawImageGallery($db);
115  }
116 
117  /**
118  * @brief Check if lightbox asset is loaded and set lightbox options
119  * @brief check lightbox asset and set options
120  */
121  public function loadJavascript()
122  {
123  // check if gallery max width is set
124  if (isset($this->galleryMaxWidth) && (empty($this->galleryMaxWidth)))
125  { // nope, no markup needed
126  $maxWidthMarkup = '';
127  }
128  else
129  { // set gallery markup
130  $maxWidthMarkup = "
131  'maxWidth': $this->galleryMaxWidth,";
132  }
133  echo "
134  <script type=\"text/javascript\">
135  lightbox.option({
136  'alwaysShowNavOnTouchDevices': $this->galleryNavOnTouchDevices,
137  'albumLabel': \"$this->galleryAlbumLabel\",
138  'disableScrolling': $this->galleryDisableScrolling,
139  'fadeDuration': $this->galleryFadeDuration,
140  'fitImagesInViewport': $this->galleryFitImagesInViewport,
141  'imageFadeDuration': $this->galleryImageFadeDuration,$maxWidthMarkup
142  'positionFromTop': $this->galleryPositionFromTop,
143  'resizeDuration': $this->galleryResizeDuration,
144  'showImageNumberLabel': $this->galleryShowImageNumberLabel,
145  'wrapAround': $this->galleryWrapAround
146  });
147  </script>";
148  }
149 
150 
151  /**
152  * @brief Draw the gallery
153  * @param db object Database object
154  * @brief (for development and testing purpose)
155  */
156  public function drawImageGallery($db)
157  { /** @param $db \YAWK\db **/
158  if (!isset($this->galleryID) || (empty($this->galleryID)))
159  {
160  echo "Error: unable to load photo gallery because there is no gallery selected.";
161  }
162  if ($res = $db->query("SELECT folder from {plugin_gallery} WHERE id = '".$this->galleryID."'"))
163  {
164  while ($row = mysqli_fetch_assoc($res))
165  { // check if shuffle is enabled
166  if (isset($this->galleryShuffle) && ($this->galleryShuffle === 'true'))
167  { // randomize pictures
168  $order = "ORDER BY RAND()";
169  }
170  else
171  { // order by sortation
172  $order = "ORDER BY sort ASC";
173  }
174  if (!$getPreviewImages = $db->query("SELECT id, galleryID, sort, filename, title, author, authorUrl
175  from {plugin_gallery_items}
176  WHERE galleryID = '".$this->galleryID."' $order"))
177  { // store info msg, if files could not be retrieved
178  $previewError = "Sorry, could not get preview images";
179  }
180  if (isset($previewError))
181  { // if files could not be loaded from db
182  echo $previewError;
183  }
184  else
185  {
186  // prepare loop vars
187  $count = 0;
188  $divider = 3;
189  /** @param $widget \YAWK\widget */
190  // get headline
191  $this->headline = $this->getHeading($this->galleryHeading, $this->gallerySubtext);
192  // draw headline
193  echo $this->headline;
194  echo '<div class="container-fluid">
195  <div class="row text-center">';
196 
197  // check gallery layout (how many cols per row)
198  if ($this->galleryLayoutRows === "1")
199  {
200  $col = "col-md-12";
201  $divider = 1;
202  }
203  elseif ($this->galleryLayoutRows === "2")
204  {
205  $col = "col-md-6";
206  $divider = 2;
207  }
208  elseif ($this->galleryLayoutRows === "3")
209  {
210  $col = "col-md-4";
211  $divider = 3;
212  }
213  elseif ($this->galleryLayoutRows === "4")
214  {
215  $col = "col-md-3";
216  $divider = 4;
217  }
218  elseif ($this->galleryLayoutRows === "6")
219  {
220  $col = "col-md-2";
221  $divider = 6;
222  }
223  elseif ($this->galleryLayoutRows === "12")
224  {
225  $col = "col-md-1";
226  $divider = 12;
227  }
228  else
229  {
230  $col = "col-md-4";
231  }
232 
233  // check thumbnail width
234  if (isset($this->galleryTnWidth) && (!empty($this->galleryTnWidth)))
235  { // set tn width markup
236  $this->galleryWidthMarkup = "width=\"$this->galleryTnWidth\" ";
237  }
238  else
239  { // no width markup needed
240  $this->galleryWidthMarkup = '';
241  }
242 
243  foreach ($getPreviewImages as $property => $image)
244  { // display preview images
245  for ($i = 0; $i < mb_strlen($property); $i++)
246  {
247  $this->itemID = $image['id'];
248  $this->sort = $image['sort'];
249  $this->filename = $image['filename'];
250  $this->itemTitle = $image['title'];
251  $this->itemAuthor = $image['author'];
252  $this->itemAuthorUrl = $image['authorUrl'];
253  // $rnd = uniqid();
254 
255  echo "
256  <div class=\"$col text-center\" id=\"imgCol-".$this->itemID."\">
257  <a href=\"$row[folder]/$this->filename\" data-lightbox=\"$this->galleryID\" data-title=\"$this->itemTitle\"><img ".$this->galleryWidthMarkup."class=\"$this->galleryImageClass\" id=\"img-$this->itemID\" title=\"$this->itemTitle\" src=\"$row[folder]/$this->filename\"></a><br><br>
258  </div>
259  ";
260 
261  $count++;
262 
263  // close tag, but never before the first run
264  if ($count > 1)
265  {
266  if($count % $divider == 0) echo '
267  </div> <!-- end row -->
268 
269  <div class="row text-center">';
270 
271  }
272  }
273  }
274  echo "</div></div>";
275  }
276  }
277  }
278  }
279  }
280 }
281 ?>
YAWK\WIDGETS\GALLERY\IMAGES\gallery
Embed a photo gallery on your website.
Definition: gallery.php:17
YAWK\WIDGETS\GALLERY\IMAGES\gallery\drawImageGallery
drawImageGallery($db)
Draw the gallery.
Definition: gallery.php:155
YAWK\WIDGETS\GALLERY\IMAGES\gallery\printObject
printObject()
Print all object data.
Definition: gallery.php:99
YAWK\WIDGETS\GALLERY\IMAGES\gallery\init
init($db)
Init Gallery and load methods.
Definition: gallery.php:110
YAWK\WIDGETS\GALLERY\IMAGES\gallery\loadJavascript
loadJavascript()
Check if lightbox asset is loaded and set lightbox options.
Definition: gallery.php:120
YAWK\WIDGETS\GALLERY\IMAGES\gallery\__construct
__construct($db)
Load all widget settings from database and fill object.
Definition: gallery.php:85
YAWK\widget
Widgets are small, useful tools that you can include everywhere in your website.
Definition: widget.php:22
YAWK\widget\getWidgetSettingsArray
getWidgetSettingsArray($db)
Get widget settings and return it as array.
Definition: widget.php:69
YAWK\widget\getHeading
getHeading($heading, $subtext)
Get widget heading and subtext, return headline.
Definition: widget.php:669
$i
$i
Definition: gallery.php:161
$settings
if(isset($_POST['save'])) $settings
Definition: settings-backend.php:46
$col
$col
Definition: index.php:79
$value
$value
Definition: widget-edit.php:244