Problem/Motivation

The Webform image select element should support reusable images. The Webform options config entity only supports name/value pairs for select menu, checkboxes, and radio buttons.

Proposed resolution

Create a Webform Image Select Image module with a dedicated config entity to manage reusable images.

Notes

  • The image select element will moved into a dedicate sub-module called 'Webform image select' (webform_image_select.module)

Remaining tasks

  • Create webform_image_select.module
  • Move \Drupal\webform\Element\WebformImageSelect
  • Move \Drupal\webform\Plugin\WebformElement\WebformImageSelect
  • Move \Drupal\webform\Tests\Element\WebformElementImageSelectTest
  • Move webform.webform.test_element_image_select.yml
  • Create WebformImageSelectImages config entity with schema
  • Create WebformImageSelectImages manager
  • Create WebformImageSelectImages select element.
  • Update WebformImageSelect
  • Add alter hook to Webform libraries
  • Allow external libraries to be required
  • Write alter hooks
  • Update examples.
  • Create webform_image_select_test.module
  • Write update hook to enable the webform_image_select.module if it is being used by any existing webform
  • Write tests
  • Code review
  • Write test script
  • Write change record

    • Publish change record

User interface changes

  • Adding 'Images' tab to 'Configuration' (/admin/structure/webform/config/options/images)
  • Update image select element ui.

API changes

Webform libraries manager will allow other modules to declare external libraries

Data model changes

None

Test Script

Test configuration import via install

  • Enable webform_image_select module or run update hooks (/admin/modules)
  • Confirm that kitten images are imported (/admin/structure/webform/config/images/manage)

Test IMCE integration

  • Download IMCE
  • Enable IMCE (/admin/modules)
  • Confirm browse link is added below images src (/admin/structure/webform/config/images/manage/bears/edit)

Test CRUD operations

  • Create test images (/admin/structure/webform/config/images/manage/add)
  • Update test images (/admin/structure/webform/config/images/manage/test/edit)
  • Edit source new images (/admin/structure/webform/config/images/manage/test/source)
  • Duplicate new images (/admin/structure/webform/config/images/test/duplicate)
  • Delete new images (/admin/structure/webform/config/images/test/delete)

Test image select element with custom images

  • Add image select to Contact form (/admin/structure/webform/manage/contact)
  • Enter custom images and save (/admin/structure/webform/manage/contact/element/add/webform_image_select)
  • Confirm image select element (/form/contact)

Test image select element with reusable image

  • Add images select to Contact form (/admin/structure/webform/manage/contact)
  • Select reusable kittens and save (/admin/structure/webform/manage/contact/element/add/webform_image_select)
  • Confirm image select element (/form/contact)

Test image select preview and rendering

  • Generate test submission (/webform/contact/test)
  • Confirm results table show thumbnails (/admin/structure/webform/manage/contact/results/submissions)
  • Confirm submission HTML view (admin/structure/webform/manage/contact/submission/SID)
  • Confirm submission Plain text view (admin/structure/webform/manage/contact/submission/SID/text)
CommentFileSizeAuthor
#36 2933909-36.patch99.07 KBjrockowitz
#33 2933909-32.patch99.13 KBjrockowitz
#31 2933909-30.patch105.13 KBjrockowitz
#28 2933909-28.patch0 bytesjrockowitz
#25 2933909-25.patch96.17 KBjrockowitz
#22 2933909-22.patch94.05 KBjrockowitz
#15 2933909-15.patch76.78 KBjrockowitz
#12 2933909-12.patch72.84 KBjrockowitz
#8 2933909-8.patch54.35 KBjrockowitz
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Adrian83 created an issue. See original summary.

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Title: Add reusable image options » Webform Image Select Element Improvements
Issue summary: View changes
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Issue summary: View changes

  • jrockowitz committed 3ff1538 on 2933909-image-select 
    Issue #2933909: Webform Image Select Element Improvements. Build...

  • jrockowitz committed f1315da on 2933909-image-select 
    Issue #2933909: Webform Image Select Element Improvements. Wireframe...

  • jrockowitz committed 73d06e8 on 2933909-image-select 
    Issue #2933909: Webform Image Select Element Improvements. Wireframe...

  • jrockowitz committed d1d4023 on 2933909-image-select 
    Issue #2933909: Webform Image Select Element Improvements. Fully setup...
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Active » Needs review
FileSize
2933909-8.patch54.35 KB

