/** * Return a HTML representation of the image gallery * * The new gallery disables the old perrow control, and automatically fit the gallery to the available space in the browser. */ private function renderGallery() { global $wgBlankImgUrl; wfProfileIn(__METHOD__); // do not render empty gallery if (empty($this->mImages)) { wfProfileOut(__METHOD__); return ''; } $skin = RequestContext::getMain()->getSkin(); $thumbSize = $this->mWidths; $orientation = $this->getParam('orientation'); $ratio = WikiaPhotoGalleryHelper::getRatioFromOption($orientation); $crop = $this->mCrop; //calculate height of the biggest image $maxHeight = 0; $fileObjectsCache = array(); $heights = array(); $widths = array(); $thumbParams = array(); if (F::app()->checkSkin('wikiamobile')) { $html = $this->renderWikiaMobileMediaGroup(); } else { // loop throught the images and get height of the tallest one foreach ($this->mImages as $imageData) { $img = $this->getImage($imageData[0]); $fileObjectsCache[] = $img; if (!empty($img)) { // get thumbnail limited only by given width if ($img->width > $thumbSize) { $imageHeight = round($img->height * ($thumbSize / $img->width)); $imageWidth = $thumbSize; } else { $imageHeight = $img->height; $imageWidth = $img->width; } $heights[] = $imageHeight; $widths[] = $imageWidth; if ($imageHeight > $maxHeight) { $maxHeight = $imageHeight; } } } // calculate height based on gallery width $height = round($thumbSize / $ratio); if ($orientation == 'none') { $this->enableCropping($crop = false); // use the biggest height found if ($maxHeight > 0) { $height = $maxHeight; } // limit height (RT #59355) $height = min($height, $thumbSize); // recalculate dimensions (RT #59355) foreach ($this->mImages as $index => $image) { if (!empty($heights[$index]) && !empty($widths[$index])) { //fix #59355, min() added to let borders wrap images with smaller width //fix #63886, round ( $tmpFloat ) != floor ( $tmpFloat ) added to check if thumbnail will be generated from proper width $tmpFloat = $widths[$index] * $height / $heights[$index]; $widths[$index] = min($widths[$index], floor($tmpFloat)); $heights[$index] = min($height, $heights[$index]); if (round($tmpFloat) != floor($tmpFloat)) { $heights[$index]--; } } else { $widths[$index] = $thumbSize; $heights[$index] = $height; } } } $useBuckets = $this->getParam('buckets'); $useRowDivider = $this->getParam('rowdivider'); $captionColor = $this->getParam('captiontextcolor'); $borderColor = $this->getParam('bordercolor'); $perRow = $this->mPerRow > 0 ? $this->mPerRow : 'dynamic'; $position = $this->getParam('position'); $captionsPosition = $this->getParam('captionposition'); $captionsAlign = $this->getParam('captionalign'); $captionsSize = $this->getParam('captionsize'); $captionsColor = !empty($captionColor) ? $captionColor : null; $spacing = $this->getParam('spacing'); $borderSize = $this->getParam('bordersize'); $borderColor = !empty($borderColor) ? $borderColor : 'accent'; $isTemplate = isset($this->mData['params']['source']) && $this->mData['params']['source'] == "template"; $hash = $this->mData['hash']; $id = 'gallery-' . $this->mData['id']; $showAddButton = $this->mShowAddButton == true; $hideOverflow = $this->getParam('hideoverflow'); if (in_array($borderColor, array('accent', 'color1'))) { $borderColorClass = " {$borderColor}"; } else { $borderColorCSS = " border-color: {$borderColor};"; if ($captionsPosition == 'within') { $captionsBackgroundColor = $borderColor; } } $html = Xml::openElement('div', array('id' => $id, 'hash' => $hash, 'class' => 'wikia-gallery' . ($isTemplate ? ' template' : null) . " wikia-gallery-position-{$position}" . " wikia-gallery-spacing-{$spacing}" . " wikia-gallery-border-{$borderSize}" . " wikia-gallery-captions-{$captionsAlign}" . " wikia-gallery-caption-size-{$captionsSize}")); // render gallery caption (RT #59241) if ($this->mCaption !== false) { $html .= Xml::openElement('div', array('class' => 'wikia-gallery-caption')) . $this->mCaption . Xml::closeElement('div'); } $itemWrapperWidth = $thumbSize; $thumbWrapperHeight = $height; //compensate image wrapper width depending on the border size switch ($borderSize) { case 'large': $itemWrapperWidth += 10; //5px * 2 $thumbWrapperHeight += 10; break; case 'medium': $itemWrapperWidth += 4; //2px * 2 $thumbWrapperHeight += 4; break; case 'small': $itemWrapperWidth += 2; //1px * 2 $thumbWrapperHeight += 2; break; } //adding more width for the padding $outeritemWrapperWidth = $itemWrapperWidth + 20; $rowDividerCSS = ''; if ($useRowDivider) { $rowDividerCSS = "height: " . ($thumbWrapperHeight + 100) . "px; padding: 30px 15px 20px 15px; margin: 0px; border-bottom: solid 1px #CCCCCC;"; } if ($useBuckets) { $itemSpanStyle = "width:{$outeritemWrapperWidth}px; " . ($useRowDivider ? $rowDividerCSS : 'margin: 4px;'); $itemDivStyle = "background-color: #f9f9f9; height:{$thumbWrapperHeight}px; text-align: center; border: solid 1px #CCCCCC; padding: " . ($outeritemWrapperWidth - $thumbWrapperHeight) / 2 . "px 5px;"; } else { $itemSpanStyle = "width:{$itemWrapperWidth}px; {$rowDividerCSS}"; $itemDivStyle = "height:{$thumbWrapperHeight}px;"; } foreach ($this->mImages as $index => $imageData) { if ($perRow != 'dynamic' && $index % $perRow == 0) { $html .= Xml::openElement('div', array('class' => 'wikia-gallery-row')); } $html .= Xml::openElement('span', array('class' => 'wikia-gallery-item', 'style' => $itemSpanStyle)); $html .= Xml::openElement('div', array('class' => 'thumb', 'style' => $itemDivStyle)); $image = array(); // let's properly scale image (don't make it bigger than original size) /** * @var $imageTitle Title * @var $fileObject LocalFile */ $imageTitle = $imageData[0]; $fileObject = $fileObjectsCache[$index]; $image['height'] = $height; $image['width'] = $thumbSize; $image['caption'] = $imageData[1]; if (!is_object($fileObject) || $imageTitle->getNamespace() != NS_FILE) { $image['linkTitle'] = $image['titleText'] = $imageTitle->getText(); $image['thumbnail'] = false; $image['link'] = Skin::makeSpecialUrl("Upload", array('wpDestFile' => $image['linkTitle'])); $image['classes'] = 'image broken-image accent new'; } else { $thumbParams = WikiaPhotoGalleryHelper::getThumbnailDimensions($fileObject, $thumbSize, $height, $crop); $image['thumbnail'] = $fileObject->createThumb($thumbParams['width'], $thumbParams['height']); $image['height'] = $orientation == 'none' ? $heights[$index] : min($thumbParams['height'], $height); $imgHeightCompensation = ($height - $image['height']) / 2; if ($imgHeightCompensation > 0) { $image['heightCompensation'] = $imgHeightCompensation; } $image['width'] = min($widths[$index], $thumbSize); //Fix #59914, shared.css has auto-alignment rules /*$imgWidthCompensation = ($thumbSize - $image['width']) / 2; if ($imgHeightCompensation > 0) $image['widthCompensation'] = $imgWidthCompensation;*/ $image['link'] = $imageData[2]; $linkAttribs = $this->parseLink($imageTitle->getLocalUrl(), $imageTitle->getText(), $image['link']); $image['link'] = $linkAttribs['href']; $image['linkTitle'] = $linkAttribs['title']; $image['classes'] = $linkAttribs['class']; $image['bytes'] = $fileObject->getSize(); if ($this->mParser && $fileObject->getHandler()) { $fileObject->getHandler()->parserTransformHook($this->mParser, $fileObject); } } wfRunHooks('GalleryBeforeRenderImage', array(&$image)); //see Image SEO project $wrapperId = preg_replace('/[^a-z0-9_]/i', '-', Sanitizer::escapeId($image['linkTitle'])); $html .= Xml::openElement('div', array('class' => 'gallery-image-wrapper' . (!$useBuckets && !empty($borderColorClass) ? $borderColorClass : null), 'id' => $wrapperId, 'style' => 'position: relative;' . ($useBuckets ? " width: {$itemWrapperWidth}px; border-style: none;" : " height:{$image['height']}px; width:{$image['width']}px;") . (!empty($image['heightCompensation']) ? " top:{$image['heightCompensation']}px;" : null) . (!empty($borderColorCSS) ? $borderColorCSS : null))); $imgStyle = null; # Fix 59913 - thumbnail goes as <img /> not as <a> background. if ($orientation != 'none') { # Fix 65861 - gallery fix, now images are put inside <p> tags for cropping. # p not div for W3C validation $html .= Xml::openElement('p', array('style' => "margin:0px; height:{$image['height']}px;" . ($useBuckets ? '' : " width:{$image['width']}px;") . "overflow: hidden; display: block")); # margin calculation for image positioning if ($thumbParams['height'] > $image['height']) { $tempTopMargin = -1 * ($thumbParams['height'] - $image['height']) / 2; } else { unset($tempTopMargin); } if ($thumbParams['width'] > $image['width']) { $tempLeftMargin = -1 * ($thumbParams['width'] - $image['width']) / 2; } else { unset($tempLeftMargin); } $imgStyle = (!empty($tempTopMargin) ? " margin-top:" . $tempTopMargin . "px;" : null) . (!empty($tempLeftMargin) ? " margin-left:" . $tempLeftMargin . "px;" : null); } $linkAttribs = array('class' => $image['classes'], 'href' => $image['link'], 'title' => $image['linkTitle'] . (isset($image['bytes']) ? ' (' . $skin->formatSize($image['bytes']) . ')' : ""), 'style' => !empty($image['thumbnail']) ? '' : "height:{$image['height']}px;"); if (!empty($image['thumbnail'])) { if (WikiaFileHelper::isFileTypeVideo($fileObject)) { $thumbHtml = WikiaFileHelper::videoPlayButtonOverlay($image['width'], $image['height']); $videoOverlay = WikiaFileHelper::videoInfoOverlay($image['width'], $image['linkTitle']); $linkAttribs['data-video-name'] = $image['linkTitle']; $linkAttribs['class'] .= ' video'; } else { $thumbHtml = ''; $videoOverlay = ''; $linkAttribs['data-image-name'] = $image['linkTitle']; } $imgAttribs = array('style' => (!empty($image['titleText']) ? " line-height:{$image['height']}px;" : null) . $imgStyle, 'src' => $image['thumbnail'] ? $image['thumbnail'] : null, 'title' => $image['linkTitle'] . (isset($image['bytes']) ? ' (' . $skin->formatSize($image['bytes']) . ')' : ""), 'class' => 'thumbimage'); if (!empty($image['data-caption'])) { $imgAttribs['data-caption'] = $image['data-caption']; } if (isset($image['thumbnail-classes']) && isset($image['thumbnail-src']) && isset($image['thumbnail-onload'])) { $thumbHtml .= '<noscript>' . Xml::openElement('img', $imgAttribs) . '</noscript>'; $imgAttribs['class'] .= ' ' . $image['thumbnail-classes']; $imgAttribs['data-src'] = $imgAttribs['src']; $imgAttribs['src'] = $image['thumbnail-src']; $imgAttribs['onload'] = $image['thumbnail-onload']; } $thumbHtml .= Xml::openElement('img', $imgAttribs); $thumbHtml .= $videoOverlay; } else { $thumbHtml = $image['linkTitle']; } $html .= Xml::openElement('a', $linkAttribs); $html .= $thumbHtml; $html .= Xml::closeElement('a'); if ($orientation != 'none') { $html .= Xml::closeElement('p'); } if ($captionsPosition == 'below') { $html .= Xml::closeElement('div'); $html .= Xml::closeElement('div'); } if (!empty($image['caption'])) { $html .= Xml::openElement('div', array('class' => 'lightbox-caption' . (!empty($borderColorClass) && $captionsPosition == 'within' ? $borderColorClass : null), 'style' => ($captionsPosition == 'below' ? "width:{$thumbSize}px;" : null) . (!empty($captionsColor) ? " color:{$captionsColor};" : null) . (!empty($captionsBackgroundColor) ? " background-color:{$captionsBackgroundColor}" : null) . ($useBuckets ? " margin-top: 0px;" : '') . (!empty($hideOverflow) ? " overflow: hidden" : null))); $html .= $image['caption']; $html .= Xml::closeElement('div'); } if ($captionsPosition == 'within') { $html .= Xml::closeElement('div'); $html .= Xml::closeElement('div'); } $html .= Xml::closeElement('span'); // /span.wikia-gallery-item if ($perRow != 'dynamic' && ($index % $perRow == $perRow - 1 || $index == count($this->mImages) - 1)) { $html .= Xml::closeElement('div'); } } // "Add image to this gallery" button (this button is shown by JS only in Monaco) if ($showAddButton) { if ($perRow == 'dynamic') { $html .= Xml::element('br'); } // add button for Monaco $html .= Xml::openElement('span', array('class' => 'wikia-gallery-add noprint', 'style' => 'display: none')); $html .= Xml::element('img', array('src' => $wgBlankImgUrl, 'class' => 'sprite-small add')); $html .= Xml::element('a', array('href' => '#'), wfMsgForContent('wikiaPhotoGallery-viewmode-addphoto')); $html .= Xml::closeElement('span'); // add button for Oasis $html .= Xml::openElement('a', array('class' => 'wikia-photogallery-add wikia-button noprint', 'style' => 'display: none')); $html .= Xml::element('img', array('src' => $wgBlankImgUrl, 'class' => 'sprite photo', 'width' => 26, 'height' => 16)); $html .= wfMsgForContent('wikiaPhotoGallery-viewmode-addphoto'); $html .= Xml::closeElement('a'); } $html .= Xml::closeElement('div'); } wfProfileOut(__METHOD__); return $html; }
/** * @param array $options * @return mixed|string * @throws MWException */ function toHtml($options = array()) { if (count(func_get_args()) == 2) { throw new MWException(__METHOD__ . ' called in the old style'); } if (!empty(F::app()->wg->RTEParserEnabled)) { return $this->renderAsThumbnailImage($options); } wfProfileIn(__METHOD__); $alt = empty($options['alt']) ? '' : $options['alt']; $useThmbnailInfoBar = false; /* * in order to disable RDF metadata in video thumbnails * pass disableRDF parameter to toHtml method */ $useRDFData = !empty($options['disableRDF']) && $options['disableRDF'] == true ? false : true; /** * Note: if title is empty and alt is not, make the title empty, don't * use alt; only use alt if title is not set * wikia change, Inez */ $title = !isset($options['title']) ? $alt : $options['title']; $query = empty($options['desc-query']) ? '' : $options['desc-query']; if (!empty($options['custom-url-link'])) { $linkAttribs = array('href' => $options['custom-url-link']); if (!empty($options['title'])) { $linkAttribs['title'] = $options['title']; } } elseif (!empty($options['custom-title-link'])) { $title = $options['custom-title-link']; $linkAttribs = array('href' => $title->getLinkUrl(), 'title' => empty($options['title']) ? $title->getFullText() : $options['title']); } elseif (!empty($options['desc-link'])) { $linkAttribs = $this->getDescLinkAttribs(empty($options['title']) ? null : $options['title'], $query); if (F::app()->checkSkin(array('oasis', 'wikiamobile'))) { $linkAttribs['data-video-name'] = $this->file->getTitle()->getText(); $linkAttribs['href'] = $this->file->getTitle()->getLocalURL(); if (!empty($options['id'])) { $linkAttribs['id'] = $options['id']; } } } elseif (!empty($options['file-link'])) { $linkAttribs = array('href' => $this->file->getTitle()->getLocalURL()); } else { $linkAttribs = array(); } if (isset($options['linkAttribs']) && is_array($options['linkAttribs'])) { $linkAttribs = array_merge($linkAttribs, $options['linkAttribs']); } $linkAttribs['class'] = empty($linkAttribs['class']) ? 'video' : $linkAttribs['class'] . ' video'; if ($useRDFData) { // bugId: #46621 $linkAttribs['itemprop'] = 'video'; $linkAttribs['itemscope'] = ''; $linkAttribs['itemtype'] = 'http://schema.org/VideoObject'; } $attribs = array('alt' => $alt, 'src' => !empty($options['src']) ? $options['src'] : $this->url, 'width' => $this->width, 'height' => $this->height, 'data-video' => $this->file->getTitle()->getText()); if ($useRDFData) { $attribs['itemprop'] = 'thumbnail'; } if (!empty($options['usePreloading'])) { $attribs['data-src'] = $this->url; } if ($this->file instanceof OldLocalFile) { $archive_name = $this->file->getArchiveName(); if (!empty($archive_name)) { $linkAttribs['href'] .= '?t=' . $this->file->getTimestamp(); $linkAttribs['data-timestamp'] = $this->file->getTimestamp(); } } if (!empty($options['valign'])) { $attribs['style'] = "vertical-align: {$options['valign']}"; } $attribs['class'] = 'Wikia-video-thumb'; if (!empty($options['img-class'])) { $attribs['class'] .= ' ' . $options['img-class']; } if ($this->file instanceof WikiaLocalFile || $this->file instanceof WikiaForeignDBFile) { $extraBorder = $this->file->addExtraBorder($this->width); } if (!empty($extraBorder)) { if (!isset($attribs['style'])) { $attribs['style'] = ''; } $attribs['style'] .= 'border-top: 15px solid black; border-bottom: ' . $extraBorder . 'px solid black;'; } if (isset($options['imgExtraStyle'])) { if (!isset($attribs['style'])) { $attribs['style'] = ''; } $attribs['style'] .= $options['imgExtraStyle']; } if ($useThmbnailInfoBar || isset($options['duration']) && $options['duration'] == true) { $duration = $this->file->getHandler()->getFormattedDuration(); } if (isset($options['constHeight'])) { $this->appendHtmlCrop($linkAttribs, $options); } $html = $linkAttribs && isset($linkAttribs['href']) ? Xml::openElement('a', $linkAttribs) : ''; if (isset($duration) && !empty($duration)) { $timerProp = array('class' => 'timer'); if ($useRDFData) { $timerProp['itemprop'] = 'duration'; } $html .= Xml::element('div', $timerProp, $duration); } $playButtonHeight = isset($options['constHeight']) && $this->height > $options['constHeight'] ? $options['constHeight'] : $this->height; if (!empty($extraBorder)) { $playButtonHeight += $extraBorder * 2; } $html .= WikiaFileHelper::videoPlayButtonOverlay($this->width, $playButtonHeight); $html .= Xml::element('img', $attribs, '', true); $html .= WikiaFileHelper::videoInfoOverlay($this->width, $this->file->getTitle()); $html .= $linkAttribs && isset($linkAttribs['href']) ? Xml::closeElement('a') : ''; if ($useThmbnailInfoBar) { $titleBar = array("class" => "Wikia-video-title-bar", "style" => "width: {$this->width}px; margin-left: -{$this->width}px;"); $videoTitle = $attribs['data-video']; $infoVars = array(); $userName = $this->file->getUser(); if (!is_null($userName)) { $link = AvatarService::renderLink($userName); $infoVars["author"] = wfMsgExt('oasis-content-picture-added-by', array('parsemag'), $link, $userName); } else { $infoVars["author"] = ""; } if (!empty($duration)) { $infoVars["duration"] = '(' . $duration . ')'; } else { $infoVars["duration"] = ''; } if (!isset($options['img-class'])) { $options['img-class'] = ""; } if ($options['img-class'] != "thumbimage") { $html .= Xml::openElement('span', $titleBar); $html .= Xml::element('span', array('class' => 'title'), $videoTitle); $html .= Xml::element('span', array('class' => 'info'), '{author} {duration}'); $html .= Xml::closeElement('span'); } foreach ($infoVars as $key => $value) { $html = str_replace('{' . $key . '}', $value, $html); } } //give extensions a chance to modify the markup wfRunHooks('ThumbnailVideoHTML', array($options, $linkAttribs, $attribs, $this->file, &$html)); wfProfileOut(__METHOD__); return $html; }
?> " alt="<?php echo htmlspecialchars($row['title']); ?> "<?php if (!empty($row['dimensions']['w'])) { echo ' width="' . $row['dimensions']['w'] . '"'; } if (!empty($row['dimensions']['h'])) { echo ' height="' . $row['dimensions']['h'] . '"'; } ?> /> <?php if ($row['useVideoOverlay'] == true) { echo WikiaFileHelper::videoInfoOverlay($row['dimensions']['w'], $row['data-ref']); } ?> </a> </span> <?php } ?> <div class="title"><a href="<?php echo $row['url']; ?> " class="<?php echo $row['class']; ?> " title="<?php echo htmlspecialchars($row['title']);