Skip to content

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

@jcrawford

Description

@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.

You can see a pastebin of my source to see just how much whitespace is added. I originally reported this with the Jekyll project and was informed that it was a Liquid issue as Jekyll just prints the output of what Liquid parses and returns. White Space Issue

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>

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions