• Locked
No replies
Fri, 2019-05-17 10:35
Eelco
Eelco's picture
Offline
newbie
Last seen: 3 years 44 weeks ago
Timezone: GMT+2
Joined: 2019-05-17
Posts: 1
Points: 2

Hi All,

I will do my best to explain my issue as clear as i can. I own a shopify store and i'm trying to get some banners ( pagebreak )into my collection page. The idea is that page lay-out looks like this ( Mainimageheader, 9 Products, Pagebreak, another 9 products, pagebreak and so on. As far as i'm aware of the images are retrieved from the collection description page and they are stored in the Shopify CDN. With my little knowledge i think that the following script is responsible for the images;

/*Adding Mobile Collection Header from Description Box*/
	$(document).ready(function(){
		var imgSrc = $('.mobile-collection-image img').attr('src')
		$('.mobile-collection-image').wrap('<div class="collection-image" style="background-image:url('+imgSrc+')";></div>')
		$('.mobile-collection-text').wrap('<div class="collection-hero-text"><div class="display-table"><div class="display-table-cell"></div></div></div>')
		$('#MobileItems').append($('.collection-hero-text h1').clone());
		$('#MobileItems').appendTo('.collection-hero');
	});
 
  function initPageBreaks(){
		var imgArray = $('#LifestyleImages img');
		var imgLen = imgArray.length;
    	var ctr=0;
 
		$('.lifestyle-extra').each(function(){
			$(this).append($(imgArray[ctr]).clone())
			$(this).css('background-image','url("'+$(imgArray[ctr]).attr('src')+'")')
			$(this).attr('data-original',$(imgArray[ctr]).attr('src'));
			if(ctr == imgLen-1)ctr=0;
          else ctr++;			
        });
 
 
		fullWidth();
 
		 $(".collection-image").lazyload({
		      effect : "fadeIn"
		 });
	}
 
 
function fullWidth(){	
	var fullWidth = $(window).width();
	var margin;
	var container = $('.container').width();
	//if(fullWidth > 1200){
		margin = 	(((fullWidth - container)/2))* -1;
		$('.fullWidth').css('margin-left', margin);
		$('.fullWidth').css('margin-right', margin);
	//}
}
 
$(window).on('load', initPageBreaks);
$(window).on('resize', fullWidth);
 
</script>

The reason that i came to this conclusion is that if i use the Comment / endcommand function the pictures don't show on the page. ( but the room for the pictures is shown as a blank space ) At this point we've used the following code to show at least something which renders the collection image that you can upload with your collection.
As said my knowledge is limited and i'm trying to figure this one out for a couple of weeks now and i think i can't find it even when it's staring me in the eyes.

The html that i have at this point is 

{% if collection.image %}
<div class="collection-hero" style="margin-top: 136px;">
             <div id="MainImgHeader" class="collection-image" style="background-image:url('{{ collection.image | img_url: 'master' }}')">
	<img src="{{ collection.image | img_url: 'master' }}">
	  <div class="collection-hero-text">
					<div class="display-table">
						<div class="display-table-cell">
							<h1>{{collection.title}}</h1>
							<div>{{ collection.description }}</div>
							  <div id="LifestyleImages">
                               <img src="{{ collection.image | img_url: 'master' }}">
                         	   <img src="{{ collection.image | img_url: 'master' }}">
                          	 </div> 
                           </div>
						</div>
					</div>
				</div>
			</div>
{% endif %}

So i went for the image collection as the source at this point but i've tried several input commands but nothing even remotly came close to what i want.
Hope this makes any sence and that some-one is willing to help me out.

thanks,

Eelco

Top
Tags: