Cacher is the code snippet organizer for pro developers

{grid}
	<section class="grid {if background_style == 'colour'}colour{/if} {if background_style == 'image'}image-bg{/if}" {if background_style == 'image'}style="background-image: url({background_image}); "{/if} >
		<div class="container">
			{if image_heading}<img src="{image_heading}" alt="{title}">
				{if:else}
			<h1>{title}</h1>
			{if more}<a href="{more_link}" class="more">{more} <?php echo file_get_contents("images/icons/chevron-right.svg") ?></a>{/if}
			{/if}
		</div>
		<div class="container">		
			{related}
				<div class="grid-item {if related:image_size == 'double' || related:store_image_size == 'double'} grid-item--wide {/if} {if show_title == 'yes'}textual{/if}">
					<div class="image-container">
							<a href="{related:channel}/{related:url_title}">

								{if related:image_size == 'square' || related:store_image_size == 'square'}
									{exp:ce_img:single src="{related:image}" width="280"}
									{if related:store_photo}
										{exp:ce_img:single src="{related:store_photo}" width="280"  alt="Photo of {related:title}" }
										<!-- <div class="logo-overlay">{exp:ce_img:single src="{related:store_logo}" width="150" alt="{related:title}"}</div> -->

										{exp:ce_img:pair src="{related:store_logo}" max="100" crop="yes"}
										<div style="background-image: url({made}); " class="logo-overlay"><!-- --></div>
										{/exp:ce_img:pair}

									{/if}									
									{if related:page_image}
										{exp:ce_img:single src="{related:page_image}" width="280"}
									{/if}
									{if related:news_image}
										{exp:ce_img:single src="{related:news_image}" width="280"}
									{/if}

								{if:elseif related:image_size == 'double' || related:store_image_size == 'double'}

									{exp:ce_img:single src="{related:image}" width="595" height="280" crop="yes" }
									{if related:store_photo}
										{exp:ce_img:single src="{related:store_photo}" width="595" height="280" alt="Photo of {related:title}" }
										{exp:ce_img:pair src="{related:store_logo}" max="100" crop="yes"}
											<div style="background-image: url({made}); " class="logo-overlay"><!-- --></div>
										{/exp:ce_img:pair}
									{/if}									
									{if related:news_image}
										{exp:ce_img:single src="{related:news_image}" width="595" height="280" crop="yes" }
									{/if}

								{/if}

							</a>
		
					</div>

						{if show_title == 'yes'}<p class="title">{related:title}</p>{/if}
						{if show_expiry == 'yes' && related:offer_end_date}<p class="expiry">Expires {related:end_date format="%d/%m/%y"}</p>{/if}	

				</div>
			{/related}
		</div>
	</section>

{/grid}