Joomla Templates Club 406,261 posts

[jkriordan Friend jkriordanJoin date: June 2012Posts: 59Downloads:0Uploads:8 Thanks: 8 Thanked: 1 times in 1 posts]

#179737

I want Youtube, Instagram, Vimeo to appear as the do in the demo–a clean grid of images with roll-over descriptions.

I know how Blog Layout and Article Options work.

I notice there’s a Page Class “video” which appears under Page Display Options. But when I enter that class into my wall, it doesn’t change anything. I’m working from the template, not the quickstart. Do I need to add some CSS?

I should also mention that I haven’t installed K2 yet.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#463578

Hi again,

You could try with adding “vimeo” instead of video in Page Disply Options, then open file: templates/ja_wall/css/template.css, find class we defined for video and you and make the same for vimeo:

.item.vimeo .item-image span {
background: url(../images/icon-play.png) no-repeat left top;
content: "";
display: block;
width: 48px;
height: 48px;
margin: -24px 0 0 -24px;
position: absolute;
left: 50%;
top: 50%;
}

Clean all cache and refresh your site.

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#463600

The videos are pulled into the site with the JASocial Feed plugin with the following settings:

Then In the Demo – the videos are brought to the website as a Category Blog with the following settings:

And in the “PAGE DISPLAY OPTIONS” make the PAGE CLASS: video

Have fun!

---

Attachments:

1. 
2. 

1 user says Thank You to John Wesley Brett for this useful post

1. jkriordan

[jkriordan Friend jkriordanJoin date: June 2012Posts: 59Downloads:0Uploads:8 Thanks: 8 Thanked: 1 times in 1 posts]

#463635

I found the Video style in my CSS, including your code example. It should work when I enter class ‘video’ in Page Display Options, just as it does in the demo. The change you’re recommending shouldn’t be necessary. I think the problem is somewhere else. I tried clearing my cache, no change.

[jkriordan Friend jkriordanJoin date: June 2012Posts: 59Downloads:0Uploads:8 Thanks: 8 Thanked: 1 times in 1 posts]

#463636

I’m using exactly the same settings, with trivial differences (eq. different sort order, show suggested videos: No). PAGE CLASS: video is not working.

I’m not having fun, but thanks anyway.

[jkriordan Friend jkriordanJoin date: June 2012Posts: 59Downloads:0Uploads:8 Thanks: 8 Thanked: 1 times in 1 posts]

#463767

In addition to the steps you outline, I needed to go under JA Wall parameters and set Default Block View to “Image View”. This lines up videos in a neat grid, with rollover descriptions.

This leaves only the little “Play” icon which appears in the Demo for Videos, but which doesn’t appear on my site.

The proper code is in my CSS. How do I invoke it to my screen? Using class “video” isn’t working.

.item.video .item-image span {
background: url(../images/icon-play.png) no-repeat left top;
content: “”;
display: block;
width: 48px;
height: 48px;
margin: -24px 0 0 -24px;
position: absolute;
left: 50%;
top: 50%;
}

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#463769

From where are you calling the “video” class?

[jkriordan Friend jkriordanJoin date: June 2012Posts: 59Downloads:0Uploads:8 Thanks: 8 Thanked: 1 times in 1 posts]

#463794

From Menu Manager : Edit Menu Item, Page Display Options, Page Class = video

Exactly as in the Demo.

The path to template.css is: mydomain/templates/ja_wall/css/template.css

template.css contains the “video” style. I haven’t modified it in any way.

icon-play.png is in the /images folder, where it belongs.

I’m baffled.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#463813

Hi there,

If you wanna make us of class video which’s already defined in template.css file, you should go to backend of each item in Vimeo category (or other categories: instagram, youtube, …) and add video class in Extended classes parameter. http://easycaptures.com/fs/uploaded/622/6893928038.png
However, I think this way will take time, another way is that you can create another CSS rules for other categories like:

.item.vimeo .item-image span {
background: url(../images/icon-play.png) no-repeat left top;
content: "";
display: block;
width: 48px;
height: 48px;
margin: -24px 0 0 -24px;
position: absolute;
left: 50%;
top: 50%;
}

As I suggested in my first reply and apply to other categories if you want.

Hope this make senses.

[jkriordan Friend jkriordanJoin date: June 2012Posts: 59Downloads:0Uploads:8 Thanks: 8 Thanked: 1 times in 1 posts]

#463907

Saquaros, I appreciate your help, but–yes, doing it article by article is too much work. For the record, it does work, the Play icon appears when I enter the class in the article edit. So I’m certain that the code and path is OK.

But in the demo, the class=video is invoked ONLY in the Menu Page Display Options, and NOT in the Edit Article Metadata Options. The Play icon displays fine in the demo. So, it should work for me, but doesn’t. I think the problem is somewhere else, perhaps in Global Options.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#463958

Hi again,

It’s because the style will be based on the alias of category and applied for only that category, as in demosite, video category has aliasas video so that it will displays icon-play fine, you can try with change alias of yours category to video to see the difference. Otherwise, if you wanna display icon-play with another alias, add addition CSS rules like my above suggestion.
Hope you got the idea 🙂

[Author]

Posts