Giter VIP home page Giter VIP logo

wagtail-svgmap's Introduction

wagtail-svgmap

Image map functionality for Wagtail through inline SVGs

Usage

As a developer

  • Add wagtail_svgmap to your INSTALLED_APPS
  • Add a wagtail_svgmap.blocks.ImageMapBlock() to a StreamField in your page class

Settings

  • WAGTAIL_SVGMAP_IE_COMPAT: Whether or not to wrap the rendered SVGs in special markup for compatibility with legacy Internet Explorers. Enabled by default; disabling leads to slightly nicer markup.

As an end user

Using the Wagtail Admin

  • If wagtail.contrib.modeladmin is enabled, ImageMap objects can be created from the Wagtail admin (look for "Image Maps" in the menu). Once you've selected an SVG file, you can create region objects to set which pages/documents/external URLs each discovered ID should link to.

Using the Django Admin

  • Use the Django admin interface to create ImageMap objects. Once you've selected an SVG file, you can then set which pages/documents/external URLs each discovered ID should link to.

In pages

  • In a page that has an ImageMapBlock-enabled stream field, select the image map to use. You can also additionally set a CSS class to wrap the field with. Ask your friendly neighborhood designer for more information.

Development

  • Use py.test for testing.

wagtail-svgmap's People

Contributors

akx avatar juyrjola avatar stuaxo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

wagtail-svgmap's Issues

Add wagtailmodeladmin-based admin for imagemaps

@juyrjola on Slack:

Käyttäjä lisää ImageMap-olion wagtailin adminissa.
Käyttöliittymä näyttää SVG:n ja luettelee sen alle tiedoston id:t listassa, jossa jokaiselle id:lle voi kytkeä linkin.
Hoveroidessa id:n päällä (tai sitä klikatessa) käyttöliittymä värjää ko. id:n, jotta visuaalisesti voi nähdä mihin kuvan osaan id viittaa.

Updating an SVG file in an ImageMap results in an assertion failure

Environment:


Request Method: POST
Request URL: https://xxx/admin/wagtail_svgmap/imagemap/edit/37/

Django Version: 1.9.10
Python Version: 3.4.3
Installed Applications:
['users',
 'helusers',
 'people',
 'content',
 'kehmet',
 'digi',
 'feedback',
 'search',
 'wagtail.wagtailforms',
 'wagtail.wagtailredirects',
 'wagtail.wagtailembeds',
 'wagtail.wagtailsites',
 'wagtail.wagtailusers',
 'wagtail.wagtailsnippets',
 'wagtail.wagtaildocs',
 'wagtail.wagtailimages',
 'wagtail.wagtailsearch',
 'wagtail.wagtailadmin',
 'wagtail.wagtailcore',
 'wagtail.contrib.modeladmin',
 'wagtail.contrib.table_block',
 'compressor',
 'modelcluster',
 'taggit',
 'blog',
 'djangobower',
 'wagtail_svgmap',
 'djcelery',
 'allauth',
 'allauth.account',
 'allauth.socialaccount',
 'helusers.providers.helsinki',
 'django.contrib.admin',
 'django.contrib.auth',
 'django.contrib.sites',
 'django.contrib.contenttypes',
 'django.contrib.sessions',
 'django.contrib.messages',
 'django.contrib.staticfiles',
 'django.contrib.humanize']
Installed Middleware:
['django.contrib.sessions.middleware.SessionMiddleware',
 'django.middleware.common.CommonMiddleware',
 'django.middleware.csrf.CsrfViewMiddleware',
 'django.contrib.auth.middleware.AuthenticationMiddleware',
 'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
 'django.contrib.messages.middleware.MessageMiddleware',
 'django.middleware.clickjacking.XFrameOptionsMiddleware',
 'django.middleware.security.SecurityMiddleware',
 'wagtail.wagtailcore.middleware.SiteMiddleware',
 'wagtail.wagtailredirects.middleware.RedirectMiddleware']



Traceback:

File "/home/digihel/venv/lib/python3.4/site-packages/django/core/handlers/base.py" in get_response
  149.                     response = self.process_exception_by_middleware(e, request)

File "/home/digihel/venv/lib/python3.4/site-packages/django/core/handlers/base.py" in get_response
  147.                     response = wrapped_callback(request, *callback_args, **callback_kwargs)

File "/usr/lib/python3.4/contextlib.py" in inner
  30.                 return func(*args, **kwds)

File "/home/digihel/venv/lib/python3.4/site-packages/django/views/decorators/cache.py" in _cache_controlled
  43.             response = viewfunc(request, *args, **kw)

File "/home/digihel/venv/lib/python3.4/site-packages/wagtail/wagtailadmin/decorators.py" in decorated_view
  24.             return view_func(request, *args, **kwargs)

File "/home/digihel/venv/lib/python3.4/site-packages/wagtail/contrib/modeladmin/options.py" in edit_view
  374.         return view_class.as_view(**kwargs)(request)

File "/home/digihel/venv/lib/python3.4/site-packages/django/views/generic/base.py" in view
  68.             return self.dispatch(request, *args, **kwargs)

File "/home/digihel/venv/lib/python3.4/site-packages/django/utils/decorators.py" in _wrapper
  67.             return bound_func(*args, **kwargs)

File "/home/digihel/venv/lib/python3.4/site-packages/django/contrib/auth/decorators.py" in _wrapped_view
  23.                 return view_func(request, *args, **kwargs)

File "/home/digihel/venv/lib/python3.4/site-packages/django/utils/decorators.py" in bound_func
  63.                 return func.__get__(self, type(self))(*args2, **kwargs2)

File "/home/digihel/venv/lib/python3.4/site-packages/wagtail/contrib/modeladmin/views.py" in dispatch
  693.         return super(EditView, self).dispatch(request, *args, **kwargs)

File "/home/digihel/venv/lib/python3.4/site-packages/django/utils/decorators.py" in _wrapper
  67.             return bound_func(*args, **kwargs)

File "/home/digihel/venv/lib/python3.4/site-packages/django/contrib/auth/decorators.py" in _wrapped_view
  23.                 return view_func(request, *args, **kwargs)

File "/home/digihel/venv/lib/python3.4/site-packages/django/utils/decorators.py" in bound_func
  63.                 return func.__get__(self, type(self))(*args2, **kwargs2)

File "/home/digihel/venv/lib/python3.4/site-packages/wagtail/contrib/modeladmin/views.py" in dispatch
  75.         return super(WMABaseView, self).dispatch(request, *args, **kwargs)

File "/home/digihel/venv/lib/python3.4/site-packages/django/views/generic/base.py" in dispatch
  88.         return handler(request, *args, **kwargs)

File "/home/digihel/venv/lib/python3.4/site-packages/django/views/generic/edit.py" in post
  222.             return self.form_valid(form)

File "/home/digihel/venv/lib/python3.4/site-packages/wagtail/contrib/modeladmin/views.py" in form_valid
  163.         instance = form.save()

File "/home/digihel/venv/lib/python3.4/site-packages/modelcluster/forms.py" in save
  224.         instance = super(ClusterForm, self).save(commit=commit)

File "/home/digihel/venv/lib/python3.4/site-packages/django/forms/models.py" in save
  451.             self.instance.save()

File "/home/digihel/venv/src/wagtail-svgmap/wagtail_svgmap/models.py" in save
  87.         if self.recache_ids() | self.recache_svg():  # Using `|` for non-short-circuited or

File "/home/digihel/venv/src/wagtail-svgmap/wagtail_svgmap/models.py" in recache_svg
  117.         new_values = self._render()

File "/home/digihel/venv/src/wagtail-svgmap/wagtail_svgmap/models.py" in _render
  153.             assert link.url in rendered

Exception Type: AssertionError at /admin/wagtail_svgmap/imagemap/edit/37/
Exception Value: 

Regions are not updated when new SVG file is uploaded

Steps to reproduce:

  1. Add an image map. Save.
  2. Change the SVG file ids.
  3. Replace the file in the image map. Save.
  4. Regions are not updated.

Expected behavior:

Regions are updated automatically based on the ids of the new SVG file.

SVG images on non-Edge IE are 150px in height

Apparently, responsive SVGs require an IE-specific hack:

.container {
    height: 0;             /* collapse the container's height */
    width: width-value;    /* specify any width you want (a percentage value, basically) */
    /* apply a padding using the following formula */
    /* this formula makes sure the aspect ratio of the container equals that of the svg graphic */
    padding-top: (svg height / svg width) * width-value;
    position: relative;    /* create positioning context for svg */
}

svg {
    position: absolute;
    top: 0;
    left: 0;
}

(source: http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/)

Wagtail 2

Any chance of wagtail 2 support?

Most apps seem to do this by wrapping all the imports with stuff like wagtailcore, e.g.

try:
    import wagtail.core.foo
except ImportError:
    import wagtail.wagtailcore.foo

How to render the image map ?

I've got an image map, that is a literal map of parts of the UK.

I've set different parts of the map to have named ids using inkscape, how can I actually output the svg in the template ?

I have an image map template variable called 'map', I tried -
{{ self.map.map }}

Is there a template filter I can use to output the svg inline ?

Compatibility with Wagtail 4, Django 4

After following the installation instructions and adding wagtail_svgmap to INSTALLED_APPS, Django fails to start:

Traceback (most recent call last):
…
  File "wagtail_svgmap/models.py", line 6, in <module>
    from django.utils.encoding import python_2_unicode_compatible
ImportError: cannot import name 'python_2_unicode_compatible' from 'django.utils.encoding' (django/utils/encoding.py)

This is with Wagtail 4.1.1 and Django 4.1.4 on Python 3.10.

Use FileFields for SVG instead of Wagtaildocs

@juyrjola on Slack:

Luulen ettei niitä svg-tiedostoja tulla linkkaamaan muualle kuin siihen yhteen svgmappiin
Eli sinänsä niiden ei /tarvitse/ olla dokkarihallinnassa
Jos siitä kuitenkin koituu merkittävää koodarin työajan säästöä, voidaan sitä käyttää toistaiseksi :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.