Smart select - how to set CSS for item images

Questions
1

I was able to get smart select working within a popup that I have for article editing. In each article I have a set of potential hero images to choose from during the edit process. The images are 1200px but I want to be able to display them as 300x250 images in smart select. How can I set the width and height OR apply a CSS class to the img html tags created by smart select?

note: I am using Cloudinary for images so I could create a transform there for the width and height I need but would like to have the option of modifying the CSS style of items in smart select

note: i’ll be shifting this to a template each loop later since there could be 1 hero image or 15 hero images

            <li>
              <a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-routable-modals="false">
                <select name="hero">
                  <option value="0" selected data-option-image="{{this.current.hero[0]}}"></option>
                  <option value="1" data-option-image="{{this.current.hero[1]}}"></option>
                  <option value="2" data-option-image="{{this.current.hero[2]}}"></option>
                </select>
                <div class="item-content">
                  <div class="item-inner">
                    <div class="item-title">Hero Image</div>
                  </div>
                </div>
              </a>
            </li>
2

To call a function in my component can I do something like:

<a href="#" @close="updateHero()" class="item-link smart-select smart-select-init" data-open-in="popup" data-routable-modals="false">

If I can call a method when the smart select popup closes is there a way to also send the method the resulting value of the selection? e.g. “0” or “1” or “2” etc in my case.

3

Inspect a smart select popup, and add appropriate CSS rules, something like:

.smart-select-popup img {
  width: 40px;
  height: 40px;
}

Should be

<a href="#" @smartselect:close="updateHero()" ...

No, you need to use SS’s JavaScript API https://framework7.io/docs/smart-select.html

4

Thanks!

Is the event object sent in to the routine like it is for @click? Could I get access to the selected value using that event object?

Currently this is all in a component and I don’t create the smart select programmatically. If I can’t get the value from the event object what would be the best way in a method of my component to get access to the smart select object.

Here is my a little more of the extended component template including loops. What I want to do when a smart selection is made and the selection popup is closed is to change “selectedimage” to the image chosen in the smart select.

            <li>
                <div>
                    {{#with current}}
                    <img id="selectedimage" src="{{hero}}[{{hindex}}]" style="width:300px;height:250px;margin-left:15px;">
                    {{/with}}
                </div>
            </li>
            <li>
              <a href="#" @smartselect:close="updateHero()" class="item-link smart-select smart-select-init" data-open-in="popup" data-routable-modals="false">
                <select name="hero">
                {{#each current.hero}}
                  <option value="{{@index}}" selected data-option-image="{{this}}"></option>
                {{/each}}
                </select>
                <div class="item-content">
                  <div class="item-inner">
                    <div class="item-title">Hero Image</div>
                  </div>
                </div>
              </a>
            </li>
5

In your updateHero() function just check what value is selected, e.g. $$('.smart-select select').val()