Re: Edit Photoset wide

[pouretrebelle]

There are 2 ways to do this, both a total pain.

1) You can build the ps yourself using {block:Photos} and {JSPhotosetLayout} and javascript. not fun to do because of the differing heights of images in multi-columned rows so you have to make them as background images and then find the right height ect. ugh but it is possible, I've done it.

2) Still using js or jquery you can grab the iframe and replace it with another iframe with the '/500' at the end of the src which denotes the width with a different number. Problem is that you need to specify a height of the iframe which can be roughly calculated by the old height * (new width / old width), but since they have a fixed photo margin of 10px they don't scale rationally. In general if you're trying to make it bigger minus a few pixels from that rough height and vice versa for making a smaller ps.

Feel free to try these methods but if anybody copies my code directly be warned I will cut you.  (not joking, it took forever to figure these out and I don't want it nicked like my like button sigh)

[Sean Zhu]

I'd probably go with pouretrebelle's ideas, but I'll just throw another option out there: the CSS transform property. I was able to use the following to make photosets wider and still look presentable in Chrome:

<photoset iframe's container> {

    -webkit-transform: scale(<factor>);

    -webkit-transform-origin: 0 0;

    display: inline-block;

}

<photoset iframe's container's container> {

    height: <<factor> * <height of iframe>>;

}

There's a bit of pseudocode in there — <photoset iframe's container> and <photoset iframe's container's container> depend on how your theme's HTMl is structured; and <factor> depends on how much wider you want the posts to be. <height of iframe> looks like something that requires JavaScript to access, unless all your photoset iframes are the same height. Or, rather, if you don't care if the whole photoset shows up, as long as the width is correct, you can instead have:

<photoset iframe's container's container> {

    overflow-y: hidden;

}

Then your photosets won't flow in the next post, but will be cut off at the original (unscaled) height.

Also, remember to include -o-transform and -moz-transform and test them in the appropriate browsers.

Credit: stackoverflow.com/questions/166160

[moniquet...@gmail.com]

I'm also working on a theme right now that involves changing the layout of the Photosets. I didn't have to mess around with the Javascript or anything of that sort though.

Here's the code I'm currently using:

{block:Photoset}
            {block:IndexPage}
                {block:Photos}
                    <img src="{PhotoURL-500}" class="photoset_photo">
                {/block:Photos}
            {/block:IndexPage}
            
            {block:PermalinkPage}
                {Photoset-400}
            {/block:PermalinkPage}
                {Caption}
{/block:Photoset}

You can opt to change {PhotoURL-500} to {PhotoURL-HighRes} if needed