Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up
  • Sign in to follow this  

    Banner Code Generator

       (0 reviews)

    Have multiple site banners and don't want to create a code block for each one? This JavaScript adds a click event to each banner image that updates the bcg-code block with a new image url and alt text. The included CSS is very minimal and the HTML can be altered, though you should keep the bcg-banner and bcg-code wrappers as is. Images from Unsplash. Note:  As the preview and code tabs here parse differently, the preview might not look correct, but the code to copy will be right.


    Actual Template Responsive

    88 x 31

    Coffee 88x31 Good Dog 88x31 Lightning 88x31

    100 x 50

    Coffee 100 x 50 Good Dog 100 x 50 Lightning 100 x 50
    <a href="//google.com">
    	<img src="//images.rpginitiative.com/uploads/monthly_2018_09/large.coffee-88x31.jpg.db67fd8c3ddc30853fcefbbf3e4ea114.jpg" alt="Coffee 88x31" />
    </a>

    Template code

    <style>
    	/* Banner Code Generator by Memoria at The Initiative.
    	   Last updated 09.16.18.
    	   Please do not remove credits! */
    
    	/* Banner Code Generator - Overall Styles */
    	.bcg-banners, #bcg-code {
    		margin: 0 0 20px 0;
    	}
    	.bcg-banners h3, #bcg-code h3 {
    		margin: 0 0 10px 0;
    	}
    	.bcg-banners, .bcg-banners *, #bcg-code, #bcg-code * {
    		box-sizing: border-box;
    	}
    
    	/* Banner Code Generator - Banners */
    	.bcg-banners img {
    		cursor: pointer;
    	}
    
    	/* Banner Code Generator - Code */
    	#bcg-code pre, #bcg-code code {
    		margin: 0;
    		border: 0;
    		padding: 0;
    	}
    	#bcg-code pre code {
    		display: block;
    		font-family: 'Courier New', monospace;
    		background: #222222;
    		color: #ededed;
    		padding: 20px;
    		white-space: pre-wrap;
    		overflow: auto;
    	}
    </style>
    <!-- Replace image src and alt attributes -->
    <div class="bcg-banners">
    	<h3>88 x 31</h3>
    	<div class="bcg-banner-wrapper">
    		<img src="//images.rpginitiative.com/uploads/monthly_2018_09/large.coffee-88x31.jpg.db67fd8c3ddc30853fcefbbf3e4ea114.jpg" alt="Coffee 88x31" />
    		<img src="//images.rpginitiative.com/uploads/monthly_2018_09/large.dog-88x31.jpg.e110ed7e659d4820f80524612a2fd371.jpg" alt="Good Dog 88x31" />
    		<img src="//images.rpginitiative.com/uploads/monthly_2018_09/large.lightning-88x31.jpg.032eb052921d1ccff05e087fe25c52e5.jpg" alt="Lightning 88x31" />
    	</div>
    </div>
    <div class="bcg-banners">
    	<h3>100 x 50</h3>
    	<div class="bcg-banner-wrapper">
    		<img src="//images.rpginitiative.com/uploads/monthly_2018_09/large.coffee-100x50.jpg.99c46680c93434a9be17399debf228ba.jpg" alt="Coffee 100 x 50" />
    		<img src="//images.rpginitiative.com/uploads/monthly_2018_09/large.dog-100x50.jpg.6fe7680fb0d8dedbc70e85586c3256da.jpg" alt="Good Dog 100 x 50" />
    		<img src="//images.rpginitiative.com/uploads/monthly_2018_09/large.lightning-100x50.jpg.4e730090bd83fb5081f88357c5600d9c.jpg" alt="Lightning 100 x 50" />
    	</div>
    </div>
    <!-- Replace the image src and alt attribute as well as the site url (google.com) -->
    <div id="bcg-code">
    	<pre><code>&lt;a href="//google.com"&gt;
    	&lt;img src="//images.rpginitiative.com/uploads/monthly_2018_09/large.coffee-88x31.jpg.db67fd8c3ddc30853fcefbbf3e4ea114.jpg" alt="Coffee 88x31" /&gt;
    &lt;/a&gt;</code></pre>
    </div>
    <script>
    	// Banner Code Generator by Memoria at The Initiative.
    	// Last updated 09.16.18.
    	bannerCodeGenerator('.bcg-banners img', '#bcg-code code');
    	
    	// You only need to add this function once
    	function bannerCodeGenerator(bannerImages, bannerCode) {
    		var codeBlock = document.querySelector(bannerCode);
    
    		if (codeBlock) {
    			// Re-usable variables
    			var codeHTML = codeBlock.innerHTML;
    			var currentImage = codeHTML.match(/src=\"(.*?)\"/)[1];
    			var currentAlt = codeHTML.match(/alt=\"(.*?)\"/)[1];
    		
    			// Loop through all banner images and attach onclick event
    			var bannerArray = document.querySelectorAll(bannerImages);
    			for (var i = 0; i < bannerArray.length; i++) {
    				bannerArray[i].onclick = function(e) {
    					changeBannerCode(e, currentImage, currentAlt);
    				};
    			}
    		
    			// Function to change banner code
    			function changeBannerCode(e, image, alt) {
    				// Element that has been clicked
    				var selector = e.target || e.srcElement;
    		
    				// Replace current image src and alt with new element alt and src
    				codeBlock.innerHTML = codeHTML.replace(image, selector.getAttribute('src')).replace(alt, selector.getAttribute('alt'));
    			}
    		}
    	}	
    </script>
    Sign in to follow this  


    User Feedback

    Create an account or sign in to leave a review

    You need to be a member in order to leave a review

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

    There are no reviews to display.




×

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.