Upload Image - Admin Side

Archive
1

Hi,

I am trying to modify the forms in the admin side for the carousel I have on the home page. I managed to add a filepicker to the form but I can’t seem to send the uploaded image name to the twig correctly.

What am I missing? I am guessing something is wrong with the way the twig line is formatted but couldn’t figure it out.

this is my carousel.yaml

title: Carousel
'@extends':
    type: default

form:
  fields:
    tabs:
      type: tabs
      active: 1
      fields:
        slides:
          type: tab 
          title: Slides 
          fields:
            header.slides:
              name: slides
              type: list
              label: Slides
              fields:
                .heading:
                  type: text
                  label: Heading
                  help: Slide's heading.
                .description:
                  type: textarea
                  label: Description
                  help: Slide's description.
                .background_image:
                  type: file
                  destination: '@self'
                  multiple: false
                  accept:
                    - image/*
                  label: Background Image
                  help: Slide's background image.
                .background_image_description:
                  type: text
                  label: Background Image's Description
                  help: Description for slide's background image.

This is the line where I get the error in carousel.html.twig

{{ page.media.images[slide.background_image].html('', slide.background_image_description) }}

And this is my carousel.md

title: Carousel
visible: true
slides:
    -
        heading: 'It''s simple, smart and occasionally magical.'
        description: 'Intrinsicly negotiate corporate synergy rather than user-centric web services. Synergistically<br>transition emerging schemas and.'
        background_image_description: 'It''s simple, smart and occasionally magical.'
    -
        heading: 'It''s profitable and successful!'
        description: 'Synergistically enhance low-risk high-yield testing procedures with clicks-and-mortar architectures.<br>Compellingly revolutionize future-proof interfaces and.'
        background_image_description: 'It''s profitable and successful!'
    -
        heading: 'Good solutions for your business!'
        description: 'Monotonectally envisioneer 24/7 bandwidth with reliable imperatives. Continually unleash unique<br>niches after go forward.'
        background_image_description: 'Good solutions for your business!'

Thanks.

2

I see 3 cause for this error:

  • you used slide with a s: slides, so there is a first error.
  • Also, you have multiple value in slides, so you should iterate on all item with something like:
{% for carouselslide in page.header.slides %}
{{ page.media[carouselslide.background_image].html('', slide.background_image_description) }}
{% endfor %}

Last, there is something wrong with your ‘file’ field, as the data for the image is not saved in the frontmatter.

Hope it helps!

3

Thanks. Actually I thought I should remove the ‘s’ at the end of ‘slides’ but when I did that it didn’t work. I am using the carousel in the x-corp theme and the files came like this.

<div id="x-corp-carousel" class="carousel slide hero-slide" data-ride="carousel">
    <ol class="carousel-indicators">
        {% for slide in page.header.slides %}
        {% set indicatorClass = loop.index == 1 ? 'active' : '' %}
        <li data-target="#x-corp-carousel" data-slide-to="{{ loop.index - 1 }}" class="{{ indicatorClass }}"></li>
        {% endfor %}
    </ol>

    <div class="carousel-inner" role="listbox">
        {% for slide in page.header.slides %}
        {% set slideClass = loop.index == 1 ? 'item active' : 'item' %}
        <div class="{{ slideClass }}" style="width: 100%; height: auto;">
		
            		
{{ page.media.images[slide.background_image].html('', slide.background_image_description) }}
          			 

            <div class="carousel-caption" style="height: auto;"> 
                <h1>{{ slide.heading }}</h1>

                <p>{{ slide.description }}</p>
            </div>
        </div>
        {% endfor %}
    </div>

    <a class="left carousel-control" href="#x-corp-carousel" role="button" data-slide="prev">
        <i class="fa fa-angle-left" aria-hidden="true"></i>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#x-corp-carousel" role="button" data-slide="next">
        <i class="fa fa-angle-right" aria-hidden="true"></i>
        <span class="sr-only">Next</span>
    </a>
</div>

Now, what can I do to use the image data? One workaround I found is to upload the images in the ‘content’ tab and use the filepicker to select the slide image but I prefer to upload them in the ‘Slides’ tab as well.

4

I used Grav before the file and filepicker field, so I did not use these fields actually but I think maybe the data of the file uploaded is saved as an array. Someone with better knowledge should confirm. If this is the case, maybe it should work with {{ page.media.images[slide.background_image.name].html(’’, slide.background_image_description) }} (not sure).

If the only thing that bother you is the fact that the media uploader is not present in your tab, you can also include it on your yaml with the field type: pagemedia

You could therefore easily use pagemediaselect.

Hope it helps!