update to values being passed into form state. contol for when css setting can be seen

bg_img_field.module

@@ -38,15 +38,26 @@ function bg_img_field_help($route_name, RouteMatchInterface $route_match) {
  * Implements hook_form_alter().
  */
 function bg_img_field_form_alter(&$form, FormStateInterface $form_state, $form_id) {
-
-  // Remove the cardinality container from the background image field.
   if ($form_id === 'field_config_edit_form') {
     $field_widget_storage = $form_state->getStorage();
-    $pluginId = $field_widget_storage['default_value_widget']->getPluginId();
 
-    if ($pluginId === 'bg_img_field_widget') {
-      unset($form["default_value"]);
+    if (isset($field_widget_storage['default_value_widget'])) {
+      $pluginId = $field_widget_storage['default_value_widget']->getPluginId();
 
+      if ($pluginId === 'bg_img_field_widget') {
+        unset($form["default_value"]);
+      }
     }
   }
 }
+
+/**
+ * Implements hook_theme().
+ */
+function bg_img_field_theme($existing, $type, $theme, $path) {
+  return [
+    'background_style' => [
+      'variables' => ['css' => NULL],
+    ],
+  ];
+}

config/schema/bg_img_field.schema.yml

@@ -10,6 +10,9 @@ field.widget.settings.bg_img_field_widget:
   type: mapping
   label: 'Default field settings'
   mapping:
+    hide_css_settings:
+      type: boolean
+      label: 'Whether to show or hide css settings on edit screens'
     css_settings:
       type: mapping
       label: 'CSS settings'

src/Plugin/Field/FieldFormatter/BgImgFieldFormatter.php

@@ -192,6 +192,12 @@ class BgImgFieldFormatter extends ResponsiveImageFormatter implements ContainerF
     $elements = [];
     $css = "";
 
+    $image_link_setting = $this->getSetting('image_link');
+
+    $cache_contexts = [];
+    if ($image_link_setting == 'file') {
+      $cache_contexts[] = 'url.site';
+    }
     // Collect cache tags to be added for each item in the field.
     $responsive_image_style = $this->responsiveImageStyleStorage->load($this->getSetting('responsive_image_style'));
     $image_styles_to_load = [];
@@ -220,14 +226,30 @@ class BgImgFieldFormatter extends ResponsiveImageFormatter implements ContainerF
 
       // Attach to head on element to create style tag in the html head.
       if (!empty($css)) {
-        // Use the selector in the id to avoid collisions with multiple
-        // background formatters on the same page.
-        $id = 'picture-background-formatter-' . $selector;
-        $elements['#attached']['html_head'][] = [[
-          '#tag' => 'style',
-          '#value' => new CSSSnippet($css),
-        ], $id,
-        ];
+        $current_path =  \Drupal::request()->getRequestUri();
+        if(preg_match('/node\/(\d+)\/layout/', $current_path, $matches)) {
+          $n = null;
+          $elements = [
+            '#theme' => 'background_style',
+            '#css' => $css,
+            '#cache' => [
+              'tags' => $cache_tags,
+              'contexts' => $cache_contexts,
+            ],
+          ];
+        } else {
+          // Use the selector in the id to avoid collisions with multiple
+          // background formatters on the same page.
+          $id = 'picture-background-formatter-' . $selector;
+          $elements['#attached']['html_head'][] = [[
+            '#tag' => 'style',
+            '#value' => new CSSSnippet($css),
+            '#cache' => [
+              'tags' => $cache_tags,
+              'contexts' => $cache_contexts,
+            ],
+          ], $id];
+        }
       }
     }
 

src/Plugin/Field/FieldType/BgImgItem.php

@@ -6,6 +6,7 @@ use Drupal\Core\Field\FieldStorageDefinitionInterface;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\TypedData\DataDefinition;
 use Drupal\image\Plugin\Field\FieldType\ImageItem;
+use Robo\State\Data;
 
 /**
  * Plugin implementation of the 'bg_img_field' field type.
@@ -14,8 +15,11 @@ use Drupal\image\Plugin\Field\FieldType\ImageItem;
  *   id = "bg_img_field",
  *   label = @Translation("Background Image Field"),
  *   description = @Translation("Field for creating responsive background
- *   images."), default_widget = "bg_img_field_widget", default_formatter =
- *   "bg_img_field_formatter"
+ *   images."),
+ *   default_widget = "bg_img_field_widget",
+ *   default_formatter = "bg_img_field_formatter",
+ *   list_class = "\Drupal\file\Plugin\Field\FieldType\FileFieldItemList",
+ *   constraints = {"ReferenceAccess" = {}, "FileValidation" = {}}
  * )
  */
 class BgImgItem extends ImageItem {
@@ -120,6 +124,10 @@ class BgImgItem extends ImageItem {
       ->setLabel(t('CSS Background Position Property'))
       ->setDescription(t("CSS attribute that set the background position value of the background image."));
 
+    $properties['hide_css_Settings'] = DataDefinition::create('boolean')
+      ->setLabel(t("Hide CSS Settings"))
+      ->setDescription(t("Hides CSS settings on edit screens of the background image field type"));
+
     return $properties;
   }
 
@@ -199,8 +207,7 @@ class BgImgItem extends ImageItem {
     $elements['css_settings']['css_background_position'] = [
       '#type' => 'radios',
       '#title' => $this->t('Background Position'),
-      '#description' => $this->t('Set a background position, leave unchecked to
-      # have your own in your theme css.'),
+      '#description' => $this->t('Set a background position'),
       '#default_value' => $css_option_settings['css_background_position'],
       '#options' => [
         "inherit" => $this->t("inherit"),

src/Plugin/Field/FieldWidget/BgImageFieldWidget.php

@@ -29,6 +29,7 @@ class BgImageFieldWidget extends ImageWidget {
     $settings['css_settings']['css_repeat'] = 'inherit';
     $settings['css_settings']['css_background_size'] = 'inherit';
     $settings['css_settings']['css_background_position'] = 'inherit';
+    $settings['hide_css_settings'] = 0;
 
     return $settings;
   }
@@ -39,6 +40,13 @@ class BgImageFieldWidget extends ImageWidget {
   public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
     $elements = parent::formElement($items, $delta, $element, $form, $form_state);
 
+    $item = $items[$delta]->getFieldDefinition()->getSettings();
+
+    // set the form state with values of css_settings and hide_css_settings
+    // to be used by the process method.
+    $form_state->set('css_values',$item['css_settings'] );
+    $form_state->set('hide_css_settings', $this->getSetting('hide_css_settings'));
+
     $elements['#upload_validators']['file_validate_extensions'][0] =
       $this->getFieldSetting('file_extensions');
 
@@ -68,34 +76,22 @@ class BgImageFieldWidget extends ImageWidget {
   public static function process($element, FormStateInterface $form_state, $form) {
     $elements = parent::process($element, $form_state, $form);
 
-    $entity = $form_state->getformObject()->getEntity();
-
-    // Check to see if the entity field definition exist.
-    // If not apply default values.
-    if (isset($element['#field_name']) && $entity->getFieldDefinition($element['#field_name']) !== NULL) {
-      $field_settings = $entity->getFieldDefinition($element['#field_name'])
-        ->getSettings();
-    }
-    else {
-      $field_settings = self::defaultSettings();
-    }
-
-    $css_option_settings = $field_settings['css_settings'];
-
     if ($element['#files']) {
-
+      $css_option_settings = $form_state->get('css_values');
       $elements['css_settings'] = [
         '#type' => 'details',
         '#title' => t('CSS Settings'),
         '#description' => t('Set default CSS properties for the background image.'),
         '#open' => FALSE,
+        '#attributes' => $form_state->get('hide_css_settings') ? ['class' =>
+          ['visually-hidden']] : ['class' => ['visually-shown']],
       ];
 
-      $token_types = [$entity->getEntityType()->id()];
+      $token_types = [];
 
       // Background selector value.
       $selector = !empty($element['#value']['css_selector']) ?
-      $element['#value']['css_selector'] : $css_option_settings['css_selector'];
+        $element['#value']['css_selector'] : $css_option_settings['css_selector'];
 
       // The css selector input field needed to.
       $elements['css_settings']['css_selector'] = [
@@ -176,7 +172,22 @@ class BgImageFieldWidget extends ImageWidget {
         '#tree' => TRUE,
       ];
     }
+
     return $elements;
   }
 
+  public function settingsForm(array $form, FormStateInterface $form_state) {
+    $element = parent::settingsForm($form, $form_state);
+
+    $element['hide_css_settings'] = [
+      '#type' => 'checkbox',
+      '#title' => t("Hide CSS Settings"),
+      '#description' => t("Do not show CSS settings when creating content 
+      on nodes, blocks, custom entities, media,  and paragraph items"),
+      '#default_value' => $this->getSetting('hide_css_settings'),
+    ];
+
+    return $element;
+  }
+
 }

src/Plugin/media/Source/BackgroundImageMedia.php

+<?php
+namespace Drupal\bg_img_field\Plugin\media\Source;
+
+use Drupal\media\Plugin\media\Source\Image;
+
+/**
+ * Image entity media source.
+ *
+ * @see \Drupal\Core\Image\ImageInterface
+ *
+ * @MediaSource(
+ *   id = "bg_img_media_field",
+ *   label = @Translation("Background Image"),
+ *   description = @Translation("Use local images for reusable media."),
+ *   allowed_field_types = {"bg_img_field"},
+ *   default_thumbnail_filename = "no-thumbnail.png",
+ *   thumbnail_alt_metadata_attribute = "thumbnail_alt_value"
+ * )
+ */
+class BackgroundImageMedia extends Image {
+
+}
\ No newline at end of file

templates/background-style.html.twig

+<style>
+  {{ css }}
+</style>
\ No newline at end of file