Image logo

Archive
1

I’m trying to use an image as a logo. Default logo says <h3><a href="{{ base_url_relative}}">{{ config.site.title }}</a></h3>. I assume I have to create the image from an image file. Something like
{% set logo_image = (somewhere).images|first.(transforms)...%}, but I don’t know how to access the image (the ‘somewhere’). The page has a list of media, but I don’t understand how to get from, say, base_dir or theme_dir to a particular image file.

When this is answered I expect my next question to be: ‘when the page is scrolled, the menubar scales slightly. Where is this done and how can I do that for an image logo.’

Thanks

2

Ok, you have various options for logo.

Direct Image File

You could use an image file and put it in either the user/themes/my_theme/images or create a folder user/images. Then you can reference it directly with:

<h3><a href="{{ base_url_relative}}"><img src="{{ base_url_relative }}/user/images/logo.png" /></a></h3>

Image File as Grav Media

If you want to be able to do dynamic manipulations with Grav’s Media methods including resizing, color adjustment, etc, then image needs to be associated with a page, and you need to be able to access this page from any other page (as the logo needs to be there no matter what page your on). This of course is simple with Grav too.

You could create a folder in pages called /user/pages/images where you can put all your shared images. You don’t even need to create a .md file, you can simply drop your image files you want in there. Grav will automatically see that as a page. Then in your template file you can do something like:

<h3><a href="{{ base_url_relative }}">{{ pages.find('/images').media['logo.jpg'].m anpulations.html %}</a></h3>

Obviously manipulations are any media manipulations you want to use. Because you are using Grav’s find() method, this will work on every page, and you can put any image in here you like. You’ve basically created a non-visible Grav page that is used for just storing images.

Pretty cool right???

Image as a Background or SVG

These are really non-Grav topics, but you could set the background of the <h3> to an image via CSS then hide the actual text. This is quite semantic because your HTML stays the same as it is now, but does require you to set the size of <h3>, make it a block element, set the size, set the background_url (relative to the CSS file). This would be done all in the .scss files ideally, and would you require you to recompile them. If you were doing this I would strongly suggest you copy the existing theme, and create your own theme where you can make these kinds of manipulations safely.

Image Animation

Again this is a CSS thing, and is best explained after you have chosen your approach, because the exact code would be different for each scenario.

3

OK. Thanks. Very useful info!