logo image

[zagwalker]

Hi,

Could not figure out is there any other method of implementing an image logo besides changing the code. Any suggestions?

Regards

[atomsmith]

I don't believe the theme offers any image logo features. For this reason and others, I used theme inheritance to do customization. In the inherited version of "templates\modular\footer.html.twig" I included the following block:

        <div class="footer-module large">
            <div class="logo">
                <img src="{{ page.find('/images').media[site.footer.logo].url }}" class="img-responsive img-centered" alt="{{ site.footer.logoalt }}">
                {% block social %}
                    {% include 'partials/social.html.twig' %}
                {% endblock %}

            </div>
            {% if site.footer.description %}
                <p>{{ site.footer.description }}</p>
            {% endif %}
        </div>

The logo and alternate text are defined in site.yaml:

footer:
    logo: my-logo.jpg
    logoalt: "Alternate text here"

The logo JPEG needs to be in the "pages\images" folder.

[zagwalker]

Thanks a lot. I'll have a look on that.

[The-Steve]

I don't believe the theme offers any image logo features. For this reason and others, I used theme inheritance to do customization. In the inherited version of "templates\modular\footer.html.twig" I included the following block:

        <div class="footer-module large">
            <div class="logo">
                <img src="{{ page.find('/images').media[site.footer.logo].url }}" class="img-responsive img-centered" alt="{{ site.footer.logoalt }}">
                {% block social %}
                    {% include 'partials/social.html.twig' %}
                {% endblock %}

            </div>
            {% if site.footer.description %}
                <p>{{ site.footer.description }}</p>
            {% endif %}
        </div>

The logo and alternate text are defined in site.yaml:

footer:
    logo: my-logo.jpg
    logoalt: "Alternate text here"

The logo JPEG needs to be in the "pages\images" folder.

@atomsmith, Thanks for this reply.

Slightly off-track, but for the same purpose, how exactly did you achieve "Template" inheritance? I was able to inherit the SCSS, but I am having a hard time inheriting the Deliver theme's templates.

The following just doesn't work.

{% extends "partials/base.html.twig" %}

{% block header %}
new header content here
{% endblock %}

{% extends "…/…/deliver/templates/partials/base.html.twig" %} This does not work either.

If it's possible, can you please write the steps that you followed while inheriting the templates. It would help a lot of us. Thanks in advance.

[atomsmith]

@The-Steve, I did not use template inheritance in the manner you are describing. Some of the things I wanted to adjust did not correspond neatly to blocks in the original theme. My process went something like:

1. Use a browser's developer tools to find some unwanted aspect of the original theme.
2. Decide that the change can't be accomplished in CSS alone.
3. Find the block of Twig code responsible.
4. Copy the enclosing Twig file from the base theme to the equivalent directory position in my theme.
5. Edit the Twig to suit.

As an example, the original theme's "feature" blocks were not useful for the nonprofit organization website I was building. As I recall, just having the empty
<div class="feature-items"></div>
caused unwanted blank space on some of the pages. So my theme has a "features.html.twig" with that div completely deleted.