Jump to content
  • Banner Code Generator

       (1 review)

    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" />

    Template code

    	/* 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;
    <!-- 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 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" />
    <!-- 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;
    	// 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'));

    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.




    Let me first introduce you to myself, I am an Egyptian Arab, and I have the honor to join this wonderful forum, thank you very much

    Share this review

    Link to review

  • Create New...

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.