Sage 10 and assets

sage
,
1

Hello,

I am using Sage 10.0.0-beta.2 and I have some trouble using assets. I didn’t modify bud.config.js except the proxy:

I have followed the documentation to use images in my templates:

<img src="@asset('images/example.jpg')">

But it doesn’t work. I need to write the following:

<img src="@asset('assets/images/example.jpg')">

Moreover, I have modified the proxy to see them on http://localhost:3000/:

.proxy({
            url: "https://original.url.of.my.local.dev",
            replace: {
                href: true,
                window: true,
                publicPath: false
            }
        })

My questions are:

  • why Bud copies images in a subfolder named assets? Can I modify this?
  • why fonts are not copied in public directory?

Have a great day.
Best Regards,

4 Likes
2

I’m having a similar problem.

I’m putting my images on resources/images folder, and trying to use on my CSS as this:

.background {
  background-image: url("../images/background.svg");
}

In the same wey that is in the documentation.

It works after running yarn build, but not while running rand dev, neither on the live preview http://localhost:3000/ nor on http://localhost:3000/, the images doesn’t load, because the browser is trying to load them on a different directory.

1 Like
3

Confirming the OP’s behavior is a bug /cc @kellymears @QWp6t

Unable to reproduce @jasaldivara’s issue (images referenced from CSS are working as expected via yarn build and yarn dev)

4

Forgot to mention regarding the fonts issue, @kellymears has a workaround here you can use before the next Bud release: Sage: url() in @font-face declaration doesn't work · Issue #822 · roots/bud · GitHub

5

Thank you! Font icons work now :slight_smile: (I didn’t read the workaround, I was waiting for an official release)

6

(I have a typo on my previuos comment. It should say yarn dev instead of rand dev. Not sure how can I edit that.)

Turns out I had a bad proxy configuration on my bud.config.js. I was using only my hostname, instead of the full site url (since that was how it worked on a previous dev version before beta 2). Once I configured correctly the proxy, my images loaded both on yarn build and yarn dev.

I’m still noticing something strange: Background images don’t load on my ‘normal’ (non live) site while i’m running yarn dev. I have to stop yarn dev and run yarn build for the images to load. I’m not sure if this is considered a bug.

I also have noticed another strange behavior. When adding the line .assets(['resources/images']) to my bud.config.js, the images are saved in public/assets/images, but images refrenced on CSS are saved in public/assets. So if I keep that line on bud.config.js, the images are duplicated on two different directories. For me, the easy solution is to just omit that line from my config file.

7

I’m having a similar issue, when referencing images in css using yarn dev:

Example: background-image: url(’…/images/music.svg’);

It’s emitting the absolute url of the current page: http://localhost:3000/questions/qa-title-speaker-name-here/assets/music.svg;

Rather than the root directory: http://localhost:10004/wp-content/themes/changesource/public/assets/images/question_2.jpeg

When using yarn build however, the images are emitted correctly:

http://localhost:10004/wp-content/themes/changesource/public/assets/images/question_2.ede033.jpeg

8
  1. Please use the proper formatting when pasting code on here
  2. You’ll need to use .., not ...
9

Please provide some code so I can drop it on my theme for testing :smiley:

10

Filed a bug on the Bud repo for anyone who wants to follow for the @asset issue

11

Noted and I’m not sure why there’s an extra dot here, only two in my code.

Is this default path for beta 2: ../images/image.jpeg ?

12

Yep that’s correct

Is your local dev URL http://localhost:10004/? That probably needs to be a host without a port to work correctly?

13

Sorry for the delay

This is the code from my scss (SASS) file:


.teaser,
.teaser-secundario {
  display: flex;
  flex-direction: column;

  .thumbnail {
    flex-grow: 1;

    img {
      height: 100%;
      object-fit: cover;
    }
  }

  .encabezado {
    background-color: teal;
    color: white;
    background-size: cover;
    background-position: left center;
    text-align: center;

    :link,
    :visited {
      color: white;
    }

    &.verde {
      background-color: #5f9f48;
      background-image: url("../images/encabezado_verde.svg");
    }

    &.naranja {
      background-color: #fe8709;
      background-image: url("../images/encabezado_amarillo.svg");
    }

    &.rosa {
      background-color: #f01e5b;
      background-image: url("../images/encabezado_rosa.svg");
    }
  }

  h3 {
    font-size: 1.15rem;
  }

  h4 {
    font-size: 1rem;
  }
}

This is the code from my blade template:

@if ( $query_destacadas->have_posts() )
  <div class="teaser">
    @php ( $query_destacadas->the_post())
    <div class="thumbnail">
      <a href="{{ wp_get_shortlink() }}">
        {!! get_the_post_thumbnail() !!}
      </a>
    </div>
    <h3 class="encabezado verde">
      <a href="{{ wp_get_shortlink() }}">
        {{ the_title('', '', false ) }}
      </a>
    </h3>
  </div>
@endif

This is what I see on Google Chrome developer tools when inspecting h3.encabezado after running yarn build (background image is loading correclty):

.teaser-secundario .encabezado.verde, .teaser .encabezado.verde {
    background-color: #5f9f48;
    background-image: url(assets/encabezado_verde.4df3bf.svg);
}

This is what I see on Google Chrome developer tools when inspecting h3.encabezado while running yarn dev (background image is not loading):

.teaser .encabezado.verde, .teaser-secundario .encabezado.verde {
    background-color: #5f9f48;
    background-image: url(http://my-workstation/my-website/assets/encabezado_verde.svg);
}
14

This topic was automatically closed after 42 days. New replies are no longer allowed.