title: How to put images into a dynamic text in Kivy
body: <p>I'm working myself into kivy and want to embed a picture into a displayed text.
  The text is loaded a simple string, which is then displayed which is easy to do, but I somehow can not find a clue how to display an image in said string.</p>
  
  <p>An answer to this question was to build a new layout for these which in this case is the TextWrapper.</p>
  
  <p>Example code:</p>
  
  <pre><code>from kivy.app import App
  from kivy.uix.boxlayout import BoxLayout
  from kivy.uix.button import Label, Button
  from kivy.lang import Builder
  from kivy.properties import BooleanProperty, StringProperty
  from kivy.uix.behaviors import FocusBehavior
  from kivy.uix.image import Image
  from kivy.uix.recycleboxlayout import RecycleBoxLayout
  from kivy.uix.recycleview import RecycleView
  from kivy.uix.recycleview.layout import LayoutSelectionBehavior
  from kivy.uix.recycleview.views import RecycleDataViewBehavior
  from kivy.uix.screenmanager import ScreenManager, Screen
  from kivy.uix.scrollview import ScrollView
  
  Builder.load_string("""
  &lt;ScreenSpecies&gt;:
      BoxLayout:
          orientation: 'vertical'
  
          Label:
              pos_hint: {"x": .45, "top": 1}
              size_hint: .1, .1
              text: "The Species"
  
          GridLayout:
              id: species_layout
              rows: 1
              cols: 2
              padding: dp(10)
              spacing: dp(10)
              orientation: 'horizontal'
  
              SpeciesView:
                  id: species_list_view
  
              SpeciesLabel:
                  id: species_text
                  text_selected: "Text" if not species_list_view.text_selected else species_list_view.text_selected
                  name_selected: "" if not species_list_view.name_selected else species_list_view.name_selected
  
  
  &lt;SpeciesView&gt;:
      viewclass: 'SelectableLabel'
      text_selected: ""
      name_selected: ""
  
      SelectableRecycleBoxLayout:
          orientation: 'vertical'
          default_size: None, dp(32)
          default_size_hint: .6, None
          size_hint: 1, .9
          multiselect: False
          touch_multiselect: False
  
  
  &lt;SpeciesLabel&gt;:
      size_hint_y: .85
      Label:
          halign: 'left'
          valign: 'middle'
          size_hint_y: None
          height: self.texture_size[1]
          text_size: self.width, None
          text: root.text_selected
  
  
  
  &lt;SelectableLabel&gt;:
      canvas.before:
          Color:
              rgba: (.05, 0.5, .9, .8) if self.selected else (.5, .5, .5, 1)
          Rectangle:
              pos: self.pos
              size: self.size
  """)
  
  
  class TextWrapper(BoxLayout):
      def __init__(self, text="", **kwargs):
          super(TextWrapper, self).__init__(**kwargs)
          self.content = self.wrap_text(text)
  
      def wrap_text(self, source):
          text = source.split("|")
  
          for i in range(0, len(text)):
              if "img=" in text[i]:
                  self.add_widget(Image(source=text[i][4:]))
              else:
                  self.add_widget(Label(text=text[i]))
          return text
  
  
  class SelectableRecycleBoxLayout(FocusBehavior, LayoutSelectionBehavior,
                                   RecycleBoxLayout):
      pass
  
  
  class SelectableLabel(RecycleDataViewBehavior, Label):
      ''' Add selection support to the Label '''
      index = None
      selected = BooleanProperty(False)
      selectable = BooleanProperty(True)
  
      def refresh_view_attrs(self, rv, index, data):
          ''' Catch and handle the view changes '''
          self.index = index
          return super(SelectableLabel, self).refresh_view_attrs(
              rv, index, data)
  
      def on_touch_down(self, touch):
          ''' Add selection on touch down '''
          if super(SelectableLabel, self).on_touch_down(touch):
              return True
          if self.collide_point(*touch.pos) and self.selectable:
              return self.parent.select_with_touch(self.index, touch)
  
      def apply_selection(self, rv, index, is_selected):
          ''' Respond to the selection of items in the view. '''
          self.selected = is_selected
          if is_selected:
              print("selection changed to {0}".format(rv.data[index]))
              rv.name_selected = rv.data[index]['text']
              rv.text_selected = rv.data[index]['description']
          else:
              print("selection removed for {0}".format(rv.data[index]))
  
  
  class ScreenSpecies(Screen):
      pass
  
  
  class SpeciesView(RecycleView):
      def __init__(self, **kwargs):
          super(SpeciesView, self).__init__(**kwargs)
  
          self.species_data = [
              {"text": "Test1", "description": "Test1.textbf |img=serveimage.png| Test1.textaf"},
              {"text": "Test2", "description": "Test2.text"},
              {"text": "Test3", "description": "Test3.text"}
          ]
  
          for species in self.species_data:
              species["description"] = TextWrapper(species["description"])
          # clean keywords out
  
          self.data = self.species_data
  
  
  class SpeciesLabel(ScrollView):
      text_selected = StringProperty("")
      name_selected = StringProperty("")
  
  
  screen_manager = ScreenManager()
  screen_manager.add_widget(ScreenSpecies(name="screen_species"))
  
  
  class TestApp(App):
      def build(self):
          return screen_manager
  
  
  test_app = TestApp()
  test_app.run()
  </code></pre>
  
  <p>This code does not work! As you can not click on a label without breaking the program, which is the problem. The text_selected only accepts str</p>
  
  <pre><code> ValueError: SpeciesView.text_selected accept only str
  </code></pre>
  
  <p>I do not know how to display the TextWrapper that is in the description of each element of the view.</p>
  
  <p>The purpose of it all is, that I can change the text depending on e.g. a selectable list of options and still have Images in each text.<br>
  The result should look similar to this:</p>
  
  <p><a href="https://i.stack.imgur.com/q0SWl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q0SWl.png" alt="The Buttons are already done!"></a></p>
  
  <p>Again, the question is how to dynamically change the text on the right with changing images in them depending on the button that was pressed last.</p>
  
  <p>Thanks for your help!</p>