Show external links as image in the

Support
1

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:

example.png644×650 291 KB

2

Slightly vague question without context but I’ll try and help. This would be a case of locating where the template is for this navigation bar. E.g. It could be in something like /partials/navigation.html.twig

You’ll find a file like this in your user/themes/yourtheme/templates/ directory. It depends on the theme you’re using. Assuming you didn’t create it yourself.

From here, it depends on how you’d like to do it, but you could just add some <a> tags with images inside them? Or if it needs to be dynamic you can work out some logic to use different images with different links?

Hope that helps a little?

3

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.

4

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

5

Thanks for the hint.

Ok, so I’ve managed to code in the changes in the navigation to display images:
    {% for page in pages.children %} {% if page.visible %} {% set current_page = (page.active or page.activeChild) ? 'current' : '' %}
  • {% if page.header.image_url != "" %} {{ page.menu }} {% else %} {{ page.menu }} {% endif %}
    • {% endif %} {% endfor %} {% for mitem in site.menu %}
  • {{ mitem.text }}
    • {% endfor %}

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):

                label: PLUGIN_ADMIN.EXTERNAL_URL
                placeholder: https://getgrav.org
                validate:
                    required: true

		header.image_url:
			label: Choose link image
			type: pagemediaselect

        options:
          fields:

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.