How can I add Alt Text to an image?

Feature Requests
13

just in case it’s useful the clone link has been updated with the a click event… I changed the cursor to a pointer just because… :point_up_2:… and added a jquery function to set the event handler (in the native libraries)

Screen Shot 2020-02-25 at 08.01.03
Screen Shot 2020-02-25 at 08.01.03921×356 24.4 KB 

<script>
  function _on_click () {
    this.on('click', function() {
      anvil.call(this, '_click')
    })
  };
</script>

then this is the code for the component:

class ImageAlt(ImageAltTemplate):
  _source = ''
  _alt = ''
  
  def __init__(self, **properties):
    self.init_components(self, **properties)
    self.call_js('_on_click')
    
  @property
  def source(self):
    return self._source
  
  @source.setter
  def source(self, value):
    self._source = value
    self.html = f'<img src="{self._source}" alt="{self._alt}" style="max-width: 100%; display: block; margin: auto;cursor: pointer;" >'

    
  @property
  def alt(self):
    return self._alt
  
  @alt.setter
  def alt(self, value):
    self._alt = value
    self.html = f'<img src="{self._source}" alt="{self._alt}" style="max-width: 100%; display: block; margin: auto;cursor: pointer;" >'

  def _click(self):
    self.raise_event('click')
2 Likes