Patch is making sure that nothing is breaking.

Status: Needs review » Needs work

The last submitted patch, 8: 2933909-8.patch, failed testing. View results

  • jrockowitz committed c05d016 on 2933909-image-select 
    Issue #2933909: Webform Image Select Element Improvements. Add webform...

  • jrockowitz committed a51ee75 on 2933909-image-select 
    Issue #2933909: Webform Image Select Element Improvements. Add other...
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Needs work » Needs review
FileSize
2933909-12.patch72.84 KB

Status: Needs review » Needs work

The last submitted patch, 12: 2933909-12.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

  • jrockowitz committed 7d7d1c0 on 2933909-image-select 
    Issue #2933909: Webform Image Select Element Improvements. Update...
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Needs work » Needs review
FileSize
2933909-15.patch76.78 KB
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Issue summary: View changes

Status: Needs review » Needs work

The last submitted patch, 15: 2933909-15.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

  • jrockowitz committed 49be54b on 2933909-image-select 
    Issue #2933909: Webform Image Select Element Improvements. Update...
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Issue summary: View changes

  • jrockowitz committed 826c72f on 2933909-image-select 
    Issue #2933909: Webform Image Select Element Improvements. Final tweaks...

  • jrockowitz committed aff1dec on 2933909-image-select 
    Issue #2933909: Webform Image Select Element Improvements. Final tweaks...
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Needs work » Needs review
FileSize
2933909-22.patch94.05 KB

Status: Needs review » Needs work

The last submitted patch, 22: 2933909-22.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

  • jrockowitz committed 198d313 on 2933909-image-select 
    Issue #2933909: Webform Image Select Element Improvements. Fix broken...
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Needs work » Needs review
FileSize
2933909-25.patch96.17 KB
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House for Rosewood Marketing commented
Assigned: Unassigned » jrockowitz
Issue summary: View changes

  • jrockowitz committed 339b0ad on 2933909-image-select 
    Issue #2933909 by jrockowitz: Webform Image Select Element Improvements...
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House for Rosewood Marketing commented
FileSize
2933909-28.patch0 bytes
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House for Rosewood Marketing commented
Issue summary: View changes

@Adrian83 Please review the patch or checkout the dedicated GIT branch.

Status: Needs review » Needs work

The last submitted patch, 28: 2933909-28.patch, failed testing. View results

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House for Rosewood Marketing commented
Status: Needs work » Needs review
FileSize
2933909-30.patch105.13 KB

Status: Needs review » Needs work

The last submitted patch, 31: 2933909-30.patch, failed testing. View results

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House for Rosewood Marketing commented
Status: Needs work » Needs review
FileSize
2933909-32.patch99.13 KB

Ouch! I rebased the branch and this patch should be okay.

Adrian83’s picture

Adrian83 CreditAttribution: Adrian83 commented

I'll try to take a look at the patch this afternoon.

Adrian83’s picture

Adrian83 CreditAttribution: Adrian83 commented

I installed the patch via composer against dev successfully. But in order to apply the patch I needed to change version from rc3 to dev. That was successful, but when I try to run drush updb, I get the following error:

