Skip to content

Instantly share code, notes, and snippets.

View commwork's full-sized avatar
😄

COMMWORK commwork

😄
1 follower · 1 following
View GitHub Profile
@courtneymyers
courtneymyers / acf_modifications.php
Created February 28, 2018 18:36
Reduces initial height of Advanced Custom Fields WYSIWYG fields to 100px, and enables autoresizing of WYSIWYG field, as text is entered. Best practice would be to include this function in a site-specific plugin.
<?php
/*
* -----------------------------------------------------------------------------
* Advanced Custom Fields Modifications
* -----------------------------------------------------------------------------
*/
function PREFIX_apply_acf_modifications() {
?>
<style>
@zexeder
zexeder / slick-random.js
Created September 4, 2017 09:28
Slick Random Slides
$.fn.randomize = function (selector) {
var $elems = selector ? $(this).find(selector) : $(this).children(),
$parents = $elems.parent();
$parents.each(function () {
$(this).children(selector).sort(function (childA, childB) {
// * Prevent last slide from being reordered
if($(childB).index() !== $(this).children(selector).length - 1) {
return Math.round(Math.random()) - 0.5;
}
@ControlledChaos
ControlledChaos / README.md
Last active March 7, 2024 04:41
Add srcset and sizes attributes to Advanced Custom Fields image uploads.

ACF Responsive Images

WordPress Snippet

Adds the srcset and sizes attributes to ACF image uploads. Requires installation of the Advanced Custom Fields plugin.

NOTE: ACF image field must be set to return the ID.

NOTE: WordPress needs image sizes with equal aspect ratios in order to generate the srcset, and does not use srcset when images are added as "Full Size".

@giodc
giodc / wordpress-check-if-image-is-gif
Last active June 23, 2022 03:54
Check if WordPress featured image is gif, and output full size image to allow animated gif in Loop
<?php
$url = wp_get_attachment_url( get_post_thumbnail_id() );
$filetype = wp_check_filetype($url);
if ($filetype[ext] == 'gif')
{the_post_thumbnail('full', array('class' => 'img-responsive')); }
else
@jacurtis
jacurtis / _spacing-helpers.scss
Last active May 30, 2024 17:41
SASS Margin and Padding Helpers Loop. Generates .m-t-10 type helper classes.
/*
This .scss loop will create "margin helpers" and "padding helpers" for use in your web projects.
It will generate several classes such as:
.m-r-10 which gives margin-right 10 pixels.
.m-r-15 gives MARGIN to the RIGHT 15 pixels.
.m-t-15 gives MARGIN to the TOP 15 pixels and so on.
.p-b-5 gives PADDING to the BOTTOM of 5 pixels
.p-l-40 gives PADDING to the LEFT of 40 pixels
@cfxd
cfxd / shortcode.css
Last active November 17, 2021 05:53
How to Make the WordPress Video Shortcode Responsive. See http://cfxdesign.com/how-to-make-the-wordpress-video-shortcode-responsive
.wp-video, video.wp-video-shortcode, .mejs-container, .mejs-overlay.load {
width: 100% !important;
height: 100% !important;
}
.mejs-container {
padding-top: 56.25%;
}
.wp-video, video.wp-video-shortcode {
max-width: 100% !important;
}
@mattradford
mattradford / acf_get_directions.php
Last active February 16, 2023 12:08
ACF Get Directions map link
<?php
$location = get_field('map_location');
if ( !empty( $location ) ) :
$map_url = 'https://www.google.com/maps/dir/?api=1&destination=' . $location['lat'] . ',' . $location['lng'];
echo '<a href=". esc_url( $map_url ) . '" rel="nooopener">Get directions</a>';
endif;
?>
<p>This should produce a link like this:</p>
<a href="https://www.google.com/maps/dir/?api=1&destination=51.072159,1.088130">Get directions</a>
@DannyNunez
DannyNunez / BootStrapFlyoutMenu.html
Last active June 19, 2018 10:41
Boot Strap Flyout Menu
<!doctype html>
<html>
<head>
<title>Boot Strap Fly out</title>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style>
/* Drop Down FLyout Menu */
.dropdown-submenu {
@emaildano
emaildano / acf-radio-button-example.php
Last active October 14, 2016 08:08
ACF Radio Button Example
<?php $program = get_sub_field('program_selection'); ?>
<?php if( $program == 'intensity' ){ ?>
<?php } else if( $program == 'crossfit' ){ ?>
<?php } else if( $program == 'personal' ){ ?>
<?php } else if( $program == 'allprograms' ){ ?>
@stephenscaff
stephenscaff / Random Images on Refresh
Last active October 21, 2023 07:29
Super simple way to randomly load new images on refresh via Jquery and DOM injection. Great for banners.
<!DOCTYPE html>
<head>
<!--Little CSS fade in -->
<style>
.fade-in{
-webkit-animation: fade-in 2s ease;
-moz-animation: fade-in ease-in-out 2s both;
-ms-animation: fade-in ease-in-out 2s both;
-o-animation: fade-in ease-in-out 2s both;