How to visualize that an product attribute is out of stock

[Sickboards]

I am trying to visualize when an attribute is out of stock (both on product and product list page), whether it is in a pull down menu (light grey and/or followed by an out of stock remark and when buttons are used (colors for instance), have an overlay like a red cross for instance.

 

But I cannot find how I can get the attribute stock on page load. 

 

So one would expect it to something along the lines of 

 

loop through attributes 

if attribute->stock < 1 use overlay else business as usual.

 

I found some module that could hide out of stock attributes, but that renders the out of stock notification useless.

so in stead of hiding I want to be able to only visualize it.

 

If there is a module that can do this, great. if it requires some modding of core files, please point me in the right direction

 

thanks in advance.

attached an example of what I am looking for. 

[Sickboards]

Update

 

Managed to get it to work on the product page (except for products with more than one attribute):

in product.tpl

{if $img_color_exists}
{if {$group.attributes_quantity[{$id_attribute|intval}]} < 1}
<img  style="background:transparent url({$img_col_dir}{$id_attribute|intval}.jpg)" src="{$img_dir}/outofstock.png" alt="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" width="20" height="20" />
{else}
<img src="{$img_col_dir}{$id_attribute|intval}.jpg" alt="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" width="20" height="20" />
{/if}
{/if}

and for the out of stock remark

a little lower

  {if {$group.attributes_quantity[{$id_attribute|intval}]} < 1}
  - {l s='Out Stock'}
  {/if}

I wanted to do the same thing in the product-list-colors.tpl only it does not seem to recognize 

{$img_dir} which is strange as I was under the impression that it was a global variable

and

{$group.attributes_quantity[{$id_attribute|intval}]}

 

any suggestions on how I can include these variables?

Edited December 6, 2016 by Sickboards (see edit history)