1

I would be grateful if someone could help me fix my Photosets on my Tumblr. They simply stack one atop the other when I wish for them to be aligned properly. I've been trawling the internet for hours trying to fix this issue and I have had no luck.

This is my Photoset code - any help would be much appreciated!

{block:Photoset}
{block:if400pxPosts}{Photoset-400}{/block:if400pxPosts}
{block:if500pxPosts}{Photoset-500}{/block:if500pxPosts}
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}

And this is the theme I am currently using: https://docs.google.com/file/d/0B2XVyxFzut4zRDFFWVctSzlNb3M/preview

And this is my blog displaying the aforementioned theme: https://chelengks.tumblr.com/

Here's a couple examples of what I'm looking for:

First Example

Second Example

Laura
  • 11
  • 3
  • Can you provide more detail about what "aligned properly" means in this context? Do you want them to be displayed in a grid with multiple columns? If so, should it be a fixed number of columns, or adapt based on the width of the elements and the window? – mpallansch Jul 15 '18 at 00:12
  • Hi, thanks for helping! Sorry, I'm such a novice with all these terms! I think what I mean is a grid that adapts based on width of elements and the window. – Laura Jul 15 '18 at 00:30
  • I just added a couple links to images in the main post for examples of what I'm looking for. Hopefully that'll make more sense! – Laura Jul 15 '18 at 00:46

1 Answers1

1

One solution may be to edit the photoset code to render img tags instead of the photoset iframe module and then style them with a max width smaller than half of the entry width so that they wrap. Something like this:

{block:Photoset}
{block:Photos}
        <img src="{PhotoURL-500}" class="photoset-img" />
    {/block:Photos}
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}

And this CSS:

.photoset-img {
    width: 190px;
}

However this may render large images too small to see detail, and will leave spaces for photosets with photos of variable heights (see image below) screenshot of tumblr with code)

mpallansch
  • 1,174
  • 6
  • 16
  • I think I've done everything correctly, but it's now doing this: https://i.imgur.com/nm7b1Sc.jpg – Laura Jul 15 '18 at 12:18
  • Also, the whole post is on the left of the blog now, like this: https://i.imgur.com/V3XMsxI.jpg When I would like it to appear this way, if it's at all possible (this is a screenshot of the same theme as the one I am using currently): https://i.imgur.com/DVu6tG2.jpg I'm really not sure what I'm doing wrong, I'm really stuck at this point! – Laura Jul 15 '18 at 12:30
  • There was an error in the script, I have edited the answer. But, it also looks like from the second screenshot that there is not enough room to wrap posts to a second column without going outside of the window. You may want to consider using the '400px' option for posts in the theme settings as opposed to the '500px' option. If that doesn't work you could also try reducing the width percent of the `#left` and `#bottom` elements and increasing the width percent of the `#posts` element in the CSS block – mpallansch Jul 15 '18 at 13:30
  • By wrapping posts to a second column, you mean a second column of posts side by side? If there's a way, can it be made to just look like the second image? I just want the second photo on photosets to not be cut off in the middle. I'm so sorry if I've caused confusion for you! Your help so far has been appreciated! I've linked some more shots to show you the issue I'm having with my Photosets, and an example of how I would like it to show on my blog (again this is the exact same theme I'm using). My blog: https://i.imgur.com/nqeS3B1.jpg Same theme: https://i.imgur.com/2B9qA7M.jpg – Laura Jul 15 '18 at 14:03
  • Sorry, I was misunderstanding your question. It seems like the code you provided for the theme does display photosets in a grid, but only if they are small enough for it (https://i.stack.imgur.com/pG4Pd.png photoset on top is too large and does not wrap, bottom photoset does). I'm not sure why you're seeing the images cut off, but that may be because of the changes in my answer, you may want to reverse those. So is what you want for even large images like the top example to display in a grid as well? – mpallansch Jul 15 '18 at 14:28
  • Sorry yet again for the confusion! Is it possible for larger images, whether vertical or landscape to be wrapped like the bottom ones? If so, that'd be brilliant. So, if I were to post a Photoset with portrait images (whether large or small images), it'd look like this (in a grid): https://i.imgur.com/gTVuKuW.jpg Or, if I posted a Photoset with landscape photos, it'd also resize them accordingly whether large or small images (into a grid): https://i.imgur.com/2B9qA7M.jpg I'm sorry if I'm causing confusion! – Laura Jul 15 '18 at 15:27
  • From what I can see, when I have a photoset with large images in a preview, it just seems like they're too big to be contained within the post boundaries - is there a way that it can resize these large photos so they stay within the boundaries? That seems like it's what the problem is in regards to the images being cut off. – Laura Jul 16 '18 at 01:08
  • I edited my answer with a possible better fix, is that more of the solution you were looking for? – mpallansch Jul 16 '18 at 01:43
  • Thanks for the new code. The first part of the code when inserted into the theme looks to be working wonderfully, but I'm not sure where to insert this second piece of code: (.photoset-img { width: 190px; } – Laura Jul 16 '18 at 15:07
  • The CSS should go in between the `` tags in the `` section of the page – mpallansch Jul 16 '18 at 19:03
  • Right, it has definitely made things look better. But, like you said, the second part of the CSS does leave spaces where the photos in the photoset are variable heights. Apart from that, it is working! – Laura Jul 16 '18 at 21:00