solved Trouble in substituting Vimeo image

Strumelia
Strumelia
@strumelia
8 years ago
3,605 posts
One of my members added a Vimeo video today and the image used as a thumbnail is way too tall. The image seems to be taken from his Vimeo video images, here:
https://i.vimeocdn.com/video/625084120_1280x2276.jpg?r=pad
The result is my screenshot- where his too-tall Vimeo thumbnail is messing up my video page grid, also on the site's main page video content area. I hate that!

So I downloaded that image and edited it to be a square and smaller jpg. Then I went to EDIT his video and put in my substituted jpg where it says "You can upload an image for this Vimeo video and it will be used in place of the image from Vimeo". I did this 3 times and i keep clearing cache, also my browser cache, did integ check...but his Vimeo continues to use that tall thumbnail instead in the (combined) video index page and on the main page. However, my new edited image DOES now show right under his clip in the thumbnail on his actual vimeo clip page, here: http://fotmd.com/steve-battarbee/vimeo/185/reubenstrain
...But that's not where I really need it to be changed. I need to change it like on this page where it's messing up the whole display grid:
http://fotmd.com/video

Am I doing something wrong?
vimeo-image.jpg
vimeo-image.jpg  •  474KB




--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

updated by @strumelia: 06/26/17 12:52:05PM
michael
@michael
8 years ago
7,805 posts
Steps, in the location where that image comes out the code looks like this:
<img src="https://i.vimeocdn.com/video/625084120_1280x2276.jpg?r=pad" class="iloutline img_scale">
That image is being put there by a template in your skin, a row template. It looks very much like its being passed in to a {jrCore_list} call to output the videos, so the first step is to locate that.


The first guess at where it would be would be the skins, any template named videos.tpl could possibly control the url site.com/videos so check your skin for that template.

If you find its not there, then the next thing to think about is "Is a module controlling the site.com/videos url perhaps...." so check through your ACP to see if any module is responsible for the output on /videos. you will find that module_url on the INFO tab of each module in the ACP.

In your case that module exists at this location:
http://yourstie.com/video/admin/info

The regular thing that will show at the default location for a module is the [I](in the file system via SFTP)[/I]/modules/THAT MODULE/templates/index.tpl

BUT.... that template could be over-ridden by the skins. so if you have a skin template called (module_name)_index.tpl

In your case there isn't that override.

In your case its the jrSeamless module thats providing that list of videos:
{jrSeamless_list modules=$mods order_by="_created numerical_desc" pagebreak=10 page=$_post.p pager=true}

That brings us around to the jrVimeo module. its default way to show items in a list is the item_list.tpl file.

Usually that file would be [I](in the file system via SFTP)[/I]/modules/jrVimeo/templates/item_index.tpl but in this case we DO have a skin over-ride of that template so the file you want to edit is:
/skins/YOUR SKIN/jrVimeo_item_index.tpl (or via the acp at)
ACP -> SKINS -> YOUR SKIN -> TEMPLATES -> jrVimeo_item_index.tpl

We want to add another CSS class to that image so we can target it with some new CSS rules.

So in that file you will see
.....
    {foreach from=$_items item="item"}
    <div class="item">

        <div class="container">
            <div class="row">
                <div class="col2">
                    <div class="block_image">
                        <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.vimeo_title_url}"><img src="{$item.vimeo_artwork_url}" class="iloutline img_scale"></a>
                    </div>
                </div>
.....

We want to add another class to class="iloutline img_scale", lets make it class="iloutline img_scale video_thumbnail"

We could call it anything, but something currently not being used is probably best.

Then into a css file in your skin add this css
.video_thumbnail {
    height: 85px;
}

Reset the caches and you should be fixed.
Strumelia
Strumelia
@strumelia
8 years ago
3,605 posts
So to do:
We want to add another class to class="iloutline img_scale", lets make it class="iloutline img_scale video_thumbnail"
...I would then wind up making that code line look like this?:
{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.vimeo_title_url}"><img src="{$item.vimeo_artwork_url}" class="iloutline img_scale video_thumbnail"></a>

AND- when you say: "Then into a css file in your skin add this css"...not sure which .css file in my skin that would be- perhaps in my skin's: image.css file, where I see some similar entries are residing?


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
douglas
@douglas
8 years ago
2,806 posts
Strumelia:
So to do:
We want to add another class to class="iloutline img_scale", lets make it class="iloutline img_scale video_thumbnail"
...I would then wind up making that code line look like this?:
{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.vimeo_title_url}"><img src="{$item.vimeo_artwork_url}" class="iloutline img_scale video_thumbnail"></a>
Yes, that is correct!

