Image Occlusion Enhanced Error: Image not showing, hidden ID only

Anki Card Design
1

Hi there,

I’ve been having this problem for a few days and have read older forum posts, which haven’t helped. I’ve uninstalled, reinstalled, updated, uninstalled addons and reinstalled addons, checked content has uploaded, checked on AnkiWeb and still nothing.

I am using the image occlusion enhanced to study a pathway. When I create the cards, no error. When I go through the cards and study, all that shows is the hidden ID associated with the card. No image. I am using mobile to test as well as desktop (windows). The strange thing is that, when I browse or click edit on windows or on AnkiWeb for the problematic cards, the image shows in the image section. The anwer mask and original mask also appear (see attached).

image
image962×1122 52.3 KB

This is what the card looks like when quizzing myself:

image
image1630×1142 60.1 KB

Please help, I’m using this to study for the MCAT (t minus 9 days) and would really like to have these topics dialed to my soul.

2

Your templates (https://docs.ankiweb.net/templates/intro.html#the-templates-screen) probably are wrong. They should look like this:

Front

{{#Image}}
<div id="io-header">{{Header}}</div>
<div id="io-wrapper">
  <div id="io-overlay">{{Question Mask}}</div>
  <div id="io-original">{{Image}}</div>
</div>
<div id="io-footer">{{Footer}}</div>

<script>
// Prevent original image from loading before mask
aFade = 50, qFade = 0;
var mask = document.querySelector('#io-overlay>img');
function loaded() {
    var original = document.querySelector('#io-original');
    original.style.visibility = "visible";
}
if (mask === null || mask.complete) {
    loaded();
} else {
    mask.addEventListener('load', loaded);
}
</script>
{{/Image}}

Back

{{#Image}}
<div id="io-header">{{Header}}</div>
<div id="io-wrapper">
  <div id="io-overlay">{{Answer Mask}}</div>
  <div id="io-original">{{Image}}</div>
</div>
{{#Footer}}<div id="io-footer">{{Footer}}</div>{{/Footer}}
<button id="io-revl-btn" onclick="toggle();">Toggle Masks</button>
<div id="io-extra-wrapper">
  <div id="io-extra">
    {{#Remarks}}
      <div class="io-extra-entry">
        <div class="io-field-descr">Remarks</div>{{Remarks}}
      </div>
    {{/Remarks}}
    {{#Sources}}
      <div class="io-extra-entry">
        <div class="io-field-descr">Sources</div>{{Sources}}
      </div>
    {{/Sources}}
    {{#Extra 1}}
      <div class="io-extra-entry">
        <div class="io-field-descr">Extra 1</div>{{Extra 1}}
      </div>
    {{/Extra 1}}
    {{#Extra 2}}
      <div class="io-extra-entry">
        <div class="io-field-descr">Extra 2</div>{{Extra 2}}
      </div>
    {{/Extra 2}}
  </div>
</div>

<script>
// Toggle answer mask on clicking the image
var toggle = function() {
  var amask = document.getElementById('io-overlay');
  if (amask.style.display === 'block' || amask.style.display === '')
    amask.style.display = 'none';
  else
    amask.style.display = 'block'
}

// Prevent original image from loading before mask
aFade = 50, qFade = 0;
var mask = document.querySelector('#io-overlay>img');
function loaded() {
    var original = document.querySelector('#io-original');
    original.style.visibility = "visible";
}
if (mask === null || mask.complete) {
    loaded();
} else {
    mask.addEventListener('load', loaded);
}
</script>
{{/Image}}

CSS

/* GENERAL CARD STYLE */
.card {
  font-family: "Helvetica LT Std", Helvetica, Arial, Sans;
  font-size: 150%;
  text-align: center;
  color: black;
  background-color: white;
}

/* OCCLUSION CSS START - don't edit this */
#io-overlay {
  position:absolute;
  top:0;
  width:100%;
  z-index:3
}

#io-original {
  position:relative;
  top:0;
  width:100%;
  z-index:2;
  visibility: hidden;
}

#io-wrapper {
  position:relative;
  width: 100%;
}
/* OCCLUSION CSS END */

/* OTHER STYLES */
#io-header{
  font-size: 1.1em;
  margin-bottom: 0.2em;
}

#io-footer{
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.8em;
  font-style: italic;
}

#io-extra-wrapper{
  /* the wrapper is needed to center the
  left-aligned blocks below it */
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5em;
}

#io-extra{
  text-align:center;
  display: inline-block;
}

.io-extra-entry{
  margin-top: 0.8em;
  font-size: 0.9em;
  text-align:left;
}

.io-field-descr{
  margin-bottom: 0.2em;
  font-weight: bold;
  font-size: 1em;
}

#io-revl-btn {
  font-size: 0.5em;
}

/* ADJUSTMENTS FOR MOBILE DEVICES */

.mobile .card, .mobile #content {
  font-size: 120%;
  margin: 0;
}

.mobile #io-extra-wrapper {
  width: 95%;
}

.mobile #io-revl-btn {
  font-size: 0.8em;
}
1 Like
3

It’s most likely a template error. Click Cards on the editor screen, and then attach these to your template code.

This is the front template:

{{#Image}}
<div id="io-header">{{Header}}</div>
<div id="io-wrapper">
  <div id="io-overlay">{{Question Mask}}</div>
  <div id="io-original">{{Image}}</div>
</div>
<div id="io-footer">{{Footer}}</div>

<script>
// Prevent original image from loading before mask
aFade = 50, qFade = 0;
var mask = document.querySelector('#io-overlay>img');
function loaded() {
    var original = document.querySelector('#io-original');
    original.style.visibility = "visible";
}
if (mask === null || mask.complete) {
    loaded();
} else {
    mask.addEventListener('load', loaded);
}
</script>
{{/Image}}

This is the back template:

{{#Image}}
<div id="io-header">{{Header}}</div>
<div id="io-wrapper">
  <div id="io-overlay">{{Answer Mask}}</div>
  <div id="io-original">{{Image}}</div>
</div>
{{#Footer}}<div id="io-footer">{{Footer}}</div>{{/Footer}}
<button id="io-revl-btn" onclick="toggle();">Toggle Masks</button>
<div id="io-extra-wrapper">
  <div id="io-extra">
    {{#Remarks}}
      <div class="io-extra-entry">
        <div class="io-field-descr">Remarks</div>{{Remarks}}
      </div>
    {{/Remarks}}
    {{#Sources}}
      <div class="io-extra-entry">
        <div class="io-field-descr">Sources</div>{{Sources}}
      </div>
    {{/Sources}}
    {{#Extra 1}}
      <div class="io-extra-entry">
        <div class="io-field-descr">Extra 1</div>{{Extra 1}}
      </div>
    {{/Extra 1}}
    {{#Extra 2}}
      <div class="io-extra-entry">
        <div class="io-field-descr">Extra 2</div>{{Extra 2}}
      </div>
    {{/Extra 2}}
  </div>
</div>

<script>
// Toggle answer mask on clicking the image
var toggle = function() {
  var amask = document.getElementById('io-overlay');
  if (amask.style.display === 'block' || amask.style.display === '')
    amask.style.display = 'none';
  else
    amask.style.display = 'block'
}

// Prevent original image from loading before mask
aFade = 50, qFade = 0;
var mask = document.querySelector('#io-overlay>img');
function loaded() {
    var original = document.querySelector('#io-original');
    original.style.visibility = "visible";
}
if (mask === null || mask.complete) {
    loaded();
} else {
    mask.addEventListener('load', loaded);
}
</script>
{{/Image}}

This is for the styling:

/* GENERAL CARD STYLE */
.card {
  font-family: "Helvetica LT Std", Helvetica, Arial, Sans;
  font-size: 150%;
  text-align: center;
  color: black;
  background-color: white;
}

/* OCCLUSION CSS START - don't edit this */
#io-overlay {
  position:absolute;
  top:0;
  width:100%;
  z-index:3
}

#io-original {
  position:relative;
  top:0;
  width:100%;
  z-index:2;
  visibility: hidden;
}

#io-wrapper {
  position:relative;
  width: 100%;
}
/* OCCLUSION CSS END */

/* OTHER STYLES */
#io-header{
  font-size: 1.1em;
  margin-bottom: 0.2em;
}

#io-footer{
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.8em;
  font-style: italic;
}

#io-extra-wrapper{
  /* the wrapper is needed to center the
  left-aligned blocks below it */
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5em;
}

#io-extra{
  text-align:center;
  display: inline-block;
}

.io-extra-entry{
  margin-top: 0.8em;
  font-size: 0.9em;
  text-align:left;
}

.io-field-descr{
  margin-bottom: 0.2em;
  font-weight: bold;
  font-size: 1em;
}

#io-revl-btn {
  font-size: 0.5em;
}

/* ADJUSTMENTS FOR MOBILE DEVICES */

.mobile .card, .mobile #content {
  font-size: 120%;
  margin: 0;
}

.mobile #io-extra-wrapper {
  width: 95%;
}

.mobile #io-revl-btn {
  font-size: 0.8em;
}

edit: ah, anon did it before me.

2 Likes