[Resolved] Using dots on image slider in toolset, rather than arrow navigation

[Author]

Posts

[sharlaC]

Tell us what you are trying to do?
Hi, it's me again.... So I have one more issue that I assistance with. My client wants his image sliders to have DOTS to navigate through, rather than the arrows. Here is the look he is wanting:
hidden link

This is what we currently have: hidden link

Is this possible to do?

Is there any documentation that you are following?
NO
Is there a similar example that we can see?
hidden link
What is the link to your site?

hidden link

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Hello. Thank you for contacting the Toolset support.

I can see you are using the image slider to display those multiple images as slider and with image slider block there is no option available to change the pagination to dot pagination.

You can raise a new feature request and it will be reviewed by our product manager:
=> https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

[sharlaC]

OK since that isn't an option, can we move the arrows down and remove the border/button that is on the background?
I've moved the arrows down with css but cannot seem to remove the background border. See attachment....

[sharlaC]

Waqar,
I have an additional issue that I would like to get your help with.

I'm using this code to change the toolset file field so that it shows the file name on the front end, rather than the URL on the front end:

//This allows us to grab the ID of an attachement by it's URL)
function pippin_get_image_id($image_url) {
global $wpdb;
$attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url ));
return $attachment[0];
}

add_shortcode( 'my_file_name', 'my_file_name_func'); // Actually activate the shortcode
function my_file_name_func($atts) {
global $post; // So we can get the post meta later on

//define ShortCode attr prefix
$types = "wpcf-{$atts['types_field']}";

if ($types) { // if the types_field argument was provided

$urls = get_post_meta($post->ID,$types); // let's get the (potentially multiple) values

$content = ''; // Setting up a variable to hold the links so we can return it later
$testurl = ''; //Creating URL Variable to Test Later

foreach ($urls as $fileurl) { // Let's iterate for each of the multiple values
$arr = explode('/',$fileurl); // Split it up so that we can just grab the end part, the filename
$id = pippin_get_image_id($fileurl);
$title = get_the_title($id);
$content .= '<a href="'.$fileurl.'" title="'.$title.'" target="_blank">'.$title.'</a><br/>'; // Create whatever HTML and store it in the $content variable
$test_url = $fileurl;
}
}

if (!empty($test_url)) {

return $content; // Return the content as the shortcode value

} else {
return 'Sorry, we do not have this document available.'; //Polite message if no file found.
}

}

It works great, BUT it's not adding the ENTIRE file name. For example, on this page the file name is showing, but it's leaving the word "BROCHURE" off:

hidden link

But, if you look at the file itself, it's there: hidden link

How can I tweak this code in my functions.php file to show the entire file name?

Thanks

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

This is minesh here handling the ticket. Do you want to to pass this ticket to Waqar?

[sharlaC]

Minesh,
No, I'd be happy for you to help me. Waqar had originally worked on the ticket, so I thought he still was. I'd love for you to help me!
Thanks,
Deanna

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

As per our support policy, we entertain only one question per ticket. This will help other users searching on the forum as well as help us to write correct problem resolution summery for the original issue. you are welcome to open a new ticket with every new question you may have.

I'll try to help you with the original issue about the slider navigation arrow.

Can you please try to add the following CSS code to your content template:

.tb-image-slider .glide__arrow--left {
    left: 5px;
    background-color: transparent;
}

.tb-image-slider .glide__arrow--right {
    right: 5px;
  background-color: transparent;
}

This will help you to remove the background color for the navigation arrows.

[sharlaC]

Thank you for that. Do you have a suggestion for moving the arrows too? I've tried some css but it's not working property on smaller versions of the slider. Thanks!

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

For that you will have to take help from CSS pro as you want to adjust the navigation buttons for both desktop and for mobile. For mobile you will have to write custom media query CSS.

If you need custom programming help for any of your requirement you can contact our certified partners:
=> https://toolset.com/contractors/

[sharlaC]

My issue is resolved now. Thank you!