MediaThumbsCap
^do( MediaThumbsCap, grid-specs, filename+tab+caption )^
Type: Macro
Purpose: Embeds thumbnail images with captions
The MediaThumbs macro inserts thumbnail images that change size and number-in-row according to browser width.
The markup requires a bit of Bootstrapgefühl. To refresh your grasp of the Bootstrap grid system, check out About the Bootstrap grid system.
Hover below to reveal BoxPress code
^action($tmpStr4=$Path(current).replace("/[^/]+", "../").replace("\`\.\./", "");$tmpStr1="$2".replace("(<p>|</p>)", "").replace("\`
","").replace(";", "@semi@");$tmpLst1=$tmpStr1.split("
");$tmpNum1=count($tmpLst1);$tmpStr3="";$tmpLst1.each(X){$tmpLst2= X.split(" +");$tmpStr1=$tmpLst2.at(0);$tmpStr2=$tmpLst2.at(1).replace("@semi@", ";");$MyString=$tmpStr2.replace("(<b>|</b>|<i>|</i>|<code>|</code>|<kbd>|</kbd>)", ""); $tmpStr3=$tmpStr3 + ’<div class="$1"><div class="thumbnail"><a href="’ + $tmpStr4 + ’img/’ + $tmpStr1 + ’"><img src="’ + $tmpStr4 + ’img/’ + $tmpStr1 + ’" alt="’ + $MyString + ’" title="’ + $MyString + ’"></a></div><div class="caption"><p>’ + $tmpStr2 + ’</p></div></div>’})^<div class="row gallery m-t-img m-b-md">^value($tmpStr3)^</div>
MediaThumbsCap sample
This makes thumbnails two-across the container for all widths.
^do(MediaThumbsCap, "col-xs-6", " sf_Craft.png The Craft segment sf_Health.png The Health segment sf_Magic.png The Magic segment sf_Safety.png The Safety segment")^
The Craft segment
The Health segment
The Magic segment
The Safety segment
This makes thumbnails two-across the container for all widths under medium (992px), and four-across when the container gets wider than this.
^do(MediaThumbsCap, "col-xs-6 col-md-3", " sf_Craft.png The Craft segment sf_Health.png The Health segment sf_Magic.png The Magic segment sf_Safety.png The Safety segment")^
The Craft segment
The Health segment
The Magic segment
The Safety segment
This makes thumbnails two-across when > xs, three-across when > sm (768px), four-across when > md (992px), and finally six-across when > lg (1200px).
^do(MediaThumbsCap, "col-xs-6 col-sm-4 col-md-3 col-lg-2", " aurora_dracula.jpg Dracula. aurora_frankenstein.jpg Frankenstein. aurora_godzilla.jpg Godzilla. aurora_hunchback.jpg Quasimodo. aurora_kong.jpg King Kong. aurora_phantom.jpg Phantom of the Opera. aurora_prisoner.jpg King Kong. aurora_wolfman.jpg Wolfman. aurora_hyde.jpg Dr. Jekyll as Mr. Hyde.")^
Dracula.
Frankenstein.
Godzilla.
Quasimodo.
King Kong.
Phantom of the Opera.
King Kong.
Wolfman.
Dr. Jekyll as Mr. Hyde.