Adding multi images

Kirby 3 Solved ✅
1

This seems like it should be a simple thing to do but I’m having some troubles.

I am creating the Home panel which has different parts of the design. One part shows the different logos of previous clients that have worked with. All I want is the blueprint layout where it has the options to add the image, alt text and an optional link. It may be between 2 and 12 (or more) images that will add as a

  • item.

    How can I do this to have a plus symbol to add extra images in the panel?

    Thank you

    • 2

    You need a files section: https://getkirby.com/docs/reference/panel/sections/files

    In your files section, you can set a min and max value, see the options.

    On a side note, please always use the questions category for questions. Help to track open questions. Thanks.

    3

    Thank you and sorry for the category bit :frowning:

    4

    No problem, we are very forgiving :wink:. It was just meant as a little reminder for the future.

    1 Like
    5

    I have added the option of the gallery but I don’t understand now how to create the option to add those images into one list item with the option to add more. Does that make sense?

    Here is an image of what I need to add:

    So I can upload the logo and add the alt text from within the panel. I want the option to add one and then hit a plus (+) to add another and repeat.

    6

    I’m afraid I don’t understand your question. What you are showing is the frontend.

    7

    Yes, sorry @texnixe I’m making the panel part to be able to generate this (with the option to add more or delete others):

    <div class="module">
    <section class="workedwith">
      <h3 class="white">Working alongside happy teams at amazing companies such as…</h3>
      <ul class="companylogos">
        <li><img src="./assets/img/marvel-logo.png" alt="Marvel"></li>
        <li><img src="./assets/img/disney-logo.png" alt="Disney"></li>
        <li><img src="./assets/img/pixar-logo.png" alt="Pixar"></li>
        <li><img src="./assets/img/cnc-logo.png" alt="Create and Craft"></li>
        <li><img src="./assets/img/mobas-logo.png" alt="Mobas"></li>
        <li><img src="./assets/img/sos-logo.png" alt="Search Office Space"></li>
        <li><img src="./assets/img/pentangle-logo.png" alt="Pentangle"></li>
        <li><img src="./assets/img/boagworld-logo.png" alt="Boagworld"></li>
        <li><img src="./assets/img/countrywide.png" alt="Countrywide"></li>
      </ul>
    </section>
  </div>

    So really I need: <li><img src="./assets/img/marvel-logo.png" alt="Marvel"></li> this part to be added from within the Admin Panel. This is not a problem usually if I just want to add an image and an alt tag, but the problem I have is how do I create a form in the panel to add more?

    fields:
  logo:
    label: Company logo
    type:  image
  alttext:
    label: Text
    type: text
  link:
    label: Link
    type: url

    So this would just add one, I just need the option to add more when needed.

    8

    You have several options:

    Either, you add a files section - as already suggested above - where the user can upload these logos, maybe with a special template with set of fields (link, alttest.) that you need (metadata).

    Or, you add a general files section for uploading and then use a files field to select those images (again, the additional information is added in the meta data)

    Or, you create an upload section and then use a structure field where you select the images and add the fields for the extra information.

    I’d go with the first option.

    1 Like
    9

    Thank you @texnixe I will look into this further. :slight_smile:

    10

    But if you want to store your images in the assets folder, then maybe use a structure field with a select where you use the API option to get the images.