Strumelia:
AND- when you say: "Then into a css file in your skin add this css"...not sure which .css file in my skin that would be- perhaps in my skin's: image.css file, where I see some similar entries are residing?

Any .css file you want to use will do, the image.css file is a good choice though.

Hope this helps!


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
michael
@michael
8 years ago
7,805 posts
You are a fast learner. :)
Strumelia
Strumelia
@strumelia
8 years ago
3,605 posts
...just stumbling my way around. ;)

A couple more questions before I fiddle with this-
For that added code in the .css file, where you suggested i put the ".video_thumbnail" at height: 85px;....
-Does the term "video" there apply then to all the site videos including youtube, Vimeo, and uploaded?
And if so, SHOULD it apply to all three? So far I'm only seeing a prob with an occasional Vimeo thumbnail. Phone-recorded vids seem to be creating their thumbnails ok too.

And... why 85 px? I mean, for example on my combined video index page most of the videos thumbnails are approx 88 px high, with a few of 66px height. And on the profile pages combined video page, the thumbnails for videos are about 96 px.

-in general I like how the thumbnails are displaying everywhere and dont' really want to make them all uniform... I just want to limit oversized ones. Can i use instead the .css of something like this?, would this work?:
.video_thumbnail {
    max-height: 90px;
}
...or would something get screwed up?


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
michael
@michael
8 years ago
7,805 posts
Strumelia:.....
-Does the term "video" there apply then to all the site videos including youtube, Vimeo, and uploaded?.....
you can call the css class whatever you want. I just thought .video_thumbnail seamed descriptive. Could just as easily use .avacardo or .bull_terrier

its just a marker.

sure fiddle with the height to get it right, 85 looked about right to me, you can adjust as necessary. Firebug is good for that.


sure max-height works, good idea.
Strumelia
Strumelia
@strumelia
8 years ago
3,605 posts
D'oh, it doesn't seem to do the job where I need it too, the ultra-tall Vimeo thumbnail remains too tall both on my site's main Videos link page:
http://fotmd.com/video
...and also it remains too tall in the video widget on my site's Home/Index page in the right column:
http://fotmd.com/

HOWEVER, the suggested code changes DID indeed squash the height of the Vimeo thumbnail on the member's Profile page video list, see top video here:
http://fotmd.com/steve-battarbee/video
So it helped partially- on the member's profile page video list.

Now I need to do the same for my site's Home page video list and the site's main Video page.

------------
What I did so far:

Here is the code I adjusted in my skin's jrVimeo_item_list.tpl:
<a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.vimeo_title_url}"><img src="{$item.vimeo_artwork_url}" class="iloutline img_scale vimeo_thumbnail"></a>

and here is the code I added to my skin's image.css file:
}

.vimeo_thumbnail {
    max-height: 90px;
}



--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
michael
@michael
8 years ago
7,805 posts
yeah, thats it. just add that video_thumbnail class to wherever you want to limit the max-height to 90 and you should be good to go.

Can you locate the templates that need adjusting? If you'd like a hand with that point me to the URL and I can help figure it out.
Strumelia
Strumelia
@strumelia
8 years ago
3,605 posts
Ok, I did this by crawling around slowly on my knees in my skin templates....but I think i got it all done! =8-o

After adding the code for video_thumbnail with a max height of 90px to my skin's image.css file, ....

....I then added "video_thumbnail" to the tail end of "class = "iloutline img_scale..."
in my following existing custom SKIN templates:
combined_video_list
profile_index_video
item_list
jrVimeo_item_list
and
index.tpl (in the 'embedded templates' section for videos)

that seems to have limited the size of that oversized Vimeo image to no more than 90px height in the various places I have looked where video thumbnails are displayed in either lists or grids. Best of all my site's Video page now looks normal again without "Reuben's Train" messing up the grid: http://fotmd.com/video

Looks way better, and if that member keeps posting more vids in the same way (and most member videos DON'T present this problem), it won't disrupt how the video sections look anymore.

Whew!
Took a little time but I guess I learned one or two things. Frankly I'm amazed I didn't blow up my whole site in the process. Definitely used up a few of my remaining brain cells though.
=8-0 ;D

Marking this solved now. Thanks for your patient help, Douglas and Michael!


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

updated by @strumelia: 03/25/17 06:57:18PM
michael
@michael
8 years ago
7,805 posts
total confidence in you. well done :)