cyberweb 0.4.174 → 0.5.225

data/lib/cyberweb/web_object/images.rb

@@ -8,105 +8,131 @@ require 'cyberweb/base/base.rb'
 
 module Cyberweb
 
-class WebObject < Base # === Cyberweb::WebObject
+class WebObject < ::Cyberweb::Base # === Cyberweb::WebObject
 
-  require 'cyberweb/requires/require_web_images.rb'
+  # ========================================================================= #
+  # === return_path_to_the_images_directory
+  # ========================================================================= #
+  def return_path_to_the_images_directory(
+      path_to_use = relative_path?
+    )
+    return "#{path_to_use}data/"\
+           "#{return_name_of_the_images_directory}/"
+  end
 
   # ========================================================================= #
-  # === drag_local_image_or_remote_image
+  # === images_css
   #
-  # As local_image_or_remote_image(), but with the default id argument to
-  # refer to :drag.
+  # This method allows the user to set the same CSS rules for all
+  # images used on a given WebObject.
   # ========================================================================= #
-  def drag_local_image_or_remote_image(
-      local_image             = '',
-      remote_image_substitute = '', # This one should be the remote URL.
-      optional_css_class      = '',
-      optional_the_id         = :drag,
-      optional_css_style      = '',
-      alt_text                = '',
-      &block
-    )
-    local_image_or_remote_image(
-      local_image,
-      remote_image_substitute,
-      optional_css_class,
-      optional_the_id,
-      optional_css_style
-    ) { :drag }
-  end; alias dlocal_image_or_remote_image drag_local_image_or_remote_image # === dlocal_image_or_remote_image
-       alias dimg2                        drag_local_image_or_remote_image # === dimg2
+  def images_css(i)
+    @internal_hash[:global_CSS_rules_for_all_images] = i
+  end
 
   # ========================================================================= #
-  # === local_image_or_remote_image
+  # === draggable_image
+  #
+  # Example code how to tap into this method:
+  #
+  #   draggable_image 'STD/USB_CONNECTION_DEVICE.png',
+  #                   'mar1em bblack1 mars3em'
   #
-  # This method can be used to add a substitute image in the event that
-  # a local image could not be found. Otherwise it behaves exactly like
-  # image() does.
+  # It may be more convenient to use the alias name dimg().
   # ========================================================================= #
