Grow your CSS skills. Land your dream job.

[Tumblr] Masonry + Infinite Scrolling! What am I doing wrong?

  • # February 4, 2013 at 3:57 am

    I am new to tumblr but I have successfully integrated masonry with infinite scroll but can’t seem to get my tumblr coding “{block:Posts}” correct so that it works. Right now it only works if I manually enter the img url, for example; <div class="item">
    <div class="photo post">
    <a href="abcdefghijklmnopqrstuvwxyz"><img src="abcdefghijklmnopqrstuvwxyz" alt=""/></a>
    </div>
    You can see what I am talking about by viewing source on the blog I’m working on for a client: http://nomdecodenikita.tumblr.com. If you are using Fire Fox, you can right click and select ‘View Page Source’

    I fool around with the {block:Posts} tumblr coding but end up with white gaps or some images won’t load. I have no clue where to begin so I switch around s and it just gets worst. I would like to permanently fix it, can anybody help me out here?

    Note: I did not write any of the script for masonry or infinite scroll, I found resources online and had friends help me. My stylesheet.css sheet I got from a tutorial online and tweaked it to fit my needs. Your help is greatly appreciated.

    # February 4, 2013 at 7:36 am

    it looks like the a href is correct but then then you try to load the images the img src gets an extra h before http:// that’s what causing the problem.

    # February 4, 2013 at 11:12 am

    @CarlRosell No that’s not it, but thanks for pointing that out. That was an error made by me speeding through the coding process. Basically what I’m trying to do is recode using tumblr’s block elements so that I don’t have to manually go into edit HTML and enter image links. For example:

    <div class="item">
    <div class="photo post">
    <a href="abcdefghijklmnopqrstuvwxyz"><img src="abcdefghijklmnopqrstuvwxyz" alt=""/></a>
    </div>

    Should be recoded to something like this:

    {Block:Posts}
    {Block:Photo}
    {LinkOpenTag}
    <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
    {LinkCloseTag}
    {/Block:Photo}
    {/Block:Posts}

    I’m just not sure what and where?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".