Hi
I'm trying to replicate this kind of image gallery.. I would be happy if it ends up being lots of small images but it would be nice to tile them.. Any suggestions?? will |
Excuse my ignorance on this.. Can I make an extension for asciidoctor to deal with this kind of layout?? Are there docs for this?
|
This post was updated on .
This is theoretically how I would make it work.
Start with a pure CSS based image gallery like this one http://www.cssscript.com/minimal-responsive-gallery-lightbox-with-pure-html-css/ Next create an AsciiDoc file MyTestImageGallery.adoc like so: = Test Image Gallery :icons: font :docinfo1: == Display Thumbnails Take four images and force them to display at 75 pixels wide but link to their full size. image:TestImage1.png["Screenshot one",width=75,link="TestImage1.png"] image:TestImage2.png["Screenshot two",width=75,link="TestImage2.png"] image:TestImage3.png[,width=75,link="TestImage3.png"] image:TestImage4.png[,width=75,link="TestImage4.png"] Next create a docinfo.html file <style type="text/css"> /* In here place all the CSS for the image gallery */ </style> Place all the files in a directory and render it like so: $ asciidoctor MyTestImageGallery.adoc Then begin debugging the code generated. You would have to examine the output of the MyTestImageGallery.html and adjust the class names in CSS in the docinfo.html file to match. And there may not be enough tags and classes to grab onto to make this work. So it might require a lot of tweaking the CSS image gallery code. It might be better to shop around for other CSS image galleries that have simpler code that might match the Asciidoctor HTML output better.
- Ted
@TedAtCIS
|
I figured out a way to make this work.
I created a demo to show how this works http://tedbergeron.github.io/AsciidoctorImageGallery/ You can view the README file for more details https://github.com/tedbergeron/AsciidoctorImageGallery Basically your AsciiDoc file includes a docinfo.html file. It also adds in ID's and Classes = ImageGallery.adoc :docinfo1: == The Gallery Below [#full-picture] * [[pic1]]link:pic1[image:610.jpg[]] * [[pic2]]link:pic2[image:611.jpg[]] * [[pic3]]link:pic3[image:612.jpg[]] * [[pic4]]link:pic4[image:613.jpg[]] [.gallery.navigation] * link:#pic1[image:610.jpg[,width=100,]] * link:#pic2[image:611.jpg[,width=100,]] * link:#pic3[image:612.jpg[,width=100,]] * link:#pic4[image:613.jpg[,width=100,]] Then in the docinfo.html file is all the CSS styles needed to make the image gallery work. Finally use Asciidoctor to create the imagegallery.html file
- Ted
@TedAtCIS
|
On 03/14/2016 08:11 PM, Ted [via Asciidoctor :: Discussion] wrote: > I figured out a way to make this work. Do the jpgs have to be sized first? Your jpgs seem to be all ± 1024 x 612 and the layout is nice When I tried it with mine - the first that came to hand - 720 x 691 719 x 631 720 x 540 632 x 720 the layout is a bit untidy Richard H |
Yes, make all your images the same size. After you've cropped them down. You can play with the big image style in the docinfo.html file and change the width and height to match your final sizes. #full-picture { width: 600px; height: 400px; overflow: hidden; float: left; } You can change the thumbnail sizes. That size is located in the AsciiDoc: [.gallery.navigation] * link:#pic1[image:610.jpg[,width=125,]] * link:#pic2[image:611.jpg[,width=125,]]
- Ted
@TedAtCIS
|
On 03/14/2016 09:43 PM, Ted [via Asciidoctor :: Discussion] wrote:
> Yes, make all your images the same size. Ahh I see. Might be useful to add a snippet of text to the README https://github.com/tedbergeron/AsciidoctorImageGallery explaining the special attributes of A'd'ImageGallery (there are a lot of similar competitors out there...) Richard H |
Thanks Richard, that's a great idea! I've added that: https://github.com/tedbergeron/AsciidoctorImageGallery
- Ted
@TedAtCIS
|
Administrator
|
Super cool, Ted! -Dan On Mon, Mar 14, 2016 at 3:10 PM, Ted [via Asciidoctor :: Discussion] <[hidden email]> wrote: Thanks Richard, that's a great idea! I've added that: https://github.com/tedbergeron/AsciidoctorImageGallery Dan Allen | @mojavelinux | http://google.com/profiles/dan.j.allen |
In reply to this post by Ted
And perhaps add a bit of AsciiArt thusly
+-----------------------------+ +------+ | | | | | | | | | | +------+ | | | | +------+ | | | | | | | | | | +------+ | | | | +------+ | | | | | | | | +-----------------------------+ +------+ RichardH |
In reply to this post by Ted
Awesome! Many thanks :)
|
In reply to this post by Ted
Its very cool! I know I'm asking for the moon on a stick here - but any idea of how I could label each image - so clicking to get the full image would give a different label displayed..?
Will |
Free forum by Nabble | Edit this page |