Skip to content

Instantly share code, notes, and snippets.

@eclarrrk
eclarrrk / sample-page.html
Created October 5, 2016 19:33
Sample page for gh-pages demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Github Pages Sample Page</title>
<style media="screen">
.wrapper {
width: 80%;
padding: 20px 10% 0 10%;
background-color: #fff;
<aside class="post-navigation bg-texture--light">
<?php
$next_post = get_next_post();
$prev_post = get_previous_post();
?>
<?php if ($prev_post) { ?>
<a href="<?php echo $prev_post->guid ?>" class="post-navigation__prev">
<div class="post-navigation__label">Previous story</div>
<div class="post-navigation__title">
<?php echo $prev_post->post_title ?>
<?php
$lastposts = get_posts( array(
'numberposts' => 99,
'post_type' => 'team_member')
);
if ( $lastposts ) {
foreach ( $lastposts as $post ) :
setup_postdata( $post );
// Add additional image size.
// First parameter is name for image size. Second parameter is the image's width. Height is set proportionally
// After this is added to functions.php, when an image is uploaded, an additional image with the width of the size entered will be created, but will not appear in the media library. much like thumbnail images are.
// Only applys to images uploaded since this code is added. Use regenerate thumbnails plugin to apply this change to all media.
add_image_size('x-large-img', 1300);
/////////////////////////////////////////////////
@eclarrrk
eclarrrk / nov-iframe-styles.txt
Last active July 21, 2017 17:23
Novara iframe form styles
iframe {
// remove "width: 600px" from element's inline style
}
form * {
box-sizing: border-box;
}
form table {
width: 100%;
}
.formContainer {
@eclarrrk
eclarrrk / php-obfuscate-email-address
Last active May 25, 2018 13:00
How to obfuscate an email address in PHP
1. Remove link around email address.
2. Wrap email address in <div class="reverse"></div>
3. Reverse the email address using strrev() or similar.
////////// example code //////////
<div class="reverse">
<?php echo strrev($emailAddress); ?>
</div>
// must come after wp_footer();
var elem = document.querySelector("#masthead");
var headroom = new Headroom(elem, {
"offset": 100,
"tolerance": 8,
"classes": {
"initial": "headroom",
"pinned": "headroom--is-pinned",
"unpinned": "headroom--is-hidden"
}
@eclarrrk
eclarrrk / functions.php
Last active June 27, 2018 17:12
Generate responsive images in WordPress using the wp_get_attachment_image() function.
<?php
// Add a custom image size using the following function.
add_image_size( 'image-size-name', $imageWidthInPixels);
// Examples:
// Resized to 300px wide by proportionbal height.
add_image_size('headshot', 300);
// Meat Monthly //
<div id="bbox-root" class="form"></div>
<script type="text/javascript">
window.bboxInit = function () {
bbox.showForm('458c52ea-a95b-478e-8b49-7346b1779a45');
};
(function () {
var e = document.createElement('script'); e.async = true;
e.src = 'https://bbox.blackbaudhosting.com/webforms/bbox-min.js';
@eclarrrk
eclarrrk / wp-custom-responsive-image-markup.php
Last active February 27, 2019 21:06
Snippet for creating responsive images while controlling scrset values.
<?php
$imageID = get_sub_field('img_id'); // ACF should return image ID
$size = 'full';
?>
<img
class="jetpack-lazy-image"
src="<?php echo wp_get_attachment_image_url( $imageID, '$size' ) ?>"
srcset="<?php echo wp_get_attachment_image_srcset( $imageID, '$size' ) ?>"
sizes=" (min-width: 1400px) 800px,