3

I've got a directory download feature running on the Printmaker Plugin, that's including some odd spaces and blank pages. Live example at: https://correctionstocollegeca.org/directory-download. Everything is great until the last couple pages, where entries get spaced out one per page, and the last page is blank. Any ideas for fixing the spacing?

{% set html %}
  <html>
        <head>
            <link href="https://correctionstocollegeca.org/css/doc.css" rel="stylesheet"/>
        </head>
        <body>
            <img src="https://correctionstocollegeca.org/assets/globals/ctcca-logo.png" style="width: 200px;">
            <h1 style="line-height:0.8;margin-top:8px;">{{ entry.displayTitle }}</h1>

            {% if craft.request.getParam('type') is not null %}

                        {# Get search parameters from the URL query string #}
                        {% set query = craft.request.getParam('type') %}

                        {# Start an array of search parameters (relationParam) with 'and' to match ALL categories #}
                        {% set relationParam = ['and'] %}

                        {# Find categories that match the slugs in your query string... #}
                        {% for querySlug in query %}
                                {% set category = craft.categories.group('programTypes').slug(querySlug) %}

                                {# And merge them into the relationParam array. #}
                                {% set relationParam = relationParam|merge([{ targetElement: category }]) %}
                        {% endfor %}

                        {# Avoid passing an array with `['and']` only #}
                        {% if relationParam|length < 2 %}
                            {% set relationParam = '' %}
                        {% endif %}

                        {% set searchParams = {
                            relatedTo:  relationParam,
                            section: 'colleges'
                        } %}

                        {# Find your entries #}
                        {% set programs = craft.entries(searchParams).order('title') %}    

                {% elseif craft.request.getParam('facility') is not null %}

                        {% set query = craft.entries.slug(craft.request.getParam('facility')) %}
                        {% set programs =  craft.entries.section('colleges').relatedTo(query).order('title') %}
                        {% set indicatorQuery = craft.request.getParam('facility') %}

                {% elseif craft.request.getParam('keyword') is not null %}

                        {% set query = craft.request.getParam('keyword') %}
                        {% set programs =  craft.entries.section('colleges').search(query).order('score') %}

                {% elseif craft.request.getParam('featured') is not null %}

                        {% set featured = craft.request.getParam('featured') %}
                        {% set featuredPrograms =  craft.entries.id(featured) %}
                        {% set programs = craft.entries.section('colleges').order('title').id('and, not ' ~ featured | join(', not '))%}

                {% elseif craft.request.getParam('featuredFacility') is not null %}

                        {% set featuredFacility = craft.entries.slug(craft.request.getParam('featuredFacility')) %}
                        {% set featuredPrograms =  craft.entries.section('colleges').relatedTo(featuredFacility).order('title') %}
                        {% set featuredIds = featuredPrograms.ids() %}
                        {% set programs = craft.entries.section('colleges').order('title').id('and, not ' ~ featuredIds | join(', not ')) %}

                {% else %}

                        {% set programs = craft.entries.section('colleges').order('title') %}

                {% endif %}

                <!-- Query Indicator -->
                {% set queryString = craft.request.getQueryString() %}
                {% if craft.request.getParam('type') is not null %}
                    <br>
                    <p>
                        This is a subset of the full directory filtered to show only
                        {% if query|length == 1 %}
                            {% for slug in query %}
                                {% for indicator in craft.categories.slug(slug) %}
                                    {{ indicator.title|lower }}s.
                                {% endfor %}
                            {% endfor %}
                        {% elseif  queryString == "p=directory-download&type%5B%5D=prison-program&type%5B%5D=jail-program" %}
                            prison and jail programs.
                        {% elseif  queryString == "p=directory-download&type%5B%5D=prison-program&type%5B%5D=campus-program" %}
                            prison and campus programs.
                        {% elseif  queryString == "p=directory-download&type%5B%5D=prison-program&type%5B%5D=jail-program&type%5B%5D=campus-program" %}
                            prison, jail and campus programs.
                        {% elseif  queryString == "p=directory-download&type%5B%5D=jail-program&type%5B%5D=campus-program" %}
                            jail and campus programs.
                        {% endif %}
                    </p>{{ entry.sortedDirectoryExplanation }}

                {% elseif craft.request.getParam('keyword') is not null %}
                    <br>
                    <p>
                        This is a subset of the full directory filtered by 
                            <span class="label filter-label">the keyword: "{{ query }}."</span>
                    </p>{{ entry.sortedDirectoryExplanation }}

                {% elseif craft.request.getParam('facility') is not null %}
                    <br>
                    <p>
                        This is a subset of the full directory showing only programs operating in
                        {% for slug in indicatorQuery %}
                            {% for indicator in craft.entries.slug(slug) %}
                                <span class="label filter-label">{{ indicator.title }}.</span>
                            {% endfor %}
                        {% endfor %}
                    </p>{{ entry.sortedDirectoryExplanation }}

                {% endif %}<!-- /Query Indicator -->

            <br>
            <table style="table-layout: fixed; width:100%;" >
                {% for program in programs %}
                    <tr>
                        <td colspan="3" style="width:33%;border:1px solid #bbb;padding-left:10px;padding-right:10px;" valign="top">
                            <h2>{{ program.displayTitle }}<span class="no-wrap">
                                {% for type in program.programTypes %}
                                    {% if type.slug == 'prison-program' %}
                                        <img src="https://correctionstocollegeca.org/assets/globals/p-symbol.png" style="width:18px;margin-right:5px;">
                                    {% elseif type.slug == 'jail-program' %}
                                        <img src="https://correctionstocollegeca.org/assets/globals/j-symbol.png" style="width:18px;margin-right:5px;">
                                    {% elseif type.slug == 'campus-program' %}
                                        <img src="https://correctionstocollegeca.org/assets/globals/c-symbol.png" style="width:18px;margin-right:5px;">
                                    {% endif %}
                                {% endfor %}</span>
                            </h2>
                            <p class="directory-location">{{ program.programLocation }}</p>
                            {% if ( program.programWebsite | length ) or ( program.programFacebook| length ) %}
                                <p class="directory-links">{% if program.programWebsite|length %}<a href="//{{ program.programWebsite }}">{{ program.programWebsite }}</a>{% endif %}{% if ( program.programWebsite | length ) and ( program.programFacebook| length ) %} | {% endif %}{% if program.programFacebook|length %}<a href="{{ program.programFacebook }}">facebook</a>{% endif %}</p>
                            {% endif %}
                            <table style="table-layout: fixed; width:100%;">
                                <tr>
                                    <td style="width: 33%;" valign="top">
                                        <p style="font-size:14px;margin-bottom:-2px;"><b>Operating In</b></p>
                                        {{ program.operatingIn }}
                                    </td>
                                    <td style="width: 33%;" valign="top">
                                        <p style="font-size:14px;margin-bottom:-2px;"><b>Programs Offered</b></p>
                                        {{ program.programsOffered }}
                                    </td>
                                    <td style="width: 33%;word-break:break-all; word-wrap:break-word;" valign="top">
                                        <p style="font-size:14px;margin-bottom:-2px;"><b>Contacts</b></p>
                                        {{ program.programContacts }}
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                {% endfor %}
            </table>
        </body>
</html>
{% endset %}
{% set settings = { 
    orientation : 'portrait' 
} %}

{% set pdf = craft.printmaker.pdfFromHtml(html, settings) %}

{{ pdf.output }}
1

I have a hunch the issues you're seeing with the extra spacing and blank pages on your website are being caused by the indentation and new lines (after the </body> tag for example) in your template.

One way I think you could solve that is wrapping your html code in a Twig spaceless tag:

{% set html %}

  {% spaceless %}

    <html>
      <head>
        ...
      </head>

      <body>
        ...
      </body>
    </html>

  {% endspaceless %}

{% endset %}


{% set settings = { 
  orientation : 'portrait' 
} %}

{% set pdf = craft.printmaker.pdfFromHtml(html, settings) %}

{{ pdf.output }}

Any extra whitespace between the html tags inside that {% spaceless %} tag is going to be removed in the final product and you don't have to sacrifice code indenting in your template to accomplish it 👍

Hopefully that helps, let me know how it goes!

4
  • Thanks Jalen! But unfortunately no, the spaceless tag didn't change anything in the output. I also tried minifying the whole template, also to no effect.
    – Clay Kilby
    Jul 27 '18 at 20:04
  • Just figured it out! There was an unnecessary <br> just inside the end of the for loop. Getting rid of that fixed things right up!
    – Clay Kilby
    Jul 27 '18 at 20:06
  • @ClayKilby ah wonderful! Yeah I figured it had something to do with some whitespace being added somewhere 👌 Jul 27 '18 at 20:27
  • @ClayKilby Great that you figured it out. You should add an answer to this question with an explanation of the fix, and mark it as the correct answer – this would be helpful for other people who might struggle with the same issue in the future. Jul 28 '18 at 13:52
1

It's very difficult to give a "canonical" answer to this issue, without actually playing around with the code, because it could be a combination of things that produce the unwanted spaces and page breaks.

But I've experienced similar problems, and in my case I solved it by some careful use of different CSS page-break properties. Your mileage may vary, though.

1

It turns out there was an extra br tag inside the loop. I had intended to use it to add a short space between each entry, but instead they collected at the end of the document and created the long unwanted spacing. Removing that tag fixed it right up!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.