Overwrite copyright to include images

[sumau]

I am trying to recreate this template using mkdocs material. I have overwritten copyright.html partial so that it includes images:

<div class="md-copyright">
        <style>          
            .logo {
                float: right;    
                 margin: 0 0 0 15px;
                }
        </style>

        <img class="logo" src="assets/images/govuk-crest-2x.png" width=125px height=102px; >

        <img src="assets/images/ogl.png" >
        All content is available under the 
        <a
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            target="_blank" rel="noopener"
        >
            Open Government Licence v3.0</a>
        , except where otherwise stated
</div>

This works fine on the index but the images fail to appear on the other pages when I serve the website. Should I not be using copyright.html partial?

[sumau]

The same kind of problem happens if I overwrite the footer block in main.html:

{% block footer %}
  <footer class="md-footer">
    <div class="md-footer-meta__inner md-grid">

      <div class="md-copyright">
        <img src="assets/images/ogl.png" >
        All content is available under the 
        <a
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            target="_blank" rel="noopener"
        >
            Open Government Licence v3.0</a>
        , except where otherwise stated
      </div>

      <div>
        <img class="logo" src="assets/images/govuk-crest-2x.png" width=125px height=102px; >
      </div>

    </div>
  </footer>
{% endblock %}

[squidfunk]

We can't help you without a reproduction. Everything else would be guesswork. If you provide one, I can look into it.

[sumau]

ok will send one tomorrow thanks 👍

[sumau]

I followed all the steps in reproduction apart from mkdocs build which fails because I'm customizing the theme. However I have still attached the zip file (excluding the venv). You can also see the problem live on this website where the images are displayed on the footer on the home page but not the Contribute page. Please let me know if there's anything other info I can provide. Appreciate your support on this since I know customisation is out of remit :-)

mkdocs-reproduction-zip.zip

[SoumayaMauthoorMOJ]

Hello @squidfunk any udpdate on the above? As I said I know this is a customization issue which is out of remit so I completely understand if it takes longer to resolve :-)

[squidfunk]

Not yet – I have this on my plate to check, but since it's a customization, it's low priority.

[SoumayaMauthoorMOJ]

Understood thanks for the update :-)

[SoumayaMauthoorMOJ]

Hello @squidfunk all fixed now - I had forgotten to include base_url template variable to ensure that the link is always relative to the current page:

{% block footer %}
  <footer class="md-footer">
    <div class="md-footer-meta__inner md-grid">

      <div class="md-copyright">
        <img src="{{ base_url }}/assets/images/ogl.png" >
        All content is available under the 
        <a
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            target="_blank" rel="noopener"
        >
            Open Government Licence v3.0</a>
        , except where otherwise stated
      </div>

      <div>
        <img class="logo" src="{{ base_url }}/assets/images/govuk-crest-2x.png" width=125px height=102px;>
        <br>
        <a class="md-copyright" 
        href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">© Crown copyright</a>
      </div>

    </div>
  </footer>
{% endblock %}

[squidfunk]

Perfect! So sorry I haven't found the time yet, but glad you fixed it. Also thanks for sharing! One suggestion: it's better to use the url filter, as it automatically ensures that all URLs are correct when you reference files relative to docs_dir:

<img class="logo" src="{{ 'assets/images/govuk-crest-2x.png' | url }}" />

We're also using it in our overrides:

mkdocs-material/src/.overrides/main.html

Line 51 in d32ca84

<script src="{{ 'assets/javascripts/custom.js' | url }}"></script>

[SoumayaMauthoorMOJ]

Even better thanks :-)