Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

General

How to call image from theme blueprint in twig template

Started by Pedro M 6 years ago · 0 replies · 589 views
6 years ago

Hello there.

I'm trying to migrate html theme to grav theme, and I have some questions about the way to call images from blueprint of theme in twig template.

I have the following:

  • blueprint.yaml (in theme path)
  • theme.yaml (in user/config/themes)
  • partial_file.html.twig (in user/themes/theme/partials)

In blueprint.yaml I have:

YAML
form:
  validation: loose

  fields:
    carousel:
      type: toggle
      label: Carousel
      help: If is active, then Carousel is showed.
      highlight: 1
      default: 0
      options:
        1: PLUGIN_ADMIN.ENABLED
        0: PLUGIN_ADMIN.DISABLED
      validate:
        type: bool
    carousel1:
        type: section
        title: First carousel image
        description: 'First carousel image'
        fields:
          image:
            type: file
            label: Image
            description: Select an image
            destination: 'theme@:/images/slider'
            accept:
              - image/jpg
          title:
            type: text
            label: Title
          text:
            type: text
            label: Text
          button:
            type: text
            label: Button text
          url_button:
            type: text
            label: Button URL

In them.yaml I have:

YAML
enabled: true
carousel: true
carousel1:
  title: 'Title 1'
  text: 'Lorem Ipsum'
  button: 'Services'
  url_button: '#services'
  image:
    user/themes/oxygen/images/slider/1.jpg:
      name: 1.jpg
      type: image/jpeg
      size: 743502
      path: user/themes/oxygen/images/slider/1.jpg

In partial_file.html.twig I have:

TWIG
{% set theme_config = attribute(config.themes, config.system.pages.theme) %}
{% set carousel1 = theme_config.carousel1.image.path %}

....(html code)

 <div class="item active" style="background-image: url({{carousel1}}">

...(html code)

I'd like to call the image saved in yaml file, user/themes/oxygen/images/slider/1.jpg, but I think in the background-image css property this method not work correctly.

Do you have another way to call this image in the twig template?

Thanks in advance.

last edited 09/09/20 by Pedro M

Suggested topics

Topic Participants Replies Views Activity
General · by Jerry Hunt, 4 days ago
2 95 15 hours ago
General · by pamtbaau, 20 hours ago
1 61 20 hours ago
General · by Andy Miller, 1 day ago
0 47 1 day ago
General · by Marcel, 12 months ago
6 356 5 days ago
General · by Duc , 6 days ago
3 44 6 days ago