JetSloth jetsloth

## image-choices-cs2-demo-style.css
.image-choices-field {
    max-width: 100%;
    width: 90%;
    display: block;
    margin: 0 auto;
}
.image-choices-field .gfield_label {
	font-size: 1.6em;
	margin-bottom: 1.6em;
	display: block;

## Color Picker Event Listener
jQuery('body').on('gf-color-picker:picked', function(e, hex, ref){
    // do whatever you want here.
    // hex will be... hex
    // ref will be the formID_fieldID string
});

## gfcp_bg
<div class="update-preview gfcp_bg">
  <h2>My heaidng inside my banner</h2>
</div>

## Posts_in_notifications.php
//////////////////////////////////////////////////////////////////
// Latest Posts in Gravity Forms email notifications -  https://jetsloth.com/labs/how-to-add-post-articles-to-your-gravity-forms-email-notifications/
//////////////////////////////////////////////////////////////////
function custom_email_latest_posts_shortcode( $atts, $content = null ) {
	$content = do_shortcode( shortcode_unautop( $content ) );
	if ( '</p>' == substr( $content, 0, 4 )
		&& '<p>' == substr( $content, strlen( $content ) - 3 ) )
		$content = substr( $content, 4, strlen( $content ) - 7 );

	$output = '';

## Slide-out-gravity-forms.css
/*/////////////////////////////////Slide-out-gravity-forms.css/////////////////////////////////*/
/* Full article here https://jetsloth.com/gravity-forms/create-a-slide-out-gravity-forms-widget/ */
.gfq-oc-wrap {
	z-index: 9999999;
	position: fixed;
	bottom: 0px;
	right: 0px;
  height: 100%;
}
.gfq-oc-wrap .gfq-badge {

## widget.html
<div class="gfq-wrap">
    <div class="gfq-panel">
        <!--Change to the form ID of your form below-->
        <!--[gravityform id="66" title="false" description="false" ajax="true"]-->
    </div>
    <div class="gfq-badge">
        <img src="https://jetsloth.com/wp-content/uploads/2019/02/mail-1.svg" alt="Icon"/>
    </div>
</div>

## widget.css
.gfq-wrap {
	z-index: 9999999;
	position: fixed;
	bottom: 40px;
	right: 40px;
}
.gfq-badge {
	background: #71C28E; /*Change this colour to change the circle*/
	width: 60px;
	height: 60px;

## widget.js
<script type="text/javascript">
    jQuery(document).ready(function( $ ){
        $('.gfq-badge').click(function() {
            $('.gfq-panel').toggleClass('panel-active');
        });
    });
</script>

## image-choices-radio-button-merge-tag.php
<?php
/*
If you use the merge tag {all_fields} this will always display the image
Or if you use individual field merge tags, eg {Options:1} you can display the image by adding a modifier, eg {Options:1:image}
You can also specify the size that the image should display at by adding a pixel size in the following format, eg {Options:1:image_50px}
By default your image will display at its natural size
*/
add_filter( 'gform_merge_tag_filter', 'image_choices_merge_tag_image', 11, 5 );
function image_choices_merge_tag_image( $value, $merge_tag, $modifier, $field, $raw_value ) {


## Image_Choices_Product_Configurator_jQuery.js
<script type="text/javascript">
jQuery(document).bind('gform_post_render', function(e, formId, currentFormPage) {

	var $form = jQuery('#gform_' + formId);

	if ($form.data('configurator-init') === true) {
		return;
	}

	$form.on('click', '.config-layer.image-choices-field .ginput_container_radio input', function (e) {