-  def local_image_or_remote_image(
-      local_image             = '',
-      remote_image_substitute = '', # This one should be the remote URL.
-      optional_css_class      = '',
-      optional_the_id         = '',
-      optional_css_style      = '',
-      alt_text                = '',
+  def draggable_image(
+      url       = '',
+      css_class = :empty_string_or_global_css_rules_for_images, 
+      the_id    = '',
+      css_style = '',
+      alt_text  = '',
       &block
     )
-    # ======================================================================= #
-    # We first have to decide whether the image exists or whether it does
-    # not exist, at the specified location. If it exists then we can use
-    # the regular img() call; otherwise we have to use the second argument
-    # to this method.
-    # ======================================================================= #
-    assumed_path = rds(
-      path_to_the_image_directory?+
-      local_image
-    )
-    if File.exist? assumed_path
-      img(
-        local_image,
-        optional_css_class,
-        optional_the_id,
-        optional_css_style,
-        alt_text,
-        &block
-      )
+    if the_id and the_id.empty?
+      the_id = (
+                'drag_'+
+                 File.basename(url.to_s).
+                 downcase.
+                 delete_suffix(
+                   File.extname(url.to_s)
+                 )
+               ).tr('.','_')
+    end
+    if the_id and !the_id.empty? and !the_id.start_with?('drag_')
+      the_id = the_id.dup
+      the_id.prepend('drag_')
+    end
+    if uses_sinatra? # Handle sinatra first.
+      draggable_img_base64(url, css_class, css_style)
     else
-      # ===================================================================== #
-      # else we use a remote URL or a rescue URL anyway.
-      # ===================================================================== #
-      remote_img(
-        remote_image_substitute,
-        {
-          css_class: optional_css_class,
-          id:        optional_the_id,
-          css_style: optional_css_style
-        },
-        &block
-        # alt_text is currently not handled here.
-      )
+      img(url, css_class, the_id, css_style, alt_text) { :draggable_attribute }
     end
-  end
+  end; alias draggable_img draggable_image # === draggable_img
+       alias dimg          draggable_image # === dimg
+       alias dimage        draggable_image # === dimage
 
   # ========================================================================= #
-  # === remote_img
+  # === img_nbr
   #
-  # This method can be used to "embed" a remote image in a given
-  # web-application.
+  # The fourth argument, called css_style, used to default to
+  # "border-width:1px", but in May 2021 it was realized that this
+  # will conflict with e. g. a css class such as "bblack3". In
+  # this case we would want to use a border width of 3px, but
+  # this would be ignored due to the default. Thus, the default
+  # was removed.
   #
-  # Usage example:
+  # In October 2022 the second argument to this method was changed to
+  # a Symbol. 
+  # ========================================================================= #
+  def img_nbr(
+      url       = 'RPG/YINYANG.png',
+      css_class = :empty_string_or_global_css_rules_for_images, 
+      the_id    = '',
+      css_style = '' # Empty default since May 2021 - see above for an explanation.
+    )
+    img(
+      url,
+      css_class, 
+      the_id,
+      css_style
+    )
+    br
+  end; alias img_br img_nbr # === img_br
+       alias imgbr  img_nbr # === imgbr
+
+  # ========================================================================= #
+  # === img                                              (img tag, image tag)
   #
-  #   embed_remote_image('https://i.imgur.com/jYBEnjr.png', css_class: 'bblack2 mar4px', id: 'drag_ferkellampe')
+  # Keep in mind that this method has to remain quite flexible. It has
+  # to be able to work with input such as this:
+  #
+  #  img(
+  #    this_image.sub(Regexp.quote('/home/x/data/images/'),''),
+  #    css_class: 'bblack3',
+  #    width:  '528',
+  #    height: '340',
+  #    alt:    File.basename(this_image.delete_suffix(File.extname(this_image)))
+  #  )
   #
   # ========================================================================= #
-  def remote_img(
-      i             = 'http://mikesrpgcenter.com/krondor/maps/timirianya.html',
-      optional_hash = {},
+  def img(
+      url       = 'RPG/YINYANG.png',
+      css_class = :empty_string_or_global_css_rules_for_images,
+      the_id    = '',
+      css_style = '',
+      alt_text  = '',
       &block
     )
     # ======================================================================= #
-    # === Handle blocks first
+    # First we should obtain the corresponding <img> tag. This will be
+    # delegated towards sg() which is an abbreviated name for
+    # string_image():
+    # ======================================================================= #
+    content = sg(
+      url, css_class, the_id, css_style, alt_text
+    )
+    # ======================================================================= #
+    # === Handle blocks given to this method next
     # ======================================================================= #
     if block_given?
       yielded = yield
@@ -114,33 +140,45 @@ class WebObject < Base # === Cyberweb::WebObject
       # === Handle Hashes next
       # ===================================================================== #
       if yielded.is_a? Hash
-        optional_hash.merge!(yielded) # And push them onto the main Hash here.
+        # =================================================================== #
+        # === :draggable_attribute
+        # =================================================================== #
+        if yielded.has_key? :draggable_attribute
+          content = content.dup
+          content[-1,0] = ' draggable="true"'
+        end
+        # =================================================================== #
+        # === :usemap
+        # =================================================================== #
+        if yielded.has_key? :usemap
+          content = content.dup
+          content[-1,0] = ' usemap="'+yielded[:usemap].to_s+'"' 
+        end
+      # ===================================================================== #
+      # === Handle Symbols next
+      # ===================================================================== #
+      elsif yielded.is_a? Symbol
+        case yielded # case tag
+        # =================================================================== #
+        # === :draggable_attribute
+        # =================================================================== #
+        when :draggable_attribute,
+             :drag
+          content = content.dup
+          content[-1,0] = ' draggable="true"'
+        end
       end
     end
     addnl(
-      HtmlTags.img(i) { optional_hash }
+      content
     )
-  end; alias embed_remote_image remote_img # === embed_remote_image
-       alias remote_image       remote_img # === remote_image
+  end; alias ig img # === ig
 
   # ========================================================================= #
-  # === raw_image
-  #
-  # The first argument to this method should be the path to the file at
-  # hand.
+  # === images_css_rules?
   # ========================================================================= #
-  def raw_image(
-      i                  = '',
-      optional_css_class = '',
-      optional_the_id    = '',
-      optional_css_style = '',
-      alt_text           = ''
-    )
-    return '<img src="'+i+'"'+
-           css_class_or_no_class(optional_css_class)+
-           id_or_no_id(optional_the_id, i)+
-           css_style_or_no_style(optional_css_style)+
-           alt_text_or_no_alt_text(alt_text)+'>'
+  def images_css_rules?
+    @internal_hash[:global_CSS_rules_for_all_images]
   end
 
   # ========================================================================= #
@@ -155,7 +193,7 @@ class WebObject < Base # === Cyberweb::WebObject
   # ========================================================================= #
   def simpler_string_image(
       i                  = :random, # This is the path - or a Symbol denoting that a path should be used.
-      optional_css_class = '',
+      optional_css_class = :empty_string_or_global_css_rules_for_images,
       optional_the_id    = '',
       optional_css_style = '',
       alt_text           = '',
@@ -166,9 +204,28 @@ class WebObject < Base # === Cyberweb::WebObject
       javascript         = '',
       &block
     )
+    case optional_css_class
+    # ======================================================================= #
+    # === :empty_string_or_global_css_rules_for_images
+    # ======================================================================= #
+    when :empty_string_or_global_css_rules_for_images
+      if @internal_hash[:global_CSS_rules_for_all_images].nil?
+        optional_css_class = ''
+      else
+        optional_css_class = @internal_hash[:global_CSS_rules_for_all_images]
+      end
+    end
+    yielded = nil # Dummy variable for later re-use.
+    # ======================================================================= #
+    # === Handle Symbols as primary input next; it will be assumed it is
+    #     an image_url, such as :cheering_person becoming
+    #     "#{IMG_DIR}CHEERING_PERSON.png"
+    # ======================================================================= #
     if i.is_a? Symbol
       i = ::Cyberweb.image_url(i) # This has the path.
     end
+    optional_width  = nil
+    optional_height = nil
     # ======================================================================= #
     # === Handle Hashes next
     #
@@ -188,27 +245,53 @@ class WebObject < Base # === Cyberweb::WebObject
         optional_the_id = optional_css_class.delete(:the_id)
       end
       # ===================================================================== #
+      # === :loading
+      # ===================================================================== #
+      if optional_css_class.has_key? :loading
+        yielded = :lazy_loading if (optional_css_class[:loading] == true)
+      end
+      # ===================================================================== #
+      # === :alt
+      # ===================================================================== #
+      if optional_css_class.has_key? :alt
+        alt_text = optional_css_class.delete(:alt)
+      end
+      # ===================================================================== #
       # === :css_style
       # ===================================================================== #
       if optional_css_class.has_key? :css_style
         optional_css_style = optional_css_class.delete(:css_style)
       end
       # ===================================================================== #
+      # === :width
+      # ===================================================================== #
+      if optional_css_class.has_key? :width
+        optional_width = optional_css_class.delete(:width).to_s
+      end
+      # ===================================================================== #
+      # === :height
+      # ===================================================================== #
+      if optional_css_class.has_key? :height
+        optional_height = optional_css_class.delete(:height).to_s
+      end
+      # ===================================================================== #
       # === :content
       # ===================================================================== #
       if optional_css_class.has_key? :content
         i = optional_css_class.delete(:content)
       end
       # ===================================================================== #
-      # === :css
-      # ===================================================================== #
-      if optional_css_class.has_key? :css
-        optional_css_class = optional_css_class.delete(:css)
-      # ===================================================================== #
       # === :css_class
+      #
+      # This should come last.
       # ===================================================================== #
-      elsif optional_css_class.has_key? :css_class
+      if optional_css_class.has_key? :css_class
         optional_css_class = optional_css_class.delete(:css_class)
+      # ===================================================================== #
+      # === :css
+      # ===================================================================== #
+      elsif optional_css_class.has_key? :css
+        optional_css_class = optional_css_class.delete(:css)
       end
     end
     i = i.to_s
@@ -227,8 +310,31 @@ class WebObject < Base # === Cyberweb::WebObject
     # ======================================================================= #
     if block_given?
       yielded = yield
+      # ===================================================================== #
+      # First, handle Symbols given via a block here:
+      # ===================================================================== #
       case yielded
       # ===================================================================== #
+      # === :lazy_loading
+      #
+      # This will allow for lazy loading of an image.
+      #
+      # The use case for this may look like so:
+      #
+      #    img 'foobar.jpg', loading: lazy
+      #    img('foobar.jpg') { :lazy }
+      #
+      # ===================================================================== #
+      when :lazy_loading
+        i = i.dup
+        i[-1,0] = ' loading="lazy"'
+      # ===================================================================== #
+      # === :prepend_only_to_the_images_real_directory
+      # ===================================================================== #
+      when :prepend_only_to_the_images_real_directory
+        i.prepend(relative_path?.dup)
+        may_we_prepend_the_path = false
+      # ===================================================================== #
       # === :draggable
       # ===================================================================== #
       when :drag
@@ -242,12 +348,6 @@ class WebObject < Base # === Cyberweb::WebObject
         i = i.dup
         i[-1,0] = ' draggable="true"'
       # ===================================================================== #
-      # === :prepend_only_to_the_images_real_directory
-      # ===================================================================== #
-      when :prepend_only_to_the_images_real_directory
-        i.prepend(relative_path?.dup)
-        may_we_prepend_the_path = false
-      # ===================================================================== #
       # === :do_not_prepend_anything
       # ===================================================================== #
       when :do_not_prepend_anything
@@ -259,33 +359,49 @@ class WebObject < Base # === Cyberweb::WebObject
           i
     end
     return raw_image(
-      i, optional_css_class, optional_the_id, optional_css_style, alt_text
+      i,
+      optional_css_class,
+      optional_the_id,
+      optional_css_style,
+      alt_text,
+      optional_width,
+      optional_height
     )
-  end; alias sg         simpler_string_image # === sg
+  end; alias string_img simpler_string_image # === string_img
        alias simg       simpler_string_image # === simg
-       alias string_img simpler_string_image # === string_img
+       alias sg         simpler_string_image # === sg
 
   # ========================================================================= #
-  # === img                                              (img tag, image tag)
+  # === remote_img
+  #
+  # This method can be used to "embed" a remote image in a given
+  # web-application.
+  #
+  # Usage example:
+  #
+  #   embed_remote_image('https://i.imgur.com/jYBEnjr.png', css_class: 'bblack2 mar4px', id: 'drag_ferkellampe')
+  #   remote_img 'https://i.imgur.com/caKh9FI.png', 'mars2em bblack1', 'drag_grunge_text'
+  #
   # ========================================================================= #
-  def img(
-      url       = 'RPG/YINYANG.png',
-      css_class = '', 
-      the_id    = '',
-      css_style = '',
-      alt_text  = '',
+  def remote_img(
+      i             = 'https://mikesrpgcenter.com/krondor/maps/timirianya.html',
+      optional_hash = {},
+      optional_id   = nil,
       &block
     )
     # ======================================================================= #
-    # First we should obtain the corresponding <img> tag. This will be
-    # delegated towards sg() which is an abbreviated name for
-    # string_image():
+    # === Handle Strings rather than Hashes next:
     # ======================================================================= #
-    content = sg(
-      url, css_class, the_id, css_style, alt_text
-    )
+    if optional_hash.is_a? String
+      # ===================================================================== #
+      # In this case we assume the user tries to pass a CSS class into it.
+      # ===================================================================== #
+      optional_hash = {
+        css_class: optional_hash
+      }
+    end
     # ======================================================================= #
-    # === Handle blocks given to this method next
+    # === Handle blocks first
     # ======================================================================= #
     if block_given?
       yielded = yield
@@ -293,181 +409,101 @@ class WebObject < Base # === Cyberweb::WebObject
       # === Handle Hashes next
       # ===================================================================== #
       if yielded.is_a? Hash
-        # =================================================================== #
-        # === :draggable_attribute
-        # =================================================================== #
-        if yielded.has_key? :draggable_attribute
-          content = content.dup
-          content[-1,0] = ' draggable="true"'
-        end
-        # =================================================================== #
-        # === :usemap
-        # =================================================================== #
-        if yielded.has_key? :usemap
-          content = content.dup
-          content[-1,0] = ' usemap="'+yielded[:usemap].to_s+'"' 
-        end
-      # ===================================================================== #
-      # === Handle Symbols next
-      # ===================================================================== #
-      elsif yielded.is_a? Symbol
-        case yielded # case tag
-        # =================================================================== #
-        # === :draggable_attribute
-        # =================================================================== #
-        when :draggable_attribute,
-             :drag
-          content = content.dup
-          content[-1,0] = ' draggable="true"'
-        end
+        optional_hash.merge!(yielded) # And push them onto the main Hash here.
       end
     end
+    if optional_id
+      optional_hash[:the_id] = optional_id
+    end
     addnl(
-      content
+      HtmlTags.img(i) { optional_hash }
     )
-  end
+    if optional_id and optional_id.to_s.start_with?('drag_') and drag_all_images?
+      enable_drag_for(optional_id)
+    end
+  end; alias embed_remote_image remote_img # === embed_remote_image
+       alias embed_remote_img   remote_img # === embed_remote_img
+       alias remote_image       remote_img # === remote_image
 
   # ========================================================================= #
-  # === draggable_image
-  #
-  # Example code how to tap into this method:
-  #
-  #   draggable_image 'STD/USB_CONNECTION_DEVICE.png',
-  #                   'mar1em bblack1 mars3em'
+  # === raw_image
   #
-  # It may be more convenient to use the alias name dimg().
+  # The first argument to this method should be the path to the file at
+  # hand.
   # ========================================================================= #
-  def draggable_image(
-      url       = '',
-      css_class = '', 
-      the_id    = '',
-      css_style = '',
-      alt_text  = '',
-      &block
+  def raw_image(
+      i                  = '',
+      optional_css_class = '',
+      optional_the_id    = '',
+      optional_css_style = '',
+      alt_text           = '',
+      optional_width     = nil,
+      optional_height    = nil
     )
-    if the_id and the_id.empty?
-      the_id = (
-                'drag_'+
-                 File.basename(url.to_s).
-                 downcase.
-                 delete_suffix(
-                   File.extname(url.to_s)
-                 )
-               ).tr('.','_')
+    result = '<img src="'+i+'"'+
+             css_class_or_no_class(optional_css_class)+
+             id_or_no_id(optional_the_id, i)+
+             css_style_or_no_style(optional_css_style)+
+             alt_text_or_no_alt_text(alt_text).dup
+    if optional_width
+      result << ' width="'+optional_width.to_s+'"'
     end
-    if the_id and !the_id.empty? and !the_id.start_with?('drag_')
-      the_id = the_id.dup
-      the_id.prepend('drag_')
+    if optional_height
+      result << ' height="'+optional_height.to_s+'"'
     end
-    if uses_sinatra? # Handle sinatra first.
-      draggable_img_base64(url, css_class, css_style)
-    else
-      img(url, css_class, the_id, css_style, alt_text) { :draggable_attribute }
-    end
-  end; alias draggable_img draggable_image # === draggable_img
-       alias dimg          draggable_image # === dimg
-       alias dimage        draggable_image # === dimage
-
-  # ========================================================================= #
-  # === return_this_base64_image
-  # ========================================================================= #
-  def return_this_base64_image(
-      i,
-      optional_css_class = '',
-      optional_css_id    = ''
-    )
-    return ::Cyberweb.return_this_base64_image(
-      i,
-      optional_css_class,
-      optional_css_id
-    )
+    result << '>'
+    return result
   end
 
   # ========================================================================= #
-  # === add_this_base64_image
+  # === img_base64
   # ========================================================================= #
-  def add_this_base64_image(
+  def img_base64(
       i,
       optional_css_class = '',
       optional_css_id    = ''
     )
+    dataset = Cyberweb.convert_image_to_base64(i)
     addnl(
-      return_this_base64_image(
-        i,
-        optional_css_class,
-        optional_css_id
-      )
-    )
-  end
-
-  # ========================================================================= #
-  # === display_the_registered_base64_images
-  # ========================================================================= #
-  def display_the_registered_base64_images
-    return_the_registered_base64_images.each {|this_base64_image|
-      add_this_base64_image(this_base64_image)
-    }
-  end
-
-  # ========================================================================= #
-  # === draggable_image_nbr
-  # ========================================================================= #
-  def draggable_image_nbr(
-      url       = '',
-      css_class = '', 
-      the_id    = '',
-      css_style = '',
-      alt_text  = '',
-      &block
-    )
-    draggable_image(
-      url,
-      css_class, 
-      the_id,
-      css_style,
-      alt_text,
-      &block
+      '<img src="data:image/png;base64,'+dataset+'">'
     )
-    br
   end
 
   # ========================================================================= #
-  # === img_dir?
-  # ========================================================================= #
-  def img_dir?
-    Cyberweb.server_base_directory?+
-    'data/'+
-    return_name_of_the_images_directory+'/'
-  end
-
-  # ========================================================================= #
-  # === return_path_to_the_images_directory
-  # ========================================================================= #
-  def return_path_to_the_images_directory(
-      path_to_use = relative_path?
+  # === img_base64_absolute_path
+  #
+  # This is similar to img_base64(), but it will first obtain the image,
+  # then convert it into base64, then add it onto the webobject, 
+  # making use of the absolute path.
+  # ========================================================================= #
+  def img_base64_absolute_path(i)
+    absolute_path_to_the_image = File.absolute_path(
+      path_to_the_main_image_directory?+
+      i
     )
-    return "#{path_to_use}data/#{return_name_of_the_images_directory}/"
-  end
+    # ======================================================================= #
+    # Note that the variable absolute_path_to_the_image will have an
+    # URL such as:
+    #
+    #  "/home/x/data/images/STD/ZAUBERHUT.png"
+    #
+    # now.
+    # ======================================================================= #
+    if File.exist? absolute_path_to_the_image
+      decode_this_image_to_base64(absolute_path_to_the_image)
+    else
+      e 'No file exists at '+absolute_path_to_the_image
+    end
+  end; alias base64img img_base64 # === base64img
 
   # ========================================================================= #
-  # === draggable_string_image
+  # === convert_image_to_base64
+  #
+  # This functionality depends on imagemagick, so make sure to install it
+  # if you wish to make use of this method.
   # ========================================================================= #
-  def draggable_string_image(
-      url       = '',
-      css_class = '', 
-      the_id    = '',
-      css_style = '',
-      alt_text  = '',
-      &block
-    )
-    if the_id and the_id.empty?
-      the_id = 'drag_'+File.basename(url).downcase.delete_suffix(File.extname(url))
-    end
-    if the_id and !the_id.empty? and !the_id.start_with?('drag_')
-      the_id = the_id.dup
-      the_id.prepend('drag_')
-    end
-    string_img(url, css_class, the_id, css_style, alt_text) { :draggable_attribute }
+  def convert_image_to_base64(this_image)
+    return Cyberweb.convert_image_to_base64(this_image)
   end
 
   # ========================================================================= #
@@ -501,6 +537,23 @@ class WebObject < Base # === Cyberweb::WebObject
       css_style = ''
     )
     register_this_id(the_id)
+    return string_absolute_img(
+               remote_url,
+               css_class,
+               the_id,
+               css_style
+             )
+  end
+
+  # ========================================================================= #
+  # === string_absolute_img
+  # ========================================================================= #
+  def string_absolute_img(
+      remote_url,
+      css_class = '',
+      the_id    = '',
+      css_style = ''
+    )
     return ::Cyberweb.string_absolute_img(
                remote_url,
                css_class,
@@ -510,101 +563,75 @@ class WebObject < Base # === Cyberweb::WebObject
   end
 
   # ========================================================================= #
-  # === enable_drag_all_images
-  #
-  # We enable a configuration option through this method call here.
-  #
-  # Note that we will also automatically enable jquery in this case,
-  # as otherwise we could not drag the image in question around,
-  # which would sort of defeat the points of having this method
-  # in the first place - or it would require of you to manually
-  # enable jquery, which seems superfluous.
-  # ========================================================================= #
-  def enable_drag_all_images
-    do_use_jquery unless use_jquery?
-    @config['drag_all_images'] = true
-  end; alias drag_all_images              enable_drag_all_images # === drag_all_images
-       alias drag_everything              enable_drag_all_images # === drag_everything
-       alias do_drag_all_images           enable_drag_all_images # === do_drag_all_image
-       alias do_enable_drag_all_images    enable_drag_all_images # === do_enable_drag_all_image
-       alias drag_everything              enable_drag_all_images # === drag_everything
-       alias all_images_will_be_draggable enable_drag_all_images # === all_images_will_be_draggable
-       alias enable_dragging              enable_drag_all_images # === enable_dragging
-       alias enable_drag_and_drop         enable_drag_all_images # === enable_drag_and_drop
+  # === display_the_registered_base64_images
+  # ========================================================================= #
+  def display_the_registered_base64_images
+    return_the_registered_base64_images.each {|this_base64_image|
+      add_this_base64_image(this_base64_image)
+    }
+  end
 
   # ========================================================================= #
-  # === relative_background_image
-  #
-  # We have to build the proper path, e. g.:
-  #
-  #   url(data/images/WALLPAPERS/TheCalling_AnimeWallpaper.jpg);
-  #
+  # === draggable_image_nbr
   # ========================================================================= #
-  def relative_background_image(this_image)
-    _ = ('../' * n_steps_to_the_base_directory?) + 
-        "#{name_of_img_dir?}".dup
-    _ << this_image
-    background_image = "background-image: url(#{_});" # The string to append.
-    # ======================================================================= #
-    # Next, add some default assumptions here. No repeat is ok to
-    # use, centered background position - not sure.
-    #   background-position: center;
-    # ======================================================================= #
-    add_this_css_style(
-      'body {
-         '+background_image+'
-         background-repeat: no-repeat;
-       }'
+  def draggable_image_nbr(
+      url       = '',
+      css_class = '', 
+      the_id    = '',
+      css_style = '',
+      alt_text  = '',
+      &block
     )
+    draggable_image(
+      url,
+      css_class, 
+      the_id,
+      css_style,
+      alt_text,
+      &block
+    )
+    br
   end
 
   # ========================================================================= #
-  # === background_image=
-  #
-  # Use this method to set the background image for a page.
-  #
-  #   body {background-image: url("../IMG/");}'
-  #
-  # Since as of December 2011, if you pass an argument such as 'NJOY/#RAND'
-  # then we use this as instruction to fetch a random entry from this
-  # directory.
-  #
-  # Usage Example:
-  #
-  #   w.background_image = 'NJOY/#RAND'
+  # === add_this_base64_image
+  # ========================================================================= #
+  def add_this_base64_image(
+      i,
+      optional_css_class = '',
+      optional_css_id    = ''
+    )
+    addnl(
+      return_this_base64_image(
+        i,
+        optional_css_class,
+        optional_css_id
+      )
+    )
+  end
+
+  # ========================================================================= #
+  # === embed_and_drag_remote_image
   #
+  # This variant ensures that there is a leading 'drag_' for the id.
   # ========================================================================= #
-  def background_image=(
-      i = '/blaaa/foo.png'
+  def embed_and_drag_remote_image(
+      i             = 'https://mikesrpgcenter.com/krondor/maps/timirianya.html',
+      optional_hash = {},
+      optional_id   = nil,
+      &block
     )
-    _ = "#{name_of_img_dir?}/".dup # Hardcoded for now. Yes, I am aware that this sucks.
-    if i.to_s.downcase.include? '#rand' # Then get path given. Example: w.background_image = 'NJOY/#RAND'
-      first_part = i.split('#').first
-      _ << first_part
-      _ << get_files_from(::Cyberweb.path_to_images?).sample.to_s
+    if optional_id.nil?
+      optional_id = 'drag_'+File.basename(i).to_s
     else
-      case i
-      when :random
-        _ << Dir[::Cyberweb.path_to_images?+'NJOY/*'].sample.
-             sub(/\/home\/x\/DATA\/IMG\//, '')
-      else
-        _ << i
+      unless optional_id.start_with? 'drag_'
+        optional_id = optional_id.dup
+        optional_id.prepend('drag_')
       end
     end
-    background_img = "background-image: url(#{::Cyberweb.path_to_images?}#{_});" # The string to append.
-    # ======================================================================= #
-    # Next, add some default assumptions here. No repeat is ok to
-    # use, centered background position - not sure.
-    #   background-position: center;
-    # ======================================================================= #
-    add_this_css_style(
-      'body {
-         '+background_img+'
-         background-repeat: no-repeat;
-       }'
-    )
-  end; alias body_background_image background_image= # === body_background_image
-       alias background_image      background_image= # === background_image
+    embed_remote_image(i, optional_hash, optional_id, &block)
+    enable_drag_for(optional_id.to_sym)
+  end
 
   # ========================================================================= #
   # === absolute_image
@@ -624,28 +651,28 @@ class WebObject < Base # === Cyberweb::WebObject
              )
     addnl(result)
     return result
-  end; alias absolute_img absolute_image # === absolute_img
+  end; alias absolute_img              absolute_image # === absolute_img
+       alias display_this_remote_image absolute_image # === display_this_remote_image
 
   # ========================================================================= #
-  # === return_the_registered_base64_images
+  # === drag_all_images?
   # ========================================================================= #
-  def return_the_registered_base64_images
-    ::Cyberweb.base64_images
+  def drag_all_images?
+    @config['drag_all_images']
   end
 
   # ========================================================================= #
-  # === get_images
+  # === decode_this_image_to_base64
   #
-  # This method will obtain all files from all subdirectories there as
-  # well.
-  # ========================================================================= #
-  def get_images(
-      from_this_dir = return_pwd
-    )
-    Dir["#{from_this_dir}/**/**"].select {|entry|
-      ::Cyberweb.is_image?(entry)
-    }
-  end; alias get_images_from get_images # === get_images_from
+  # This method will first decode the image at hand into base64, and
+  # then embed it directly, by calling base64_image(). The latter will
+  # make use of addnl(), which will add the "converted" image to
+  # the WebObject instance.
+  # ========================================================================= #
+  def decode_this_image_to_base64(this_image)
+    dataset = convert_image_to_base64(this_image)
+    base64_image(dataset, :infer)
+  end
 
   # ========================================================================= #
   # === return_name_of_the_images_directory
@@ -654,40 +681,43 @@ class WebObject < Base # === Cyberweb::WebObject
   # without any trailing '/'.
   # ========================================================================= #
   def return_name_of_the_images_directory
-    'images'
+    @config['name_of_the_images_directory'].to_s
   end
 
   # ========================================================================= #
-  # === display_all_images
+  # === drag_local_image_or_remote_image
   #
-  # Use this when you just want to display all images.
+  # As local_image_or_remote_image(), but with the default id argument to
+  # refer to :drag.
+  # ========================================================================= #
+  def drag_local_image_or_remote_image(
+      local_image             = '',
+      remote_image_substitute = '', # This one should be the remote URL.
+      optional_css_class      = '',
+      optional_the_id         = :drag,
+      optional_css_style      = '',
+      alt_text                = '',
+      &block
+    )
+    local_image_or_remote_image(
+      local_image,
+      remote_image_substitute,
+      optional_css_class,
+      optional_the_id,
+      optional_css_style
+    ) { :drag }
+  end; alias dlocal_image_or_remote_image drag_local_image_or_remote_image # === dlocal_image_or_remote_image
+       alias dimg2                        drag_local_image_or_remote_image # === dimg2
+
+  # ========================================================================= #
+  # === default_image_directory?
   #
-  # The first argument should be the location towards the
-  # directory that holds all images.
+  # This method will always return a trailing '/'.
   # ========================================================================= #
-  def display_all_images(
-      dir          = ::Cyberweb.return_pwd,
-      optional_css = 'bblack1'
+  def default_image_directory?
+    rds(
+      @config['default_image_directory'].to_s+'/'
     )
-    if dir.is_a? Hash
-      dir = dir.delete(:from) if dir.has_key? :from
-    end
-    if dir.include? '$'
-      dir = ConvertGlobalEnv[dir]
-    end
-    unless Dir.exist? dir
-      e 'It seems as if the directory at `'+dir+'` does not exist.'
-    end
-    all_the_images = get_images_from(dir)
-    all_the_images.each {|file|
-      file = rds(file)
-      h3 file, 'slateblue'
-      imgbr(
-        file,
-        optional_css
-      )
-    }
-  end; alias display_images_from display_all_images # === display_images_from
-       alias display_images      display_all_images # === display_images
+  end
 
 end; end