Advanced Usage

There are a few advanced options available in Zed Press. These offer the ability to further customize the shortcode output.

Custom Template

In the options page you have the option to choose between two default templates, Flexbox and Standard Grid. However you can also choose to turn on the Custom Template option. This option allows you to specify a custom template.

The template provided in the box by default is a copy of the Flexbox template. You may customize as you wish. For reference the code for both default templates are available below in case you wish to use either in a starting point for your own template.

Important: As of version 1.3 both templates have changed to allow the newly added margin/padding/border options to work. If you use custom templates you will need to update your template for those new options to work correctly. The template code below has been updated to reflect the changes.

Flexbox Template

<div class="Zedpress__flexbox Zedpress__parent">
    {% for item in items %}
        <div class="product Zedpress__child">
            <div class="Zedpress__product_container">
                <div class="Zedpress__product_title">
                    {% if new_window %}
                        <a href="{{ item.link }}" target="_blank">{{ item.title|raw }}</a>
                    {% else %}
                        <a href="{{ item.link }}">{{ item.title|raw }}</a>
                    {% endif %}
                </div>
                {% if new_window %}
                    <a href="{{ item.link }}" target="_blank" class="Zedpress__product_zoom">
                        <img src="{{ item.content }}" alt="{{ item.title|escape('html_attr') }}" class="Zedpress__product_image">
                    </a>
                {% else %}
                    <a href="{{ item.link }}" class="Zedpress__product_zoom">
                        <img src="{{ item.content }}" alt="{{ item.title|escape('html_attr') }}" class="Zedpress__product_image">
                    </a>
                {% endif %}
                <p class="Zedpress__product_price">{{ item.price }}</p>
            </div>
        </div>
    {% endfor %}
</div>
<div class="Zedpress__pagination">{{ pagination|raw }}</div>

Standard Grid Template

<div class="Zedpress__standard Zedpress__parent">
    {% for item in items %}

        {% if loop.first %}
            <div class="Zedpress__row">
        {% endif %}

        {% if not loop.first and loop.index0 is divisible by(per_row) %}
            </div>
            <div class="Zedpress__row">
        {% endif %}

                <div class="product Zedpress__child">
                    <div class="Zedpress__product_container">
                        <div class="Zedpress__product_title">
                            {% if new_window %}
                                <a href="{{ item.link }}" target="_blank">{{ item.title|raw }}</a>
                            {% else %}
                                <a href="{{ item.link }}">{{ item.title|raw }}</a>
                            {% endif %}
                        </div>
                        {% if new_window %}
                            <a href="{{ item.link }}" target="_blank" class="Zedpress__product_zoom">
                                <img src="{{ item.content }}" alt="{{ item.title|escape('html_attr') }}" class="Zedpress__product_image">
                            </a>
                        {% else %}
                            <a href="{{ item.link }}" class="Zedpress__product_zoom">
                                <img src="{{ item.content }}" alt="{{ item.title|escape('html_attr') }}" class="Zedpress__product_image">
                            </a>
                        {% endif %}
                        <p class="Zedpress__product_price">{{ item.price }}</p>
                    </div>
                </div>

        {% if loop.last %}
            </div>
        {% endif %}

    {% endfor %}
</div>
<div class="Zedpress__pagination">{{ pagination|raw }}</div>

As you can see the Standard Grid requires a lot more code due to requiring that rows be ended and started after each amount per row is reached. Flexbox can do that via CSS and as such only a class is needed to be specified on the outer container. That class is automatically applied to the outer container by the plugin.

Custom CSS

If you wish to customize things further than just selecting colors for your text you can use custom CSS to do so. CSS is a fairly simple language to learn the basics of and it doesn't take a lot to make effective changes to the look of the shortcode output.

Some CSS has been provided in the Custom CSS field of the plugin to give an example.

Note: Please be aware that any CSS you use will be added site wide. If you use CSS that is not specifically targeted to the Zed Press plugin you may effect the look of other areas of your website.

Notes

Both the Custom Template and Custom CSS options are saved to your website's database and will therefore persist between updates. While I would always recommend you copy the code you use and keep a copy in a text file somewhere, you can be safe in the knowledge that updating the plugin will not cause it to disappear.