SHOW:
|
|
- or go back to the newest paste.
| 1 | <?php get_header(); ?> | |
| 2 | ||
| 3 | <div class="col1"> | |
| 4 | ||
| 5 | <?php if (have_posts()) : ?> | |
| 6 | <!--Javascript Functions--> | |
| 7 | <script language="JavaScript" type="text/javascript"> | |
| 8 | <!-- | |
| 9 | // Firefox doesn't like 'innnerText' property :( | |
| 10 | hasInnerText = (document.getElementsByTagName("body")[0].innerText != undefined) ? true : false;
| |
| 11 | ||
| 12 | // Create images object and properties | |
| 13 | images = new Object(); | |
| 14 | images.default = ['Templates', '/meme/default.jpg']; | |
| 15 | images.scumbagsteve = ['Scumbag Steve', '/meme/ss.jpg']; | |
| 16 | images.sociallyawkwardpenguin = ['Socially Awkward Penguin', '/meme/sap.jpg']; | |
| 17 | ||
| 18 | ||
| 19 | ||
| 20 | BaseImage = ''; | |
| 21 | BaseImageName = ''; | |
| 22 | captionClicked = False; | |
| 23 | ||
| 24 | function SetBaseImage(){
| |
| 25 | // Pulls image from Combobox and sets | |
| 26 | var selection = document.getElementById("memetype").value;
| |
| 27 | ||
| 28 | // Set new Base Image | |
| 29 | BaseImage = images[selection][1]; | |
| 30 | BaseImageName = images[selection][0]; | |
| 31 | ||
| 32 | ||
| 33 | // Update image on site | |
| 34 | // http://bytes.com/topic/javascript/answers/722008-how-do-i-use-combobox-change-displayed-image-screen | |
| 35 | document.getElementById('display_image').src=BaseImage;
| |
| 36 | document.getElementById('display_image').alt=BaseImageName;
| |
| 37 | document.getElementById('truename').value=BaseImageName;
| |
| 38 | document.getElementById('imgurl').value=BaseImage;
| |
| 39 | } | |
| 40 | ||
| 41 | function UpdateCap(){
| |
| 42 | // Updates top line of preview from Cap1 | |
| 43 | if(!hasInnerText) {
| |
| 44 | document.getElementById('toptext').textContent = document.getElementById('cap1').value;
| |
| 45 | document.getElementById('bottext').textContent = document.getElementById('cap2').value;
| |
| 46 | } else {
| |
| 47 | document.getElementById('toptext').innerText = document.getElementById('cap1').value;
| |
| 48 | document.getElementById('bottext').innerText = document.getElementById('cap2').value;
| |
| 49 | } | |
| 50 | } | |
| 51 | ||
| 52 | function UpdateCapFontSize(){
| |
| 53 | // Updates Both Font Sizes | |
| 54 | document.getElementById('toptext').style.fontSize = document.getElementById('cap1font').value + 'px';
| |
| 55 | document.getElementById('bottext').style.fontSize = document.getElementById('cap2font').value + 'px';
| |
| 56 | } | |
| 57 | ||
| 58 | ||
| 59 | //--> | |
| 60 | </script> | |
| 61 | ||
| 62 | ||
| 63 | ||
| 64 | <!-- CSS For Text Over Image --> | |
| 65 | ||
| 66 | <style type="text/css"> | |
| 67 | h2 { text-align:center;}
| |
| 68 | /* Frame Border */ | |
| 69 | .frame { padding: 5px; border: 1px solid #aaa; }
| |
| 70 | ||
| 71 | /* Meme CSS */ | |
| 72 | .meme {
| |
| 73 | position: relative; | |
| 74 | align: center; | |
| 75 | height: 400px; | |
| 76 | width: 400px; | |
| 77 | overflow: hidden; | |
| 78 | margin-left:auto; | |
| 79 | margin-right:auto; | |
| 80 | ||
| 81 | } | |
| 82 | ||
| 83 | .meme .img {
| |
| 84 | height: 400px; /*set abs img height*/ | |
| 85 | width: 400px; | |
| 86 | align:center; | |
| 87 | } | |
| 88 | ||
| 89 | .meme .text {
| |
| 90 | font-family:"Impact", Charcoal, sans-serif; | |
| 91 | font-size: 50px; | |
| 92 | color: #FFFFFF; | |
| 93 | line-height: 100%; | |
| 94 | letter-spacing: 1px; | |
| 95 | text-shadow:-2px -2px 0 #000, | |
| 96 | 0 -2px 0 #000, | |
| 97 | 2px -2px 0 #000, | |
| 98 | 2px 0 0 #000, | |
| 99 | 2px 2px 0 #000, | |
| 100 | 0 2px 0 #000, | |
| 101 | -2px 2px 0 #000, | |
| 102 | -2px 0 0 #000; | |
| 103 | } | |
| 104 | ||
| 105 | ||
| 106 | .meme .toptext {
| |
| 107 | text-align: center; | |
| 108 | position: absolute; | |
| 109 | width: 400px; | |
| 110 | top: 5px; | |
| 111 | } | |
| 112 | ||
| 113 | .meme .bottext {
| |
| 114 | text-align: center; | |
| 115 | position: absolute; | |
| 116 | width: 400px; | |
| 117 | bottom: 5px; | |
| 118 | } | |
| 119 | ||
| 120 | </style> | |
| 121 | ||
| 122 | ||
| 123 | <!-- Main Page --> | |
| 124 | <?php while (have_posts()) : the_post(); ?> | |
| 125 | ||
| 126 | <div class="post-outer"> | |
| 127 | ||
| 128 | <div class="post-alt blog" id="post-<?php the_ID(); ?>"> | |
| 129 | ||
| 130 | <?php if ( get_option( 'woo_breadcrumbs' ) == 'true') { yoast_breadcrumb('<div id="breadcrumb"><p>','</p></div>'); } ?>
| |
| 131 | ||
| 132 | <h2><?php the_title(); ?></h2> | |
| 133 | ||
| 134 | ||
| 135 | ||
| 136 | ||
| 137 | <!-- Image Preview --> | |
| 138 | ||
| 139 | ||
| 140 | <div class="meme"> | |
| 141 | <img id = "display_image" src="/meme/default.jpg" alt="Select a Template"> | |
| 142 | <div class="text"> | |
| 143 | <div class="toptext" id="toptext">Caption 1</div> | |
| 144 | <div class="bottext" id="bottext">Caption 2</div> | |
| 145 | </div> | |
| 146 | </div> | |
| 147 | <br> | |
| 148 | ||
| 149 | ||
| 150 | ||
| 151 | <!-- Start Form --> | |
| 152 | <!-- TODO: Add form validation (onsumbit="return function()") --> | |
| 153 | ||
| 154 | <form action="meme.php" method="post"> | |
| 155 | <div align="center"> | |
| 156 | ||
| 157 | ||
| 158 | <!-- Template Combobox --> | |
| 159 | ||
| 160 | <div> | |
| 161 | <select name="memetype" id="memetype" onchange="SetBaseImage()" onclick="SetBaseImage()" onkeyup="SetBaseImage()" onfocus="SetBaseImage()"> | |
| 162 | <!-- Javascript to generate Combobox --> | |
| 163 | <SCRIPT language="JavaScript" type="text/javascript"> | |
| 164 | <!-- | |
| 165 | for (var key in images) {
| |
| 166 | document.write("<option value=\"" + key + "\">" + images[key][0] + "</option>");
| |
| 167 | } | |
| 168 | --> | |
| 169 | </script> | |
| 170 | </select> | |
| 171 | </div><!-- align=center --> | |
| 172 | ||
| 173 | ||
| 174 | <!-- Caption 1 Field --> | |
| 175 | ||
| 176 | <b>Top Caption:</b> <textarea name="cap1" id="cap1" rows="4" cols="30" onkeyup="UpdateCap()" onchange="UpdateCap()" onclick="UpdateCap()"></textarea> | |
| 177 | <select name="cap1font" id="cap1font" onchange="UpdateCapFontSize()" onclick="UpdateCapFontSize()" onkeyup="UpdateCapFontSize()" onfocus="UpdateCapFontSize()"> | |
| 178 | <option value="50">Size: 50</option> | |
| 179 | <option value="40">Size: 40</option> | |
| 180 | <option value="30">Size: 30</option> | |
| 181 | <option value="25">Size: 25</option> | |
| 182 | </select> | |
| 183 | <br> | |
| 184 | ||
| 185 | ||
| 186 | <!-- Caption 2 Field --> | |
| 187 | ||
| 188 | <b>Bottom Caption:</b> <textarea name="cap2" id="cap2" rows="4" cols="30" onkeyup="UpdateCap()" onchange="UpdateCap()" onclick="UpdateCap()"></textarea> | |
| 189 | <select name="cap2font" id="cap2font" onchange="UpdateCapFontSize()" onclick="UpdateCapFontSize()" onkeyup="UpdateCapFontSize()" onfocus="UpdateCapFontSize()"> | |
| 190 | <option value="50">Size: 50</option> | |
| 191 | <option value="40">Size: 40</option> | |
| 192 | <option value="30">Size: 30</option> | |
| 193 | <option value="25">Size: 25</option> | |
| 194 | </select> | |
| 195 | ||
| 196 | <br> | |
| 197 | ||
| 198 | ||
| 199 | <!-- Dropdown School List (ID = 'school') --> | |
| 200 | ||
| 201 | <b>School:</b> <?php wp_dropdown_categories('name=school&id=school&hide_empty=0'); ?>
| |
| 202 | <br> | |
| 203 | ||
| 204 | ||
| 205 | <!-- Hidden Form Data --> | |
| 206 | ||
| 207 | <input type="hidden" id="truename" name="truename" value="Default"> | |
| 208 | <input type="hidden" id="imgurl" name="imgurl" value="/meme/default.jpg"> | |
| 209 | ||
| 210 | <!-- Submit Button --> | |
| 211 | ||
| 212 | - | <input type="submit" value="Create"> |
| 212 | + | <input type="submit" name ="submit" value="Create"> |
| 213 | </div> <!-- align=center --> | |
| 214 | ||
| 215 | </form> | |
| 216 | <!-- End Create form --> | |
| 217 | ||
| 218 | ||
| 219 | ||
| 220 | ||
| 221 | </div><!--/post--> | |
| 222 | ||
| 223 | </div><!--/post-outer--> | |
| 224 | ||
| 225 | <?php endwhile; ?> | |
| 226 | ||
| 227 | <?php endif; ?> | |
| 228 | ||
| 229 | </div><!--/col1--> | |
| 230 | ||
| 231 | <?php get_sidebar(); ?> | |
| 232 | ||
| 233 | <?php get_footer(); ?> |