I've got a Typerocket form (within Wordpress) and I'm trying to make a conditional field.
Like if the Type field is Image, show and Image field afterwards and if the Type field is Quote have a text (editor) field afterwards.
I can't find anything about Conditional fields in Typerocket's doc.
Here's what I got right now.
echo $form->repeater('pj_images_du_projet')->setLabel("Images du projet")->setFields([
$form->select('Type')->setOptions([
"Image"=>'image',
"Vidéo"=>'video',
"Témoignage"=>'temoignage'
]), //Type is what chooses what fields are below. Options are Image, Video or Testimonial
$form->image('image')->setLabel('Image'), //image only
$form->text('video')->setLabel('Vidéo'), //video only
$form->toggle('autoplay')->setLabel('Autoplay'), //video only
$form->textarea('temoignage')->setLabel('Témoignage'), //temoignage only
$form->text('auteur')->setLabel('Auteur'), //temoignage only
]);
Created a JS that does the work.
JS
jQuery('body').ready(function(){
jQuery("body").on('change','.is-conditional-selector',function(){px_redoConditionals();})
px_redoConditionals();
})
function px_redoConditionals(){
jQuery('body').find('.is-conditional-selector').each(function(){
var repeater = jQuery(this).parent().parent().parent();
console.log(repeater.attr('class'));
repeater.find('.is-conditional').removeClass('px-show');
//console.log(jQuery(this).val());
repeater.find('.is-conditional.is-conditional-'+jQuery(this).val()).addClass('px-show');
})
}
CSS
.is-conditional:not(.px-show){
display:none !important;
}
And then I add this to the select that changes which section is shown
->setAttribute('class','is-conditional-selector')
And this on the fields that need to be shown or hidden
->setAttribute('class','is-conditional is-conditional-[value of the select to show this]'),
Related
I have a gallery as an ACF repeater in wordpress.
In Oxygen builder there is a Condition functionality which allows to check some basic stuff, like if some field is blank, if the fields contains something, operators like "==", "!=" etc.
But for repeaters they don't work.
I haven't found a built-in solution to check if a repeater fields is empty or not.
I want to hide the section which holds my gallery if there are no images in the gallery.
Here's the solution:
I have created a custom condition via the Conditions API in Oxygen.
I added this code snippet via the Code Snippets plugin:
if( function_exists('oxygen_vsb_register_condition') ) {
oxygen_vsb_register_condition('Repeater empty checker', array('options'=>array(), 'custom'=>true), array('is not empty', 'is empty'), 'check_if_repeater_is_empty', 'Other');
function check_if_repeater_is_empty($value, $operator) {
if ($operator == "is not empty") {
return have_rows($value, get_the_ID());
} else if ($operator == 'is empty') {
return !have_rows($value, get_the_ID());
}
}
}
And now I have a "Repeater empty checker" in the condition dropdown.
As a value I just enter the name of the fields e.g. gallery and it checks if the gallery is empty or not.
I have a image upload field and a URL field in CF7 and how can i make it that a user needs to use one of the 2 fields. So select a image or put a link in the URL field?
I already search a little and i saw some options to do it on normal txt fields but that was not working for me i think because of the upload field.
I don't think that CF7 can do this out of the box. You would probably have to go down to code to solve this issue.
Since I don't know how big you form is this could maybe help you out:
https://wordpress.org/plugins/cf7-conditional-fields/ - Plugin for conditional field inside CF 7
https://conditional-fields-cf7.bdwm.be/conditional-fields-for-contact-form-7-tutorial/ - Tutorial how to use it.
So with this plugin you could basically create a dropdown in which the user first has to select if he wants to use an image or use the URL field. After that, only his selection would pop up and he can proceed with the selected option.
If you want to do the coding you can add some JS to the site and check on validation if one of the two fields is filled out or not.
If the plugin solves your issue - great, if not let me know so I can help you out with the code validation.
###Edit since we need code###
So to dynamically alter the required function I found a pretty good post:
Dynamically Disable Contact Form 7 Field Validation
Some Background information:
CF7 does the validation on server side, so working with JS or JQuery won't help in this case. What we are going to do is manipulate the server validation. If one of the fields is filled out correctly we are just putting content in the other field on the validation.
I created a form that looks like this:
The form in CF7 module looks like this:
<label> URL
[url* url ]
<label> Image
[file* image ]
[submit "Send"]
Then you just have to add the following code to your functions.php file of your theme.
function alter_wpcf7_posted_data( $data ) {
if($_FILES['image']['size'] != 0) {
$_POST['url'] = "http://fileupload.com";
}
if($_POST['url'] != "") {
$_FILES['image']['tmp_name'] = "urlprovided";
}
return $data;
}
add_filter("wpcf7_posted_data", "alter_wpcf7_posted_data");
Normally both fields will be empty in the beginning, if one of them has contet the other one gets fake data and the use has only to provide one.
Let me know if this helps.
I think i found the solution with a little help of the code from #Aschi33.
I made the image (upload field) required and the url field not. So there needs to be alwasy a image selected. But with this code:
function alter_wpcf7_posted_data( $data ) {
if($_POST['url'] != "") {
$_FILES['image']['tmp_name'] = "urlprovided";
}
return $data;
}
add_filter("wpcf7_posted_data", "alter_wpcf7_posted_data");
if the URL field is filled in then the required image field is faked to be filled in so then the URL field can be used to submit the form.
And then with this code:
function cf7_custom_url_check( $result, $url ) {
if ($result) {
$regex='/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/';
if (!preg_match($regex,$url)) $result=FALSE;
}
return $result;
}
add_filter( 'wpcf7_is_url', 'cf7_custom_url_check', 10, 2 );
I check if its a real video link from YouTube and if not the field will give a error.
I created some advanced custom fields. One of them is a select field, where you can choose between sale and charter.
I want to hide/show some of my advanced custom fields based on what is currently selected (sale or charter).
How can I do this?
ACf Image
As shown in image (Click link) there is an option in the ACF to show fields conditionally based on other fields value whether it is Checkbox or Select box.
The other answer covers the back end. For the front end template, something like this:
if (get_field('select_field_name') == 'sale'){
//show some stuff i.e. the_field('field_name');
}
elseif (get_field('select_field_name') == 'charter') {
//show other fields
}
else {
//maybe do something here
}
I have a grid image gallery built with view module.
And I want some effect for each image.
So,I try to add custom css class to each img tags.But I cannot it.
Please tell me "How to add custom css class in view module and grid format"?
You need to preprocess image style as follow:
/**
* THEME_preprocess_image_style() is also available.
*/
function <THEME_NAME>_preprocess_image(&$variables) {
if (isset($variables['style_name'])) {
if ($variables['style_name'] == 'thumbnail') {
$variables['attributes']['class'][] = "<YOUR CLASS NAME>";
}
}
}
Add above code in your template.php file of the current theme & clear cache.
Remember to replace text placed under <> in above code with appropriate values.
Hi this is simple no need to do this in coding, just do following.
1- Add a new field (Global Result counter) in your view and exclude it from display.
2- Exclude your image field from display.
3- Add a new field Global Custom text field, here you can add token of field Result counter to your image field, like following.
<div class="Image-[put-result-counter-token-here]" > [token-for-image-field]</div>
This will output a dynamic class for your image field.
Perhaps someone can help me. I've just installed the Grid Field Extensions Module for Silverstripe (https://github.com/ajshort/silverstripe-gridfieldextensions) because I need inline editing/adding. It works, but simple TextFields are shown as textareas and not as a simple textfield.
Can someone tell me how to change that?
The module attempts to automatically work out what field would be best for your variable. It will create a DropdownField for an Enum variable, TextareaField for a Text varialbe and so on.
If you don't want to manually set the field types for each variable that you want to be editable inline you need to change your variables a little.
TextareaField is the field set for Text variables.
TextField is the field set for Varchar variables.
For any variables that you want to be a TextField instead of a TextareaField change it's type from Text to Varchar(255) (or however large a character limit you need).
Otherwise you can manually set the fields using
setDisplayFields as described in the documentation.
$grid->getConfig()->getComponentByType('GridFieldEditableColumns')->setDisplayFields(array(
'FirstField' => function($record, $column, $grid) {
return new TextField($column);
},
'SecondField' => function($record, $column, $grid) {
return new TextField($column);
},
// ... etc for each field you want to be editable
));