/** * 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; }