Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Extra Spacing in HTML Source Due To Liquid Tag Indentation #696

Closed
jcrawford opened this Issue · 5 comments

2 participants

@jcrawford

I have the following code

<div id="slider_module">
    <div id="slider_module_inner">
        <div class="miss_preloader_large" style="text-align:center;">
            <img src="http://www.josephcrawford.com/wp-content/themes/radiostation/assets/images/production/transparent.gif" style="background-image: url(http://www.josephcrawford.com/wp-content/themes/radiostation/assets/images/production/preloader.png);">
        </div>
        <div id="miss_flexslider">
            <ul class="slides">
                {% for post in site.posts %}
                    {% if post.is_review == true and post.image != nil limit:10 %}
                            <li>
                                <a href="{{ page.url }}" class="flex-imageLink">
                                    <img src="images/posts/featured/{{ post.image }}" title="" alt="{{ post.title }}" width="720" height="auto" />
                                    <div class="flex-caption">
                                        <h2 class="slider_title">{{ post.title }}</h2>
                                        <div class="slider_desc">{{ post.excerpt }} </div>
                                    </div>
                                </a>
                            </li>
                    {% endif %}
                {% endfor %}
            </ul>
        </div><!-- #miss_flexslider -->
        <div class="clearboth"></div>
    </div>
</div>

When I have my HTML source and Liquid tags indented properly for readability and I build the site with Jekyll then there appears to be A TON of whitespace in my HTML source. This is caused by the if statement being false so the indentation before the beginning {% if post.is_review == true and post.image != nil limit:10 %} and the ending {% endfor %} is being included into the output of the HTML source.

Screen Shot 2012-12-21 at 8 39 39 PM

See the above screen shot to see what I mean. While the little bit of whitespace shown in the image may not seem like a big deal when it loops through 100 posts that do not match the if statement that is 100 lines of spaces for the indentation. In my site it leads to a ton of blanke white space only lines.

This may not seem like that big of an issue but to keep the tags on the same line screws with readability in my opinion. Not only does it make readability difficult it is actually increasing the size of the page thereby effecting the load times.

A work-around for this is to keep the endif and endfor on the same line such as the code below

<div id="slider_module">
    <div id="slider_module_inner">
        <div class="miss_preloader_large" style="text-align:center;">
            <img src="http://www.josephcrawford.com/wp-content/themes/radiostation/assets/images/production/transparent.gif" style="background-image: url(http://www.josephcrawford.com/wp-content/themes/radiostation/assets/images/production/preloader.png);">
        </div>
        <div id="miss_flexslider">
            <ul class="slides">
                {% for post in site.posts %}{% if post.is_review == true and post.image != nil limit:10 %}
                        <li>
                            <a href="{{ page.url }}" class="flex-imageLink">
                                <img src="images/posts/featured/{{ post.image }}" title="" alt="{{ post.title }}" width="720" height="auto" />
                                <div class="flex-caption">
                                    <h2 class="slider_title">{{ post.title }}</h2>
                                    <div class="slider_desc">{{ post.excerpt }} </div>
                                </div>
                            </a>
                        </li>
                {% endif %}{% endfor %}
            </ul>
        </div><!-- #miss_flexslider -->
        <div class="clearboth"></div>
    </div>
</div>
@tombell

Readability only really matters in the actual templates, not so much in the actual output. Also 1 extra line is 1 byte, now unless you have a million conditions in your template, this is not going to make a dramatic different to load times.

@jcrawford

Let's just say I have about 300 posts, that is 2 lines of whitespace for each, it add's up. I have pastebin'd the source so you can see just how much it is adding to the html. White Space Issue Keep in mind I also wiped out about 200 posts from my site so before that it was MUCH larger.

This is still a bug and should be resolved in my opinion. If I knew more Ruby I would tackle it myself and issue a pull request.

@tombell

Unfortunately, it's a Liquid thing. I've tried looking around but I can't seem to find any solutions. Liquid generates the output for the Liquid templates, Jekyll just writes it.

@jcrawford

Understood, I will file the bug with that project :) Thanks.

@jcrawford jcrawford closed this
@tombell

Seems there is pending PRs for solutions Shopify/liquid#49

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.