Hello, we are managing a newspaper website. We tried different sliders revslider, smartslider etc.. all of them making webpage loading and scores lower. We used tagdiv slider which is working veryfast and can get 95/100 scores with it. But there is a problem we need more options on that slider.
There should be atleast an option to link from IMAGE. People try to click image and nothing happens. How we can add this functionality we are ready to edit js php etc what we should do?
Also in future you can add page nav menu outer of the slider, hover over pagination and slide changes to that page etc.
Thank you If you can help
https://www.edirnetv.com/ Home Page slider. I forget to mention what page I’m talking about.
Hello!
A workaround there is to set up a link into the caption of every image in the Media Library: https://prnt.sc/vGXE42vctokc -> https://pastebin.com/batFZfWk
We will take in consideration your query for the future.
Thank you for understanding!
I’m not sure you fully understand what I mean. https://imgur.com/a/pCi5vlh
Also. I can’t add link to images by hand because they are dynamic changing 10 times a day atleast and I have like 300K images in folders.. Also there is no way for me to match post links with images.
Hi,
You can slide the posts from image and only if you click on the post title you’ll be link to the post -> https://i.imgur.com/KEvj27Z.jpg -> https://i.imgur.com/s4kq5z2.jpg
What I can do is to provide a css that will increase the title link area
.td_block_slide .td-slide-meta a{
padding-top: 200px;
}
You can change the px value, and you can set the code in the theme panel > custom code> custom css.
I hope this will help you!
Hello —
I tried this CSS code.
.td_block_slide .td-slide-meta a{
padding-top: 200px;
}
It resulted in a gray or black-colored square over the image, coming up from the Category. So that is not good.
Any other CSS perhaps?
I tried putting text in the caption.
That does not work at all. — the link is not connected to the image.
Is there another way of putting in the ??
Thank you — my site is Arcata1.com
Catlin, with that CSS Code —
If area where the link is valid goes up from the text. If the test is the width of the image, then the link will also be with width of the image. But if the text is only a few words and is short, then the link extends only to the area above the text. So it does not work well — someone would have to click right above the text.
Any solution on this ? I designed my home page around the Slide element. Is there a different Slide you can suggest?
Or different CSS ? Or different place to put the ?
Thank you.
Also: Is there a way to put a Pause button on the slider ?
Perhaps a “=” right under the right-side “>” symbol.
I looked at the website for furkan-g — from the question above.
https://www.edirnetv.com/ Home Page slider.
On his website, the image DOES link correctly to the page.
On my website, if I put the in the caption, it does not link.
What has furkan-g done to make this work?
Thank you.
I added custom css to newspapaer->theme panel -> custom css
.td-theme-slider .td-slide-nav { opacity: 1!important;z-index: 1!important;}
.td_block_slide .td-slide-meta a{
padding-top: 100%;
}
You need to remove category etc from slide also only title should be there to this work.
Thank you.
I looked at your website — so I could see that it could be done.
More clever than the original “200px” approach.
But still doesn’t work completely.
If area where the link is valid is the width of the text.
If the text is the width of the image, then the link will also be with width of the image. But if the text is only a few words and is short, then the link extends only to the area above the text. So it does not work well — someone would have to click right in the area above the text.
Any thoughts? Your solution is better. Is there a CSS that would cover the entire image?
Thanks you.
Also: How did you know to respond so quickly? Do you get a message when something is posted to you query? I would like that — where is that set up? Thank you.
I don’t know how but if somebody write something to your post it sends you an email.
BTW you can try adding padding-left:100%; padding-right:100%;
but I’m not sure about how the slider next prev buttons will react to that. we have long titles so it’s not a big deal generally..
Thank you. I have article titles on top of the image, and it turned out that padding-right:100% affected the display of the titles — making a short line out it and doing line breaks in the middle of a word.
So that won’t work.
I am using your first CSS suggestion with padding-top: 100%;
so I’ll see what the user response is.
Hi fredredwoods, I see that the offurkan-g suggestions were better and now the slider is clickable even above the title.
Regards,
Hi, Calin —
Yes, it is working…sort of. It’s not ideal.
If there is short title of just a few words, the clickable area is only the area vertically from those words. That is, if the words are on under the left half of the image, then the user would have to click on the left half of the image to get to the link. If the user clicks on the right portion of the image, nothing would happen.
If you have a suggestion, let me know. Unlike furkan-g who has 300,000 images to deal with, I have only 30 or 40, so if I have to put an “” in each caption then I can do that — if you can figure out what would work. Let me know what you think would work. Thank you.
I tried putting an “” in the caption line, but that didn’t work.
Edit of above:
If you have a suggestion, let me know. Unlike furkan-g who has 300,000 images to deal with, I have only 30 or 40, so if I have to put the html (a href) in each caption then I can do that — if you can figure out what would work. Let me know what you think would work. Thank you.
I tried putting an the html (a href) in the caption line, but that didn’t work — the link there did not work at all.
Thank you.
Hello —
This is not resolved.
If the user clicks on the image in an area above the title, then the link will work.
If it is a short title and the user clicks on the right side of the image (that is, not in the area above the title) then the link will not work.
Is there a solution to this?
It seems that the slider should be designed to link anywhere on the image.
Thank you.
Hi,
The slide was design to link only if you click on the post title and on the rest of the image you have the possibility to drag the image to left and right -> https://i.imgur.com/7fTnW9n.png
What you can do is to set on the slide post title some left and right paddings or to display flex or block,
.td_block_slide .td-slide-meta .td-module-title a{
display: block;
}
Thank you!
Hello —
You wrote: “The slide was design to link only if you click on the post title.”
I would consider this a necessary and required improvement to the Slider, if your programmers can fix this.
As it is now, I have no idea if my viewers are being frustrated and do not know how to use the Slider — that is, if they click on the right side of the photo nothing happens, but if they click on the left side of the photo then they are taken to that article.
With every other image in a Flexblock on the website — the user can click anywhere on the image. But not on this one.
Please consider adding this improvement to the Slider. Otherwise it is inconsistent with every other photo link.
This is the “work-around” on my home page.
It is not good — for the viewer, the Slider operates differently than every other Flexblock on the page. And differently from every website photo that everyone is used to clicking on.
https://imgur.com/a/YWCmy4P
Please fix this ! Thank you.
Hi,
I notified developers about your suggestion, but for the moment I have not received any feedback.
As a suggestion, if you want you can try another slider -> https://i.imgur.com/yfqliiu.png, our theme provides 2 sliders from the theme and the revolution slider plugin.
Thank you!
Big slide is not understandable(people dont understand that it’s slide) and fails on different device sizes. rev slider is great but adds lots of js css and drops page speed like 50 points..
so extended shortcodes slide is perfect just need some improvement..
Hi,
Ok, I understand, the best choice remains the slider element.
I hope that the developers will implement the suggestions that I sent for this element.
Thank you!
Dear all,
I am following the suggestions here to achieve the purpose that was discussed here. However, when applying the suggestion from our fellow user furkan-g, when we display categories, the background of the categories is extended to the top. Would it be possible to adjust this via CSS so as not to break the category style when applying the aforementioned suggestion?
