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

WordPress

Posted by leonardpongo
leonardpongo
2,379 Points

How to make an irregular image mosaic responsive in Wordpress

Hi,

I am in the process of creating a custom theme for a website.

I am trying to achieve an image mosaic, made of ˜30 small images which each link to a lightbox.

I am at loss as to where and how to start integrating this into wordpress.

This is the end result I am trying to achieve:

irregular mosaic

It was built using tumult hype, and outputs non responsive, dirty code, which is why I would like to rebuilt it.

From what I have found, there are plenty of masonry or other gallery plugins available but none offers this level of control and I would like to include the javascript into my theme myself instead of relying on plugins.

Any help appreciated!

5 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Hi, Are you stuck with how to make responsive or integrate into wp? In general I say try to make it do statically what you want first then the integration should be easier.

leonardpongo
leonardpongo
2,379 Points
leonardpongo
leonardpongo
2,379 Points

Dear Zac,

Thanks for your answer. I meant both.

I have set up a column design as a simple css/js/html and I have trouble with the vertical offset for some of the elements in this page. As the mosaic is rather asymmetrical, it is difficult to get every item to position properly AND to be responsive, while having no gutter spacing at all.

Then trying to include this into wordpress as a custom element on my frontpage is another challenge. Should I include an (ugly) codeblock with inline custom css? This doesn't seem like a very good idea but I'm a little lost here…

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Have you looked into trying to design it with something like jQuery Masonry or Isotope?

leonardpongo
leonardpongo
2,379 Points
leonardpongo
leonardpongo
2,379 Points

I have, but since the shape of the mosaic items must remain fixed (aka, size down as a whole, not go from a 6-column design to a 4 columns or change image order), that's not an option.

I've eventually managed to get it working by using absolute positioning in a fluid design. I will add a lightbox and then media queries to make it responsive (it will be a one-column design on mobiles since the mosaic doesn't make sense on a small screen).

Now the question remains, how do I include this into a wordpress site?

The html/css is pretty straightforward (goodbye js), it can be seen at http://dev.lpongo.eu/mosaic

leonardpongo
leonardpongo
2,379 Points
leonardpongo
leonardpongo
2,379 Points

I've found a simplifying solution using a single background image and an image map inspired from the following demo: http://www.cssplay.co.uk/menu/cssplay-responsive-image-map.html