/**
* Constructs HTML for the tutorial (laboriously), including an imagemap for the clickable "Help desk" button.
*
* @param MediaTransformOutput $thumb
* @param String|null $campaign Upload Wizard campaign for which the tutorial should be displayed.
*
* @return String HTML representing the image, with clickable helpdesk button
*/
public static function getImageHtml(MediaTransformOutput $thumb, $campaign = null)
{
$helpDeskUrl = wfMessage('mwe-upwiz-help-desk-url')->text();
// Per convention, we may be either using an absolute URL or a wiki page title in this UI message
if (preg_match('/^(?:' . wfUrlProtocols() . ')/', $helpDeskUrl)) {
$helpDeskHref = $helpDeskUrl;
} else {
$helpDeskTitle = Title::newFromText($helpDeskUrl);
$helpDeskHref = $helpDeskTitle ? $helpDeskTitle->getLocalURL() : '#';
}
$buttonCoords = UploadWizardConfig::getSetting('tutorialHelpdeskCoords', $campaign);
$useMap = $buttonCoords !== false && trim($buttonCoords) != '';
$imgAttributes = array('src' => $thumb->getUrl(), 'width' => $thumb->getWidth(), 'height' => $thumb->getHeight());
if ($useMap) {
$imgAttributes['usemap'] = '#' . self::IMAGEMAP_ID;
}
// here we use the not-yet-forgotten HTML imagemap to add a clickable area to the tutorial image.
// we could do more special effects with hovers and images and such, not to mention SVG scripting,
// but we aren't sure what we want yet...
$imgHtml = Html::element('img', $imgAttributes);
if ($useMap) {
$areaAltText = wfMessage('mwe-upwiz-help-desk')->text();
$area = Html::element('area', array('shape' => 'rect', 'coords' => $buttonCoords, 'href' => $helpDeskHref, 'alt' => $areaAltText, 'title' => $areaAltText));
$imgHtml = Html::rawElement('map', array('id' => self::IMAGEMAP_ID, 'name' => self::IMAGEMAP_ID), $area) . $imgHtml;
}
return $imgHtml;
}
/**
* Set urls to be used for <picture> tags. Sets both thumbnails in the original format (jpeg, png, etc),
* and WebP to be used if the browser supports it.
* @param WikiaController $controller
* @param MediaTransformOutput $thumb
*/
public static function setPictureTagInfo(WikiaController $controller, MediaTransformOutput $thumb)
{
$file = $thumb->file;
$fullSizeDimension = max($thumb->getWidth(), $thumb->getHeight());
$smallSizeDimension = $fullSizeDimension * self::SMALL_THUMB_SIZE;
$useWebP = true;
// get small images (original and WebP)
$controller->smallUrl = WikiaFileHelper::getSquaredThumbnailUrl($file, $smallSizeDimension);
$controller->smallUrlWebP = WikiaFileHelper::getSquaredThumbnailUrl($file, $smallSizeDimension, $useWebP);
// Set the breakpoint used by the <picture> tag to determine which image to load
$controller->breakPoint = self::MEDIUM_BREAKPOINT;
// get full size WebP image
$controller->imgSrcWebP = WikiaFileHelper::getSquaredThumbnailUrl($file, $fullSizeDimension, $useWebP);
// Let image template know to use <picture> tag instead of <img> tag
$controller->usePictureTag = true;
}
