Hi there,
I have been trying to add a custom .png logo in the header of the grav site I am building. See here what I am referring to:
I explain here the steps I have followed:
- I already had created an inherited theme using CLI.
- Checked the parent theme templates to check for the template where I want to add the custom logo. In parent theme, it is located here: user/themes/future2021/templates/partials/header.html.twig
- Therefore, I copy-pasted “header.html.twig” into “future2021-child-theme-2/templates/partials/”.
- I identified the line of code that, before any changes, displays just the name of the site in text format, so not an image. Looks like this:
<header id="header">
<div class="logo">
<a href="{{ home_url }}">{{ site.title }}</a>
</div>
- Then, I check for the folder path where the logos are located in the parent theme. Is here: user/themes/future2021/images/logo/grav_logo.png. My logo will be named “logo.png”.
- I replicate the above folder structure in the child-theme. Add the “logo.png” in the logo folder
- I change the code in the header to the below:
<header id="header">
<div class="logo">
<a href="home"><img src="../../images/logo/logo.png" alt="I want a logo here"></a>
</div>
→ Result a) With alt text, then it only shows the alt text.
→ Result b) If I remove the alt text, then it shows this:
- if I go into inspect > click the path of the image, it shows this:
The linking to the homepage from other pages works well for both a) and b). When this above failed, I started troubleshooting. See below my ideas:
First idea to solve it:
I had seen this post’s answer, so I decided to try.
- Added the following in the child-theme.yaml
custom_logo:
- name: logo.png
→ Result: nothing happened. Still a) and b) results.
Second idea to solve it:
“Perhaps is not only the header that I should edit, since I see that there is a “logo.html.twig” file in the parent folder which maybe is affecting the not rendering of my custom logo.”
- Copy this “logo.html.twig” into the child theme in the same folder path as the parent is.
- The original parent theme code for “logo.html.twig” one is as follows:
{% set logo = theme_var('custom_logo_mobile') ?: theme_var('custom_logo') %}
<a href="{{ home_url }}" class="logo" rel="nofollow" title="{{ site.title|raw }}">
{% if logo %}
{% set logo_file = (logo|first).name %}
<img src="{{ url('theme://images/logo/' ~ logo_file) }}" alt="{{ site.title|raw }}"/>
{% else %}
{% include('@images/grav-logo.svg') %}
{% endif %}
</a>
- In my humble opinion, I believe that what I could change is the following:
{% if logo %}
{% set logo_file = (logo|first).name %}
<img src="{{ url('theme://images/logo/logo.png' ~ logo_file ) }}" alt="{{ site.title|raw }}"/>
→ Result: same as in the results a) and b) of above.
Third idea to solve it:
"Maybe the problem is in the location of the logo in the folder structures. I see that the grav logo is not only located in the logo folder, but there is also a grav logo (in .svg format) in the “future2021/images/” folder.
On this line of thought, I started putting my custom logo to all the paths that could make sense (since it doesn’t work with my first option above). I made the link everytime in the header.html.twig to point to each of the different folder and I cleared cache everytime.
- “themes/future2021-child-theme-2/images/logo.png”
- “user/pages/images/logo.png” (so putting it in the hidden folder of images that is located where the blog pages and other are)
- “user/themes/future2021-child-theme-2/templates/partials/logo.png” → makes no sense but I tried…
→ Result: same as a) and b) above.
Fourth idea to solve it:
I saw this answer in this post which gives directions to make changes in the “base.html.twig” for the antimatter theme (not future2021) and then of course it’s not the same… However, in the Future2021 “base.html.twig” I saw this lines of code which maybe serve as an idea to anyone reading this post:
{# Define if the primary image and the attributes of width and height are shown #}
{% set show_image = header_var('show_pageimage')|defined(true) %}
{% set image = page.media[page.header.primaryImage] ?: page.media.all|filter((v, k) => k != page.header.avatarImage and (v.type == 'image' or v.type == 'vector'))|first %}
{% set img_width = header_var('image_width')|default(1038) %}
{% set img_height = header_var('image_height')|default(437) %}
I did not dare to make changes here because I hardly understand… but I leave it here in case it helps give ideas…
How many questions can one person ask in a month without getting banned? asking for a friend 
Thanks a lot in any case!! 
Exactly where you have put the grav logo + site name is where I am trying to put the logo.png… I really don’t know what am I doing wrong because if it works for you, so should for me, but it keeps resisting…