Inline SVG in menu

The CMS Questions
1

Hello,

I’m trying to build a navigation with some svg logo.
For the moment I insert images in classic way:

    <a href="<?php echo $p->url() ?>">
                <?php if($logos = $p->logo()): ?>
                <img src="<?php echo $logos->url() ?>">
                <?php endif ?>
                <span><?php echo $p->title()->html() ?></span>
            </a>

I was wondering if it is possible to inline the content svg file in the menu:

<a href="<?php echo $p->url() ?>">
                <?php if($logos = $p->logo()): ?>
                <svg class="logo">...</svg>
                <?php endif ?>
                <span><?php echo $p->title()->html() ?></span>
            </a>

Thank you for any help.

2

You can accomplish this if you make a SVG with symbol definitions and use the <use> / xlink:


<svg class="icon">
    <use xlink:href="#your-icon-id"></use>
</svg>

Make sure that the svg is embedded in the page (inline) for this to work. You can style the svg icons via CSS:

svg {
    width: 32px;
    height: 32px;
}

Read more about it here: https://css-tricks.com/svg-use-with-external-reference-take-2/

Edit: Example SVG added :slight_smile:

My SVG that I embed in the page to use xlink looks like this:

<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<symbol id="icon--euro" viewBox="0 0 579 1024">
			<title>euro</title>
			<path class="path1" d="..."></path>
		</symbol>
		<symbol id="icon--close" viewBox="0 0 1024 1024">
			<title>close-fat</title>
			<path class="path1" d="..."></path>
		</symbol>
	</defs>
</svg>

Icomoon (http://icomoon.io) can generate a SVG from all your icons for you.

3

Something like this should work:

<a href="<?php echo $p->url() ?>">
  <?php if($logo = $p->logo()->toFile()): ?>
    <?php echo $logo->content() ?>
  <?php endif ?>
  <span><?php echo $p->title()->html() ?></span>
</a>

Please note that this will output the file contents as is, so the class needs to be added on the SVG element inside the logo file.

4

Thank you for your response, unfortunatly @lukasbestle solution does not show content of svg file :frowning:

5

Hm…
Is $p->logo() a field in your page’s content file or a method in a page model?

6

I use logo from an other page, please watch this post. So at this moment, logos are in content folder.

7

Ah, so $p->logo() is a field of the page that contains a filename in the content directory (site files)?

Then it has to be this:

<a href="<?php echo $p->url() ?>">
  <?php if($logo = $site->file($p->logo())): ?>
    <?php echo $logo->content() ?>
  <?php endif ?>
  <span><?php echo $p->title()->html() ?></span>
</a>
8

hm…
Still not work :frowning: I don’t anderstand because if I use image in classic way it works just fine:

 <a href="<?php echo $p->url() ?>">                
<?php if($logos = $p->logo()): ?>
            <img src="<?php echo $logos->url() ?>">
            <?php endif ?>
            <span><?php echo $p->title()->html() ?></span>
        </a>
9

I think Lukas code contains a typo, should be:

<a href="<?php echo $p->url() ?>">
  <?php if($logo = $p->file($p->logo())): ?>
    <?php echo $logo->read() ?>
  <?php endif ?>
  <span><?php echo $p->title()->html() ?></span>
</a>

if the file is in the page folder.

10

does not work…

I certainly do not give enought informations, please find all here:

all menu logos are in root content folder, not in pages folder.

In the blueprint of pages I use it to choose the logo for menu:

fields:
  title:
   label: Titre
   type:  text
   width: 2/3
     logo:
      label: Logo Menu
      type: select
      width: 1/3
      options: query
      query:
        page: /
        fetch: images
        test: '{{url}}'

and the menu looks like this:

<nav class="content">
         <ul class="ulli-3">
<?php foreach($pages->visible() as $p): ?>
        <li <?php e($p->isOpen(), ' class="active"') ?>>
            <a href="<?php echo $p->url() ?>">
            <?php if($logos = $p->logo()): ?>
            <img src="<?php echo $logos->url() ?>">
            <?php endif ?>
            <span><?php echo $p->title()->html() ?></span>
        </a>
        </li>
        <?php endforeach ?>
    </ul>
</nav>

This way, with <img src=""> it works good.

Hope it can give you more infos, and sorry if I’m not so clear with my request.

Thanks

11

What do you save in the text file? The filename or also the url?

12

I’m sorry, I’m not sur to anderstand well your question

13

Well, as text (guess, “test” is just a typo) you show the url of the file to the user in your blueprint, but what gets saved in the content file? The filename of the logo or also the URL?

14

So, I did it this way only to show the url of the file (logo) in the navigation.

(what I’m trying to do, is to give the possibility to the user to select a logo from each pages, to customize navigation. all Logo are located in root content folder.)

edit: I use in blueprint:

logo:
  label: Logo Menu
  type: select
  width: 1/3
  options: query
  query:
    page: /
    fetch: images
    value: '{{url}}'
    text: '{{filename}}'
15

I suggest to change your blueprint like this:

logo:
  label: Logo Menu
  type: select
  width: 1/3
  options: query
  query:
    page: /
    fetch: images
    value: '{{filename}}'
    text: '{{filename}}'

and then use the code posted by @lukasbestle above:

<a href="<?php echo $p->url() ?>">
  <?php if($logo = $site->file($p->logo())): ?>
    <?php echo $logo->content() ?>
  <?php endif ?>
  <span><?php echo $p->title()->html() ?></span>
</a>
16

still does not work,

I finally put logos in pages folder and do it this way:

<a href="<?php echo $p->url() ?>">
     <?php if($image = $p->image('logo-menu.svg')): ?>
     <?php echo $image->content() ?>
     <?php endif ?>
     <span><?php echo $p->title()->html() ?></span>
</a>

It woks like this.

Thank you for your help.

17

Oh, sorry, I picked the wrong code snippet, I meant the second solution by @lukasbestle .