PHP Fatal error:  Cannot redeclare webform_update_8108() (previously declared in /app/web/modules/contrib/webform/includes/webform.install.update.inc:1998) in /app/web/modules/contrib/webform/includes/webform.install.update.inc on line 2032
PHP Stack trace:
PHP   1. {main}() /app/vendor/drush/drush/drush:0
PHP   2. require() /app/vendor/drush/drush/drush:4
PHP   3. Drush\Runtime\Runtime->run() /app/vendor/drush/drush/drush.php:64
PHP   4. Drush\Runtime\Runtime->doRun() /app/vendor/drush/drush/src/Runtime/Runtime.php:41
PHP   5. Drush\Application->run() /app/vendor/drush/drush/src/Runtime/Runtime.php:112
PHP   6. Drush\Application->doRun() /app/vendor/symfony/console/Application.php:125
PHP   7. Drush\Application->doRunCommand() /app/vendor/symfony/console/Application.php:206
PHP   8. Consolidation\AnnotatedCommand\AnnotatedCommand->run() /app/vendor/symfony/console/Application.php:859
PHP   9. Consolidation\AnnotatedCommand\AnnotatedCommand->execute() /app/vendor/symfony/console/Command/Command.php:264
PHP  10. Consolidation\AnnotatedCommand\CommandProcessor->process() /app/vendor/consolidation/annotated-command/src/AnnotatedCommand.php:404
PHP  11. Consolidation\AnnotatedCommand\CommandProcessor->validateRunAndAlter() /app/vendor/consolidation/annotated-command/src/CommandProcessor.php:150
PHP  12. Consolidation\AnnotatedCommand\CommandProcessor->runCommandCallback() /app/vendor/consolidation/annotated-command/src/CommandProcessor.php:181
PHP  13. call_user_func_array:{/app/vendor/consolidation/annotated-command/src/CommandProcessor.php:235}() /app/vendor/consolidation/annotated-command/src/CommandProcessor.php:235
PHP  14. Drush\Commands\core\UpdateDBCommands->updatedb() /app/vendor/consolidation/annotated-command/src/CommandProcessor.php:235
PHP  15. drupal_load_updates() /app/vendor/drush/drush/src/Commands/core/UpdateDBCommands.php:35
PHP  16. module_load_install() /app/web/core/includes/install.inc:82
PHP  17. module_load_include() /app/web/core/includes/module.inc:93
PHP  18. require_once() /app/web/core/includes/module.inc:136

Fatal error: Cannot redeclare webform_update_8108() (previously declared in /app/web/modules/contrib/webform/includes/webform.install.update.inc:1998) in /app/web/modules/contrib/webform/includes/webform.install.update.inc on line 2032

Call Stack:
    0.0015     379304   1. {main}() /app/vendor/drush/drush/drush:0
    0.0020     385968   2. require('/app/vendor/drush/drush/drush.php') /app/vendor/drush/drush/drush:4
    0.0332    1648400   3. Drush\Runtime\Runtime->run() /app/vendor/drush/drush/drush.php:64
    0.0332    1648400   4. Drush\Runtime\Runtime->doRun() /app/vendor/drush/drush/src/Runtime/Runtime.php:41
    0.8297    8544936   5. Drush\Application->run() /app/vendor/drush/drush/src/Runtime/Runtime.php:112
    0.8335    8545128   6. Drush\Application->doRun() /app/vendor/symfony/console/Application.php:125
    0.8340    8545080   7. Drush\Application->doRunCommand() /app/vendor/symfony/console/Application.php:206
    0.8541    8579808   8. Consolidation\AnnotatedCommand\AnnotatedCommand->run() /app/vendor/symfony/console/Application.php:859
    6.8435   34558792   9. Consolidation\AnnotatedCommand\AnnotatedCommand->execute() /app/vendor/symfony/console/Command/Command.php:264
    6.8437   34559704  10. Consolidation\AnnotatedCommand\CommandProcessor->process() /app/vendor/consolidation/annotated-command/src/AnnotatedCommand.php:404
    6.8437   34559704  11. Consolidation\AnnotatedCommand\CommandProcessor->validateRunAndAlter() /app/vendor/consolidation/annotated-command/src/CommandProcessor.php:150
    6.8467   34573192  12. Consolidation\AnnotatedCommand\CommandProcessor->runCommandCallback() /app/vendor/consolidation/annotated-command/src/CommandProcessor.php:181
    6.8470   34574904  13. call_user_func_array:{/app/vendor/consolidation/annotated-command/src/CommandProcessor.php:235}() /app/vendor/consolidation/annotated-command/src/CommandProcessor.php:235
    6.8470   34575296  14. Drush\Commands\core\UpdateDBCommands->updatedb() /app/vendor/consolidation/annotated-command/src/CommandProcessor.php:235
    6.8506   34780784  15. drupal_load_updates() /app/vendor/drush/drush/src/Commands/core/UpdateDBCommands.php:35
    6.9052   35688536  16. module_load_install() /app/web/core/includes/install.inc:82
    6.9052   35688536  17. module_load_include() /app/web/core/includes/module.inc:93
    6.9057   35695264  18. require_once('/app/web/modules/contrib/webform/webform.install') /app/web/core/includes/module.inc:136

 [error]  Drush command terminated abnormally due to an unrecoverable error.
