Image gallery

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|

Image gallery

willwade
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
Reply | Threaded
Open this post in threaded view
|

Re: Image gallery

willwade
Excuse my ignorance on this.. Can I make an extension for asciidoctor to deal with this kind of layout?? Are there docs for this?
Ted
Reply | Threaded
Open this post in threaded view
|

Re: Image gallery

Ted
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
Ted
Reply | Threaded
Open this post in threaded view
|

Re: Image gallery

Ted
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
Reply | Threaded
Open this post in threaded view
|

Re: Image gallery

RichardH


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
Ted
Reply | Threaded
Open this post in threaded view
|

Re: Image gallery

Ted
RichardH wrote
Do the jpgs have to be sized first?
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
Reply | Threaded
Open this post in threaded view
|

Re: Image gallery

RichardH
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
Ted
Reply | Threaded
Open this post in threaded view
|

Re: Image gallery

Ted
RichardH wrote
Might be useful to add a snippet of text to the README
Thanks Richard, that's a great idea! I've added that: https://github.com/tedbergeron/AsciidoctorImageGallery
- Ted @TedAtCIS
Reply | Threaded
Open this post in threaded view
|

Re: Image gallery

mojavelinux
Administrator
Super cool, Ted!

-Dan

On Mon, Mar 14, 2016 at 3:10 PM, Ted [via Asciidoctor :: Discussion] <[hidden email]> wrote:
RichardH wrote
Might be useful to add a snippet of text to the README
Thanks Richard, that's a great idea! I've added that: https://github.com/tedbergeron/AsciidoctorImageGallery
- Ted @TedAtCIS



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Image-gallery-tp4482p4508.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--
Dan Allen | @mojavelinux | http://google.com/profiles/dan.j.allen
Reply | Threaded
Open this post in threaded view
|

Re: Image gallery

RichardH
In reply to this post by Ted
And perhaps add a bit of AsciiArt thusly


+-----------------------------+    +------+
|                             |    |      |
|                             |    |      |
|                             |    +------+
|                             |
|                             |    +------+
|                             |    |      |
|                             |    |      |
|                             |    +------+
|                             |
|                             |    +------+
|                             |    |      |
|                             |    |      |
+-----------------------------+    +------+

RichardH
Reply | Threaded
Open this post in threaded view
|

Re: Image gallery

willwade
In reply to this post by Ted
Awesome! Many thanks :)
Reply | Threaded
Open this post in threaded view
|

Re: Image gallery

willwade
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