Footer placed on top of images. getResources problem?

84 Posts

mewolari Reply #1, 8 years, 3 months ago

On https://www.nmldesign.nl/portfolio/ the footer is often placed on top of the lowest portfolio pictures.

The portfolio is made with getResources. The framework is Zurb's Foundation.

The portfolio page is using getResources to grab pictures in the different resources placed in the resource tree below "portfolio". These seperate resources are not directly visible to a site visitor (only when viewing portfolio page).

Piece of code from "portfolio" page

[[getResources? 
&parents=`2` 
&tpl=`portfolio-column-3-layout`
&includeTVs=`1` 
&processTVs=`1`
&includeContent=`1` 
&showHidden=`1`
&tvPrefix=``
&limit=`0`
&depth=`0` 
]]

portfolio-column-3-layout is the following chunk:

<li class="element-item [[+portfolio.category]] ">
	<ul class="clearing-thumbs clearing-feature" data-clearing>
		[[getImageList?
		&tvname=`portfolio.tv`
		&tpl=`portfolio-page-first-image`
		&docid=`[[+id]]`
		&limit=`1`
		&data-caption=`[[+data-caption]]`]]	
		[[getImageList?
		&tvname=`portfolio.tv`
		&tpl=`portfolio-page-other-images`
		&docid=`[[+id]]`
		&limit=`0`
		&offset=`1`
		&data-caption=`[[+data-caption]]`]]
	</ul>
</li>

portfolio.tv is a Migx Template Variable that enables users to put the different pictures of one project in a separate resource below "portfolio". getResources will grab these pictures to display them in "portfolio".

chunk portfolio-page-first-image contains:

<li class="clearing-featured-img"><a href="[[+image]]">
<img data-caption="[[+property.data-caption]]" src="[[+image:phpthumbof=`w=300&h=261&zc=1&q=45`
]]" alt="[[+property.data-caption]]" height="261" width="300" ><h4 class="portfolio">[Klik hier]</h4></a></li>

chunk portfolio-page-other-images contains:

<li ><a href="[[+image]]"><img data-caption="[[+property.data-caption]]" src="[[+image:phpthumbof=`w=218&h=145&zc=1&q=45`]]" alt="[[+property.data-caption]]" height="145" width="218"></a></li>

Any idea what I should alter to prevent the problem with the footer?

Thanks in advance!

This question has been answered by paulp. See the first response.

discuss.answer

1,572 Posts

Paulp Reply #2, 8 years, 3 months ago

The issue looks to be with the ul.isotope as the script is adding the height inline ( sometimes incorrectly ), how are you calling it ? try with $(window).load instead of $(document).ready(

84 Posts

mewolari Reply #3, 8 years, 3 months ago

Hi @Paulp, I've removed the ul.isotope. That indeed seems to solve to problem.

After changing the second of the two .js files needed for isotope in the code below, the problem was solved.

<script type="text/javascript"> 
function downloadJSAtOnload() { 
    var element = document.createElement("script"); 
    element.src = "assets/js/filter-min.js"; 
   document.body.appendChild(element); 
} 
if (window.addEventListener) 
   window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent) 
   window.attachEvent("onload", downloadJSAtOnload); 
else 
   window.onload = downloadJSAtOnload; 
</script>

[ed. note: mewolari last edited this post 8 years, 3 months ago.]

Answered Footer placed on top of images. getResources problem?