Error: Cannot redeclare webform_update_8108() (previously declared in /app/web/modules/contrib/webform/includes/webform.install.update.inc:1998) in /app/web/modules/contrib/webform/includes/webform.install.update.inc, line 2032
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House for Rosewood Marketing commented
FileSize
2933909-36.patch99.07 KB

Attached is a re-rolled patch.

Adrian83’s picture

Adrian83 CreditAttribution: Adrian83 commented

I was able to install the patch without problems. Everything works as I would have expected it to. I added two image select optionsets and added them to two different forms. Then I removed an image from the optionset and verified that the image was removed from both forms. I added the image back in and verified that the image reappeared in both forms.

So far, I'm not seeing anything missing.

  • jrockowitz committed 24a8b7d on 8.x-5.x 
    Issue #2933909 by jrockowitz: Webform Image Select Element Improvements
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House for Rosewood Marketing commented
Status: Needs review » Fixed

I committed the patch. Thanks

Adrian83’s picture

Adrian83 CreditAttribution: Adrian83 commented

Thank you.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

simoncritchell’s picture

simoncritchell CreditAttribution: simoncritchell commented

Hello Jacob,

I am trying to get this module to allow me choose an image in select option.. i have 3 options: (new is red) colour or png img, in progress is yellow, and green is done.. should i be using CSS to view the selectd option in webform results ( a css colour per selected option?) or should i be using this module?

using D7 and all modules are Up to date..

this is the value i get in my webform edit field : a:1:{i:0;s:0:"";}

should i be using a special img folder? is there some img forlder settings to get set? i semms i can't save imgs in my select img widget.

thanks

cheers simon*

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House for Rosewood Marketing commented

This functionality is only available for D8. For D7, try using https://www.drupal.org/project/webform_select_image

simoncritchell’s picture

simoncritchell CreditAttribution: simoncritchell commented

Thank you Jacob, i am using D7 and https://www.drupal.org/project/webform_select_image

Somehow it doesn't manage to store the uploaded images in :

label- form key- type- value-
img | img | Select image | a:1:{i:0;s:0:"";} | Modify Clone Cancel

Should i maybe: fixe some permissions? or set some special folder for loading img?

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House for Rosewood Marketing commented

@simoncritchell You need to post your question to https://www.drupal.org/project/issues/webform_select_image?categories=All

simoncritchell’s picture

simoncritchell CreditAttribution: simoncritchell commented

Hello Jacob,
Could we alter row background colour based on select option? it allow a user to put a webform submission into a prefered state ( new request ) and the row background colour would set to red for example?

any ideas?

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House for Rosewood Marketing commented

Altering the background colors would have to be done using CSS.

coxy0001’s picture

coxy0001 CreditAttribution: coxy0001 commented

Having issues with this - the images don't always render. See source code below from inspect:

When it doesn't render the images:

