jetsloth’s gists

jetsloth / Color-Picker-product-builder.js

Created March 10, 2020 00:48

	/*///////////////////
	JS
	Build a simple product visualiser with Gravity Forms Color Picker
	Full article at https://jetsloth.com/labs/build-a-simple-product-visualiser-with-gravity-forms-color-picker/
	////////////////////*/

	<script type="text/javascript">
	jQuery(document).bind('gform_post_render', function(e, formId, currentFormPage) {
	// Hide all the product images
	jQuery( ".gform_body li.preview-area img" ).css('display','none');

jetsloth / Color-Picker-product-builder.html

Created March 10, 2020 00:49

	<img class=”product” src=”https://yourwebsite.com/link_to_your_image/my_image1.png“/>
	<img class=”product” src=”https://yourwebsite.com/link_to_your_image/my_image2.png“/>
	<img class=”product” src=”https://yourwebsite.com/link_to_your_image/my_image3.png“/>
	<img class=”product” src=”https://yourwebsite.com/link_to_your_image/my_image4.png“/>

jetsloth / Product-Advanced.css

Created March 12, 2020 00:45

	/////////////////////////////////////////

	/* Outter form wrapper */
	.gform_body {
	background:#f6f6f6;
	border-radius:10px;
	margin-bottom:40px;
	overflow:hidden;
	padding:50px 0px;
	}

jetsloth / Product-Advanced.js

Created March 12, 2020 00:46

	<script type="text/javascript">
	jQuery(document).bind('gform_post_render', function(e, formId, currentFormPage) {
	var $form = jQuery('#gform_' + formId);
	$form.find(".gform_body li.preview-area img" ).css('display','none');
	$form.find(".gform_body li.preview-area .demo-product:eq(0)" ).css('display','block');
	$form.find(".gform_body li.preview-area .demo-artwork:eq(1)" ).css('display','block');
	// On color swatch click/secltion
	$form.find("li.color-picker-choice " ).click(function() {
	var $radioIndex = $form.find("li.color-picker-choice ").index(this);
	var $imageRef = $form.find(".gform_body li.preview-area .demo-product");

jetsloth / Product-Advanced.html

Created March 12, 2020 00:47

	<img class="demo-product" src="https://jetsloth.com/wp-content/uploads/2018/09/Artboard-3-Copy-12.png"/>
	<img class="demo-product" src="https://jetsloth.com/wp-content/uploads/2018/09/Artboard-3-Copy-13.png"/>
	<img class="demo-product"" src="https://jetsloth.com/wp-content/uploads/2018/09/Artboard-3-Copy-14.png"/>
	<img class="demo-product" src="https://jetsloth.com/wp-content/uploads/2018/09/Artboard-3-Copy-15.png"/>
	<img class="demo-artwork" src="https://jetsloth.com/wp-content/uploads/2018/09/I-heart-Jetsloth-1.svg"/>
	<img class="demo-artwork" src="https://jetsloth.com/wp-content/uploads/2018/09/logo.svg"/>
	<img class="demo-artwork" src="https://jetsloth.com/wp-content/uploads/2018/09/sloth-logo-royalty-free_defiant-sloth.png"/>
	<img class="demo-artwork" src="https://jetsloth.com/wp-content/uploads/2019/07/JetSloth-Logo-dark.png"/>

jetsloth / Collapsible_Tabs.css

Created April 24, 2020 03:38

	/*///////////////////
	JetSloth.com
	Display your Collapsible Sections in tabs with this CSS updates
	Full article at https://jetsloth.com/labs/display-your-form-with-tabs-using-collapsible-sections/
	////////////////////*/

	/* /////////////////// Form wrapper /////////////////// */
	.form-has-collapsible-sections_wrapper {
	margin: 0 auto;
	text-align: left;

jetsloth / add_colors_to_taxonomy_choices.php

Created August 15, 2020 01:55

Add color choices to field dynamically populated by the Gravity Forms + Custom Post Types plugin, where colors are set as the text of each taxonomy term

	<?php
	function add_colors_to_taxonomy_choices( $form ) {
	global $gf_cpt_addon;
	if ( empty($gf_cpt_addon) ) {
	return $form;
	}

	foreach( $form['fields'] as &$field ) {
	$taxonomy = $gf_cpt_addon->get_field_taxonomy( $field );
	$colorPickerEnabled = ( isset($field['colorPicker_enableColors']) && !empty($field['colorPicker_enableColors']) );

jetsloth / gppa_input_image_choices.php

Created October 27, 2020 22:34

Filter Gravity Wiz Populate Anything to add Image Choices from post featured image

	<?php
	add_filter( "gppa_input_choices", "gppa_populate_featured_image_choices", 100, 3 );

	function gppa_populate_featured_image_choices( $choices, $field, $objects ) {

	if ( ! property_exists($field, 'imageChoices_enableImages') \|\| ! $field->imageChoices_enableImages ) {
	return $choices;
	}

	$i = 0;

jetsloth / clean.css

Created March 2, 2021 22:52

Image Choices Clean Style Demo

	@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');
	/To get the produc options fields working, you need to add a product field. /
	/However we don't want to show that in this example so lets hide it with CSS./
	.hidden {
	display: none;
	visibility: hidden;
	pointer-events: none;
	}
	/Background Wrapper/
	.gform_wrapper {

jetsloth / image_choices_clean-style.css

Created March 2, 2021 23:20

	@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');
	/To get the produc options fields working, you need to add a product field. /
	/However we don't want to show that in this example so lets hide it with CSS./
	.hidden {
	display: none;
	visibility: hidden;
	pointer-events: none;
	}
	/Dark field lables/
	.top_label label.gfield_label {

JetSloth jetsloth