Show external links as image in the

Hi,
I want to show some external links in the Striped skeleton navigation bar as images, the standard is a text link. It would be nice if this behavior was configurable in the options menu in the admin panel as well, so I could choose between text and image link.

Could anybody tell me which files I need to edit/look at. I have some experience in PHP and CMS in general, however I am very new to Grav. I don't want anyone to do this work for me, please just point me in the right direction.

Kind regards,
Christian

An example:
<img src="//cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex036/uploads/getgrav/original/1X/25efdc894ba5f7a1df07c82b4c85a1091dcc1a08.png" width="495" height="500">

Hi,
thanks you for your reply and sorry for being vague.
The themes' name is "Striped".

I have used your proposal as a workaround, with the images being static.
The file that needed editing was user\themes\striped\templates\partials\sidebar.html.twig.

Now I want to put some logic in, to have the images exchangeable in the admin panel.
Seems as if I have found the related entry in system\blueprints\pages\external.yaml, which defines the handling of external links.

I guess I need to modify this file to get my admin panel options.
Thank you very much. I will report back when I have a presentable solution.

Remember not to modify the system/* directory itself. Always copy into your user folder.

Thanks for the hint.

Ok, so I've managed to code in the changes in the navigation to display images:
<pre>
<nav id="nav">
<ul>
{% for page in pages.children %}
{% if page.visible %}
{% set current_page = (page.active or page.activeChild) ? 'current' : '' %}
<li class="{{ current_page }}">
{% if page.header.image_url != "" %}
<a href="{{ page.url }}">
<img src="{{ page.header.image_url }}" alt="{{ page.menu }}"/>
</a>
{% else %}
<a href="{{ page.url }}">
{{ page.menu }}
</a>
{% endif %}
</li>
{% endif %}
{% endfor %}
{% for mitem in site.menu %}
<li>
<a href="{{ mitem.link }}"><img alt=" {{ mitem.text }}" src="{{ mitem.image }}"/></a>
</li>
{% endfor %}
</ul>
</nav>
</pre>

The problem I have now is, that I cannot add a file picker to the admin panel page for external links. Whenever I try to add another field, the whole thing will break and "default" to some other blueprint, I guess.

I simply copied the external.yaml file into my/user/blueprints/pages folder and added the following paragraph (the part I've added is in grey):

<pre>
label: PLUGIN_ADMIN.EXTERNAL_URL
placeholder: https://getgrav.org
validate:
required: true
</pre>
header.image_url:
label: Choose link image
type: pagemediaselect
<pre>
options:
fields:

</pre>
When doing so, the admin panel won't even show the original fields for external url and name under the "Normal" view mode, but rather show a large content edit field.