Photoset Layout - messed up css

[Gerdus van Zyl]

The tumblr lightbox inserted when using {Photoset-500} is messed up due to css styling conflicts, the problem is the css used is on the element and not some class I can override.

So I tried not using the generated html and creating my own. The problem with this is while there is a {PhotosetLayout} variable I can't figure out how to get rows and row heights.

Thus how do people customize Photoset posts?

Thanks

[felix schwermut]

{PhotosetLayout} comes like this:

'XYZ....'   where X,Y,Z is a number like 1,2,3 etc.

Each X,Y,Z represents a ROW.

The value of each X,Y,Z represents "The Number of Photos in that Row"

So, suppose {PhotosetLayout} = "121"

That means you have 3 rows total, Row 1 has 1 photo, Row 2 has 2 photos, Row 3 has 1 photo

If {PhotosetLayout} = "13"

You have 2 rows total: Row 1 has 1 photo, Row 2 has 3 photos.

I personally have implemented this using JavaScript and the {JSPhotosetLayout} variable.

If you want to implement using PURE CSS, I imagine you'd have to figure out every possible combination of {PhotosetLayout} and create a CSS class to represent the photos correctly.  I'm sure someone has published a list of those, but to AFAIK, Tumblr itself does not have a published list of all possible {PhotosetLayout} options.

[Gerdus van Zyl]

Thanks for the ideas!
I am now using css classes for the most common layouts. Might experiment with a javascript solution later.
Hope tumblr improves this in the future.

[felix bonkoski]

Good, glad that helped.

Yes, Tumblr could provide a better implementation. They provide the {block:Photos}{/block:Photos} inside the Photoset block,

but it would be *nice* if they provided something like:

{PhotoRows}  - the "number of rows"

{block:PhotoRow}  - rendered for each row in the Photoset

     {PhotoRowCount}   - rendered in the Row to indicate "how many photos in this row"

     {block:Photos}    - rendered for each photo in the Row

     

This would make writing pure HTML/CSS a lot easier.