<select data-drupal-selector="edit-test" data-images="{&quot;kitten_1&quot;:{&quot;text&quot;:&quot;Cute Kitten 1&quot;,&quot;src&quot;:&quot;http:\/\/placekitten.com\/220\/200&quot;},&quot;kitten_2&quot;:{&quot;text&quot;:&quot;Cute Kitten 2&quot;,&quot;src&quot;:&quot;http:\/\/placekitten.com\/180\/200&quot;},&quot;kitten_3&quot;:{&quot;text&quot;:&quot;Cute Kitten 3&quot;,&quot;src&quot;:&quot;http:\/\/placekitten.com\/130\/200&quot;},&quot;kitten_4&quot;:{&quot;text&quot;:&quot;Cute Kitten 4&quot;,&quot;src&quot;:&quot;http:\/\/placekitten.com\/270\/200&quot;}}" class="webform-image-select js-webform-image-select form-select" id="edit-test--3TQDJ1Uoh1w" name="test"><option value="" selected="selected">- None -</option><option value="kitten_1">Cute Kitten 1</option><option value="kitten_2">Cute Kitten 2</option><option value="kitten_3">Cute Kitten 3</option><option value="kitten_4">Cute Kitten 4</option></select>

When it does render the images:

<select data-drupal-selector="edit-test" data-images="{&quot;kitten_1&quot;:{&quot;text&quot;:&quot;Cute Kitten 1&quot;,&quot;src&quot;:&quot;http:\/\/placekitten.com\/220\/200&quot;},&quot;kitten_2&quot;:{&quot;text&quot;:&quot;Cute Kitten 2&quot;,&quot;src&quot;:&quot;http:\/\/placekitten.com\/180\/200&quot;},&quot;kitten_3&quot;:{&quot;text&quot;:&quot;Cute Kitten 3&quot;,&quot;src&quot;:&quot;http:\/\/placekitten.com\/130\/200&quot;},&quot;kitten_4&quot;:{&quot;text&quot;:&quot;Cute Kitten 4&quot;,&quot;src&quot;:&quot;http:\/\/placekitten.com\/270\/200&quot;}}" class="webform-image-select js-webform-image-select form-select" id="edit-test--J1F4QDpwCF0" name="test" tabindex="-1"><option value="" selected="selected">- None -</option><option value="kitten_1" data-img-src="http://placekitten.com/220/200" data-img-label="Cute Kitten 1" data-img-alt="Cute Kitten 1">Cute Kitten 1</option><option value="kitten_2" data-img-src="http://placekitten.com/180/200" data-img-label="Cute Kitten 2" data-img-alt="Cute Kitten 2">Cute Kitten 2</option><option value="kitten_3" data-img-src="http://placekitten.com/130/200" data-img-label="Cute Kitten 3" data-img-alt="Cute Kitten 3">Cute Kitten 3</option><option value="kitten_4" data-img-src="http://placekitten.com/270/200" data-img-label="Cute Kitten 4" data-img-alt="Cute Kitten 4">Cute Kitten 4</option></select>
<ul class="thumbnails image_picker_selector"><li><div class="thumbnail" tabindex="0" role="radio" title="Cute Kitten 1"><img class="image_picker_image" src="http://placekitten.com/220/200" alt="Cute Kitten 1"></div></li><li><div class="thumbnail" tabindex="0" role="radio" title="Cute Kitten 2"><img class="image_picker_image" src="http://placekitten.com/180/200" alt="Cute Kitten 2"></div></li><li><div class="thumbnail" tabindex="0" role="radio" title="Cute Kitten 3"><img class="image_picker_image" src="http://placekitten.com/130/200" alt="Cute Kitten 3"></div></li><li><div class="thumbnail" tabindex="0" role="radio" title="Cute Kitten 4"><img class="image_picker_image" src="http://placekitten.com/270/200" alt="Cute Kitten 4"></div></li></ul>

It doesn't always render the code properly - why is this?

EDIT: To give a bit more context.... I have wizard page selected that contains this image select. When I load the webform this image select is in page 1 and the images don't appear. When I fill in the page 1 form fields, go to page 2 and then click "page 1" in the wizard toolbar the image select images then display.

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House for Rosewood Marketing commented

If the image select fails to render it most likely due to an unrelated JavaScript error which stops the image select JavaScript from completing. You should check what is being logged in the browser's JavaScript console.