Hello awesome people,
Today I tried “Smart list” for the first time, and let me tell you frankly- IT’S AWESOME !! 🙂 🙂
Though I noticed few issues, and I want to make it correct.
In this example- I have used “Smart List Style 1” and “Smart List Style 7” , I have also selected the recommended “Post template style-5” for this- but
1. I noticed that all the .JPEG images are not in the centre. It’s left aligned even when I had already centered it during composing the post. While surprisingly, all GIFS are already centered aligned . So, my issue is to centrally align all kinds of images in the lists. ( Image: https://i.imgur.com/iuck0wG.jpg )
2. I have also used the “image captioning” to hyperlink the image source link. But it’s also not visible in case of .JPEG images while under GIFS, these image caption links are visible and working perfectly. How can I fix it for .JPEG too. – Also incase of .JPEG, the whole image gets hyperlinked to the image source link. I mean if somebody clicks JPEG images, it automatically opens a new image source link in new window. While in case of .GIFs , there is no such strange behavior. ( Image: https://i.imgur.com/XQsy20N.jpg)
I don’t know why this smart list is behaving strangely with .JPEG files while working very well for externally sourced GIF Images.
3. Can I include YouTube or Facebook Video at the place of images to create smart lists?
4. Can I write 1. Title and 2. Images only to create smart lists? Means can I skip “contents/description” part to create smart lists?
Here are two images to understand the point 1. and 2. well.
Please reply. Thank you.
Hi,
1) Different smart list types have a different implementation of the images. On smartlist 1 they will be left aligned, but on a smartlist 7 they will be centered. here are examples:
smartlist 1: http://screencast.com/t/8dXS2K8We8Dg
smartlist 7: http://screencast.com/t/g814ViUx
2) The smartlists are in a way predefined post stiles that have very different implementation from one another. There are no settings for them unfortunately so any change that needs to be made has to be made from the code. I;m not sure exactly why for gif’s the style does not apply. It’s the gif’s that display differently. The jpg’s display as the developer team intended them to. Try to add giphs from the media library not external sourcess as the implementation is different if you embed a gif
3) You can add videos inside a smartlist as there are no restrictions
4) You can add anything you want inside a smartlist as it only needs to be after a heading tag.The default is h3 Any content you add between to h3 titles will be shown in the smartlist whether it;s an image, text, video, gif, or all at once. It’s your choice what content you want to have.
Thank you!
I get it .. Thank you.
But I still couldn’t understand why “Image source captioning” aren’t visible on JPEG images As you said, smart lists only identify the h3,h4 etc. and it doesn’t almost touch anything under the content area, then why does it interfere with “Image source caption link” ? I can cope up with image alignment issues but image source linking is important. Please relook at the issue I shared under point-2 above. Will you want to check it on my website for the error?
Please let me know so that I can provide you login credentials.
Thank you.
HI
We know about this issue and will be fixed in next theme’s update. Meanwhile you can use this fix as a temporary solution: edit td_smart_list.php file an replacethe indicated line of code with this one: – http://screencast.com/t/4xDhK3kP – http://pastebin.com/cNwLuzgM
It should work properly.
Hope this helps!
Thanks!
Hi Andrel,
It worked partially. I mean now I am able to see the image caption link under the image but it doesn’t support any customisation that we had done with it. I mean , I have changed the font, styling and size etc for the caption using theme optional as well as some CSS codes but these are not valid here with JPEG. On contrast, everything is working fully fine with .GIFs that are added using external link.
To understand better , Have a look at these two images
1. the JPEG image with image caption that appears without any customizations : https://i.imgur.com/MFKzuCB.jpg
2. the GIFs image with image caption that appears with all customizations: https://i.imgur.com/YC3FXFY.jpg
Another big issue with this image captioned JPEG image is the whole image is clickable. I mean if someone clicks the image , it will open the image source link in a new tab. While the default property should be that only by clicking the Image source link text ( here the word “Source” ) should be clickable , not the whole image. I hope that you are understanding what I am saying.
Kindly see if you can provide some temporary fix for these issues and be sure to cover all these things in the next update.
One more thing- For “Smart List Style-1 ” as per the previous comment by Bogdan, the images are by default set to left aligned. I think it must be “CENTER ALIGNED” to look better on the screen based on “STYLING” of this listing. You can notice that “smart list style-1” and “smart list style-7” is appearance wise same but the “style-1” is ajax based while “style-7” is normal. But “style-7” has images aligned in the centre by default.
So, please make the alignment of style-1 images in the center too in the next update and do provide me any temporary solution for it.
I really need this because for users point of view, Style-1 is very fast and responsive and I really want to use quite often for my smart list posts, but due to this ugly left aligned images, it looks bad. I hope you must be agreeing with me on this.
Thank you for understanding
HI
I’ve checked the links in image caption on smart-lists and they work fine on my end, the link from caption does not go over the image. Please make sure that html for link and for smar-list is properly generated, clear the cache and test again.
You can choose image’s alignment from post editor for any image: http://screencast.com/t/qH462fTtn
Thanks!
Hi Andrel,
As I have said above too that after adding the codes suggested by you , now I am able to get the image caption, but the issue is that these images caption do not follow the customizations that I have done with it. Here is the default image caption that I am getting- https://i.imgur.com/MFKzuCB.jpg and this is how it should appear: https://i.imgur.com/YC3FXFY.jpg
Though after you made the above comment, I again rechecked everything and did as you said but the issue still remains same.
For the image alignement thing- Yes , I know how to align image to center, but these set alignemnts do not work under smart lists. As Bogdan said above, the STYLE-1 is by default set to left alignment and STYLE-7 is set to center alignemnt.
I have requested you to tell me the temporary code fix to make the image of “style-1” centrally aligned and I also wish you to make it the default property because if images are not full length, it looks really when “left aligned” in case of style-1.
And please try to understand that I really want to make this feature work properly because I like smart lists. Dob’t just reply that – you don’t care if its working for me or not. I am very sure that by default , these are issues related with these smart lists.
I have also checked it with all plugins deactivated, just to make you believe that it has nothing to do with my wordpress installations.
In short, what I want you to check and rectify:
1. Centralising image for style-1 particularly.
2. Enable customisations of the captioned image.
At least make me able to center images if you can’t change the captioned image behavior. If for any kind of testing on my site, you need login credentials. Let me know, Thank you.
Kindly look at one of the sample image from one of the smart list on my site : https://tomatoheart.com/rishika01/23-girly-problems-men-never-understand/16/ and see how weird it looks because of being left aligned : https://i.imgur.com/Hc8df19.png
Please do something for it. This was set to “Style-1” but today I also checked “Style-2” and “Style: 7” and found the similar “left aligned image” no matter how much I tried to set the image in “centre”.
Also look at the link behavior of these images. After clicking these images, it opens the new link set under “Image caption” even when I had set the image url to “none”.
Have a look this issue too.
Thank you.
On further investigation, I realized that whenever I use any images ( JPEG or GIFS or anything ) from external sources. Everything works perfectly well.
I mean in this case, 1. Images are centered aligned if set to, Image caption customizations works well and the whole image is also not clickable.
SO, the issues arise only when we upload any images ( gifs, jpegs) on our own media section. I am sure this is because of some kinds of setting for under td-smart-lists coding structure.
Please do something. Thank you.
Hi,
Sorry for the late response, we do not work on weekends.
There are 2 ways to go about the images. Either switch to msrtlist 7 or use this custom css:
.td-slide-smart-list-1{
text-align: center;
}
Which will center the images on smartylist 1.
Add the code in the theme panel->custom css box
Thank you!
Thank you Bogdan. You should be our prime mentor here 🙂 🙂
It worked as it should… But I am really disappointed that Andrei didn’t try to check and solve my issue 🙁
Anyways..few things are still unsolved –
As I have earlier too that I have done some customisation with ( image caption text/link ) to make it look better and it’s working really well with default post without smart lists and even with images uploaded externally on smart lists.
The code is:
.wp-caption-text a {
background: rgba(0, 0, 0, 0.25) none repeat scroll 0 0;
display: inline-block;
padding: 0 3%;
}
.wp-caption-text, .wp-caption-text a {
color: #fff;
font-size: 10px;
margin-top: -28px;
text-align: left;
line-height: 20px;
margin-left: 3px;
}
Here is how it looks in smart-list-1:
Screenshot: https://i.imgur.com/hrL5MJr.jpg
But with internally uploaded there are two issues still left.
1. It doesn’t honor the above written custom CSS
2. The whole image is clickable and opens in the same after when clicked. the link is the one- we have written under “caption” to credit the source of the image.
Here is the screenshot : https://i.imgur.com/FfBwmOy.jpg
The example post is: https://tomatoheart.com/rishika01/23-girly-problems-men-never-understand/19/
You must be understanding that sending your visitors to the external site on the same page is never a good idea. So, please look at these two issues whenever you have time.
And please try to understand that these are universal issues with all the TagDiv theme users who want to use Smartlist the way I am using. So, please take this issue seriously for the benefit of the whole community.
Thank you very much 🙂
Hi,
The code that you added will only affect the externally added images, but not the ones added by uploading them. This is the case because their source code is different.
For the external ones, the caption has this code: http://screencast.com/t/YxyHnqjgNmiK while the ones uploaded in the media library get the caption like so: http://screencast.com/t/ddUiBkiuA7YU
They have a different html code and different classes. So there cannot be one css to affect them both. You need to create the code for the uploaded ones as well. Try something like:
.td-sml-caption div{
position:relative;
top:-25px!important;
left:10px
}
And if you add an a tag in the description then you should target it like so:
.td-sml-caption div a{} or simply .td-sml-caption a{}
I hope this helps.
Thank you!
Hi, Thank you for trying to solve this issue.
First thing, excpet smart lists, the code I have written above works for all kind of images ( Internal and external both) , Issue arises with smart lists where it works for “external images “only.
Now about your code, I have implemented the code and noticed that it overrides my old codes for internal images and starts customising the look of internal links too.. but with two issues
First have a look at one example post: https://tomatoheart.com/bhumika/10-awesome-perks-hostel-life/
1. These image caption weirdly make the whole image clickable with the link written under image caption. I have set the media url of these images to “NONE” so by default images should not be clickable. Only when somebody clicks on ‘image caption link “, the link should open .
But right now, the whole image becomes clickable. Probably there is an issue with image captioning by default here. Please try to give it a look.
2. This customisation makes “Image caption” to appear in the “bottom center” of the image, while I want it to appear at the “bottom left”. Also the caption text backgroup is fully transparent. While I want it to be background: rgba(0, 0, 0, 0.25)
Please have a look at this issue. The mail issue is – making the whole image cliackable to a external site, which is very bad for the own site SEO, so, it’s very important to solve this.
Thank you.
Hi,
You can prevent the css code from applying to any other parts of the site by adding the smart list class so the code will only affect the smart list of your choice. It is recommended to use it that way so the other parts do not get affected. Here is an example of how the code should look:
.td_smart_list_1 .td-sml-caption div{
position:relative;
top:-25px!important;
left:10px
}
You should add the .td_smart_list_1 class at the beginning of any code you want to use only on the smart list or another smartlist type you want to use. You can simply change the smarltist number and add the code so it will only affect the smartlist.
Unfortunately I cannot find a viable solution for the caption to be positioned on the left of the image. You can move the image but the caption stays in place. If you do not align it center, it will not stay on the image.
The only simple viable solution is to have it align center.
Ad for the images being clickable, it is the same on my end. This is not a default implementation of the theme as smartlists were designed to ignore caption links. Sometimes forcing things to display causes other issues. I will add this to our list for future updates and pass this information on to our development team so we can maybe add support for link captions in future versions of the theme. Sorry for the inconvenience.
You could try one more css trick though to remove the link from the images and only have the caption clickable:
.td_smart_list_2 img{
pointer-events:none;
}
As for the transparent grey backgorund you can use this code
.td_smart_list_2 .td-sml-caption div a{
background-color:rgba(0, 0, 0, 0.4)!important;
}
Thank you!
It worked and solved everything except to align image caption on the left. I also tried padding for trasparent gray box by using codes from old image caption code I have written above and it does the padding work but somehow this box comes below the image while I wanted to keep it on the image as it right now.
Anyways, things can work even with what we have till now her. Thank you very much.
