diff --git a/src/applications/pholio/remarkup/PholioRemarkupRule.php b/src/applications/pholio/remarkup/PholioRemarkupRule.php index 13cdd0333b..c92d39d889 100644 --- a/src/applications/pholio/remarkup/PholioRemarkupRule.php +++ b/src/applications/pholio/remarkup/PholioRemarkupRule.php @@ -21,6 +21,18 @@ final class PholioRemarkupRule $embed_mock = id(new PholioMockEmbedView()) ->setMock($object); + if (strlen($options)) { + $parser = new PhutilSimpleOptions(); + $opts = $parser->parse(substr($options, 1)); + + if (isset($opts['image'])) { + $images = array_unique( + explode('&', preg_replace('/\s+/', '', $opts['image']))); + + $embed_mock->setImages($images); + } + } + return $embed_mock->render(); } diff --git a/src/applications/pholio/view/PholioMockEmbedView.php b/src/applications/pholio/view/PholioMockEmbedView.php index 8cdc1d7ffe..5329299021 100644 --- a/src/applications/pholio/view/PholioMockEmbedView.php +++ b/src/applications/pholio/view/PholioMockEmbedView.php @@ -3,12 +3,18 @@ final class PholioMockEmbedView extends AphrontView { private $mock; + private $images = array(); public function setMock(PholioMock $mock) { $this->mock = $mock; return $this; } + public function setImages(array $images) { + $this->images = $images; + return $this; + } + public function render() { if (!$this->mock) { throw new Exception("Call setMock() before render()!"); @@ -31,8 +37,18 @@ final class PholioMockEmbedView extends AphrontView { ), $mock_link); + $images_to_show = array(); + if (!empty($this->images)) { + $images_to_show = array_intersect_key( + $this->mock->getImages(), array_flip($this->images)); + } + + if (empty($images_to_show)) { + $images_to_show = array_slice($this->mock->getImages(), 0, 4); + } + $thumbnails = array(); - foreach (array_slice($this->mock->getImages(), 0, 4) as $image) { + foreach ($images_to_show as $image) { $thumbfile = $image->getFile(); $dimensions = PhabricatorImageTransformer::getPreviewDimensions( diff --git a/src/docs/userguide/remarkup.diviner b/src/docs/userguide/remarkup.diviner index 24833d2b65..e6b95e5d44 100644 --- a/src/docs/userguide/remarkup.diviner +++ b/src/docs/userguide/remarkup.diviner @@ -425,3 +425,18 @@ Some general notes about this syntax: - you can use other Remarkup rules (like **bold**, //italics//, etc.) inside table cells. += Embedding Pholio mocks = + +You can embed a Pholio mock by using braces to refer to it: + + {M123} # Embed the mock M123 + +By default the first four images from the mock set are displayed. This behavior +can be overridden with the **image** option. With the **image** option you can +provide one or more imageIDs to display. + +You can set the image (or images) to display like this: + + {M123, image=12345} + + {M123, image=12345 & 6789} diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css index 1643016ccf..e0a05c9e4c 100644 --- a/webroot/rsrc/css/application/pholio/pholio.css +++ b/webroot/rsrc/css/application/pholio/pholio.css @@ -151,6 +151,7 @@ background-color: #282828; padding: 5px; color: #fff; + margin: 2px; } .pholio-mock-embed-head { diff --git a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js index 22511c976d..bb8bf26f21 100644 --- a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js +++ b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js @@ -674,6 +674,13 @@ JX.behavior('pholio-mock-view', function(config) { image.desc); info.push(desc); + var embed = JX.$N( + 'div', + {className: 'pholio-image-embedding'}, + JX.$H('Embed this image:
{M' + config.mockID + + ', image=' + image.id + '}')); + info.push(embed); + // Render image dimensions and visible size. If we have this infomation // from the server we can display some of it immediately; otherwise, we need // to wait for the image to load so we can read dimension information from