Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Blaine Fallis
Blaine Fallis
2,449 Points
Posted by Blaine Fallis
Blaine Fallis
2,449 Points

very wide timeline graphic

hello - I'm doing a website for a longstanding engineering firm, and they gave me a "low-res" jpg graphic that is 12000 X 2400, and it's pretty and shows a timeline of various documents and pics and certificates all in this kind of ultra-wide graphic, show many key points in their history since 1845. (the ancestor became a surveyor in 1860)

The site is in development in Wordpress. I wondered what your ideas are as to how to display this graphic to visitors.

perhaps a page using a CSS marquee effect? (after I reduce the dimensions down to about 4500 by 900)

A video showing the graphic gradually fading across with some music

a bg-video showing that file slowly moving across the screen as a background

an "info graphic" style image that appears viewable but unfurls to full size when clicked, and by the way what is it about infographic files that's different from any regular jpeg? In this case though the largeness goes wide

these were my very general thoughts about what to do with this. I welcome your insights.

4 Answers

motty
motty
21,787 Points
motty
motty
21,787 Points

There are tons of different WordPress plugins available for this. http://wordpress.org/plugins/nextgen-gallery/ is the most popular of the bunch. Just browse through them and find a gallery plugin that suits your needs.

Eike Schuderer
Eike Schuderer
4,462 Points
Eike Schuderer
Eike Schuderer
4,462 Points

Maybe you could convert that image to HTML, CSS and Javascript? Adding some responsive Design and maybe parralax effects.

Blaine Fallis
Blaine Fallis
2,449 Points
Blaine Fallis
Blaine Fallis
2,449 Points

Hey y'all that was VERY helpful. That knightlab site was way cool, and I'll look into that more. But the discussion of nextgen brought me back to basics and I decided to use what I know, a soliloquy slider with thumbnails and used the base theme to make the arrows more obvious. They have a metro theme but the arrows get lost. My wife managed to splice the graphic in such a way as to make it very readable, and voila! http://www.atkinsonengineers.com.php53-10.ord1-1.websitetestlink.com/our-history

if interested in soliloquy here's my aff link: http://www.shareasale.com/r.cfm?B=380128&U=862791&M=40286&urllink= or u can type in soliloquy.com. If saying that was a big no-no I'm sorry and I'll remove it. I just figured it was the right tool for the task.

Anyway, I wonder performance-wise if the slider holds up ok. The images are all 167k or so.