Question T11390
Visible to All Users

Change the ImagePicker template

created 2 years ago (modified 2 years ago)

[Ticket cloned from T10830: Go to the next page if a specific question is answered]

I want to change the ImagePicker template and for example show the textvalue in image.for example
Clipboard-File-2.png

Do I have to realize this in CSS or can we change the whole template easily? :-)

Show previous comments (2)

    Hello Sven,
    I've just realized that you can display a label above an image item using the General | Show Image Captions property (showLabel).
    Clipboard-File-1.png

    Please let me know if this option works for you. Otherwise, we'll consider overriding an item template.

      Hi Jane,

      this helps us only partially.
      In fewer versions we had done this via SurveyTemplateText

      JavaScript
      var template = document.getElementById("template-imagepicker").text; new Survey .SurveyTemplateText() .replaceText(template, "question", "imagepicker");

      Is that no longer possible?

        Hello Sven,
        Thank you for the clarification.

        this helps us only partially

        Would you please elaborate on this? Do you mean that you wish to display a label/caption not under an image item, but above (e.g., at the center) of an image item?

        In fewer versions we had done this via SurveyTemplateText

        In the current version, you may customize question templates by extending a corresponding component (check this demo). If we're talking about an Image Picker question, an image item is represented by the SurveyQuestionImagePickerItem element. An image template content is defined in the renderElement function.
        I've investigated this task, however, now, it seems to be impossible to override rendering for the SurveyQuestionImagePickerItem element. Would you please confirm whether you'd like to override the default Image item template?

        I look forward to your reply.

        Answers

        created 2 years ago

        Hi Jane,

        thanks for supporting :-)
        We could solve everything by CSS only.

        So we have no need to change the templates anymore!

        Only some additional classes we set in the renderElement function!

        Thx!

          Comments (1)

            Hi Sven,
            Thank you for sharing good news :) You're always welcome!

            If you have some time, please take a moment to share your experience with our company by contributing a short review for SurveyJS page at g2.com.

            I appreciate your cooperation in advance.

            Thank you,
            Jane