Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

ZenKit Filter template layout places Titles over prevous item images

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

gmf.cloudaccess.net/services/zenkit-testing-filter

This page uses the Filter layout and it is causing some of the items to overlay on top of each other. You can see this if you scroll down.
  • scarney's Avatar
  • scarney
  • LIfetime Developer - Big Bamboo
  • 896 posts
  • 11 Thanks
  • Karma: 1
The administrator has disabled public write access.
Try disabling any lazy load that is running in the template and see if that helps

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Good call Paul,

Turning off lazyload did solve the problem. Of course I would like to turn back on lazyload if possible. Is this a clue that you were hoping for in order to maybe get this layout to work with lazyload?

Sean
  • scarney's Avatar
  • scarney
  • LIfetime Developer - Big Bamboo
  • 896 posts
  • 11 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi Sean,

Some layouts lazyload doesn't work well with I'm afraid

I'll check later today but I think you will need to keep it disabled or exclude divs in the lazyload selector option

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
OK. I will look forward to hearing from you on this one. :-)
  • scarney's Avatar
  • scarney
  • LIfetime Developer - Big Bamboo
  • 896 posts
  • 11 Thanks
  • Karma: 1
The administrator has disabled public write access.
I think excluding the div so lazyload doesn't apply will probably be the answer but will get back to you once I speak to Rob or Anthony

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thank you very much! I would love to be able to turn lazyload back on. I guess in a worst case scenario we would not be able to use the Tiles layouts but... those are some nice layouts and we would love to use them. :-)

Anyhow, I will look forward to hearing whether this can be fixed or not. :-)

Sean
  • scarney's Avatar
  • scarney
  • LIfetime Developer - Big Bamboo
  • 896 posts
  • 11 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi Sean,

You would need to add this particular layout imgs to the "Lazyload Not Selector"

That should then work for you - its not a bug just a limitation of using a dynamic layout like this

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thank you so much Paul for the explanation.

Can you tell me what it would look like. Currently in the Lazyload Not Selector there is only one string which is "nolazy". Should I be adding something to this field to add the name of the layout? Or should I maybe be adding "nolazy" somewhere?

Thanks, Sean
Attachments:
  • scarney's Avatar
  • scarney
  • LIfetime Developer - Big Bamboo
  • 896 posts
  • 11 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi Sean,

I just tested it locally and this div works for me

.itemListView.filter img

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
So be clear add .itemListView.filter img

to the "Lazyload Not Selector" input over the top of any existing content

Cheers
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
Last Edit: 5 years 4 months ago by manh.
The administrator has disabled public write access.
Paul,

Thank you so much for checking into this and trying to help me. The only place where I have been able to find a field for not selector is in the Effects section of the template. Currently it says "nolazy" in that field. I am thinking you wanted me to change that to say instead
".itemListView.filter img"

That did seem to work so I am happy about that. Should I also have nolazy in there as well? Can we put more than one option in that field separated by delimiters?

What does it mean to "add .itemListView.filter img
to the "Lazyload Not Selector" input over the top of any existing content"

I have been looking in menus and K2 items and not finding any place with a label for Lazyload Not Selector so I am obviously still a bit in the dark on this. Sorry if I am asking a dumb question!

Sean
  • scarney's Avatar
  • scarney
  • LIfetime Developer - Big Bamboo
  • 896 posts
  • 11 Thanks
  • Karma: 1
The administrator has disabled public write access.
"The only place where I have been able to find a field for not selector is in the Effects section of the template. Currently it says "nolazy" in that field. I am thinking you wanted me to change that to say instead"

Yes this is the right place overwrite nolazy with the div I gave you

In the Lazyload Not Selector make sures it just this div in the input box (you don't want nolazy in there - that's just filler)

I think you can separate different divs using a comma

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
I believe you got me all fixed and happy on this one. thanks
  • scarney's Avatar
  • scarney
  • LIfetime Developer - Big Bamboo
  • 896 posts
  • 11 Thanks
  • Karma: 1
The administrator has disabled public write access.
Thanks for the update :)

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Paul, the code you gave me to put into the Lazyload Not Selector field worked for the Zenkit filter layouts. Unfortunately I finally settled on only using the Tiles layouts. I am wondering if you can give me a slight tweak that would work. I have tried a couple things but did not have luck with it.

Here is what you gave me that worked for the filter layout:

.itemListView.filter img

Now I am using only the tiles layouts. I am using three variations: pinterest, polaroid and zenshadow.

I would love a bit of code that would work for all of them. I tried .itemListView.tiles img and .itemListView.tile img (just guessing)

Here are some sample pages:

Tiles: pinterest:
www.goodmorningflooring.ca/surfaces/backsplashes

Tiles: polaroid:
www.goodmorningflooring.ca/surfaces/backsplashes/ceramic-porcelain-tile-backsplashes

Tiles: zenshadow:
www.goodmorningflooring.ca/substances/ceramic-porcelain

Interestingly when I load the pages there are problems with the overlapping content. But, then I hold down my shift key and reload the pages and at that point they load nicely.

Thanks for any magic I can put into the Lazyload Not Selector field.

Sean
  • scarney's Avatar
  • scarney
  • LIfetime Developer - Big Bamboo
  • 896 posts
  • 11 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi Sean,

Try

#zenkit-masonry-items .zenkit-image img

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Amazing how one little line of code can improve the world! :-)
Thanks. It worked great.
  • scarney's Avatar
  • scarney
  • LIfetime Developer - Big Bamboo
  • 896 posts
  • 11 Thanks
  • Karma: 1
The administrator has disabled public write access.
Cool so its all sorted with the images?

I can't remember what I said about the list elements in the links - did you I suggest adding this to a ticket in the end?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers