BoldMinded

Publisher does not support the Fluid field type. Please do not contact asking when support will be available.

If you purchased an add-on from expressionengine.com, be sure to visit boldminded.com/claim to add the license to your account here on boldminded.com.

Ticket: {video_field:thumbnail_small} tags are outputting a striped thumbnail from Vimeo instead of the correct thumbnail.

Status Resolved
Add-on / Version Reel 1.5.2
Severity
EE Version 6.0.6

MLohrman

Sep 20, 2021

This has been working fine for months, so thinking it might be a Vimeo change. The {video:thumbnail_small} is outputting a URL to an image with stripes instead of the actual thumb image. The embedded video looks to be displaying the thumbnail fine. 

{exp:channel:entries channel="videos" disable="member_data|category_fields|pagination" sort="asc" orderby="title" dynamic="no" category="{embed:em_category_id}{if segment_2}&{segment_2_category_id}{/if}" cache="yes" refresh="240"}
				<div class="grid__cell">
					<div class="product-video">{!-- _vid-thumb.scss --}
						<a data-fslightbox="resources-videos" href="#video_{embed:em_category_url_title}_{count}" class="product-video__link">
							{if "{video_thumbnail count='true'}" > 0}
							<img src="{video_thumbnail}{img:url:resize width="640"}{/video_thumbnail}" class="product-video__thumbnail">
							{if:else}
							<img src="{video:thumbnail_small}" class="product-video__thumbnail">
							{/if}
							<div class="product-video__icon-positioner">
								<img src="/assets/img/icon_play_white.svg" class="product-video__icon">
							</div>
						</a>
						<div style="display: none;">
							<iframe id="video_{embed:em_category_url_title}_{count}" src="https://player.vimeo.com/video/{video:id}" width="1280" height="720" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
						</div>
						<p class="product-video__name">{if video_display_title}{video_display_title}{if:else}{title}{/if}</p>
</div></div>
<p>			{/exp:channel:entries}

 

Output:

<aside class="grid_cell product-sidebar">
	
			<div class="product-video product-video--sidebar">
				<a data-fslightbox="videos-sidebar" href="#video_1" id="video_1_anchor" class="product-video__link">
					
					<img src="https://i.vimeocdn.com/video/983797169_640x360.jpg?r=pad" class="product-video__thumbnail">
					
					<div class="product-video__icon-positioner">
						<img src="/assets/img/icon_play_white.svg" class="product-video__icon">
					</div>
				</a>
				<div style="display: none;">
					<iframe id="video_1" src="https://player.vimeo.com/video/473031573" width="1280" height="720" frameborder="0" allow="autoplay; fullscreen" allowfullscreen=""></iframe>
				</div>
				<p class="product-video__name">Dr. Kevin Blinder, MD - Bi-Blade Stability</p>
</div>
<p>	<br /></p>
</aside>

 

#1

BoldMinded (Brian)

Sep 20, 2021

Mike, you’ll need to inspect the JSON object in the Ajax response to see what Vimeo is returning. That is definitely not an image that Reel is adding to the page, so something in the Vimeo response might be different. Does it do this for every video? Have you tried the other thumbnail sizes? E.g. thumbnail_small, thumbnail_medium, thumbnail_large, or thumbnail_max?

#2

MLohrman

Sep 20, 2021

Brian, can you point me to what I need to click on in Dev tools?

#3

BoldMinded (Brian)

Sep 20, 2021

The Network tab, it’ll show the Ajax request and response.

#4

MLohrman

Sep 20, 2021

Comment has been marked private.

#5

BoldMinded (Brian)

Sep 20, 2021

I mean in the Network tab when editing the entry in the CP. Thats where you’re selecting videos, and that is where it’s making a request to the Vimeo API, which will contain the JSON response I’m looking for. In the Network tab there should also be a way to filter the requests by “XHR” - do that then you should see the responses from Vimeo’s domain.

#6

MLohrman

Sep 20, 2021

Comment has been marked private.

#7

BoldMinded (Brian)

Sep 20, 2021

Do any of the thumbnail urls in that response look correct?

#8

BoldMinded (Brian)

Sep 20, 2021

Have you tried changing any of the thumbnail variables in your template yet to thumbnail_small, thumbnail_medium, thumbnail_large, or thumbnail_max?

#9

BoldMinded (Brian)

Sep 20, 2021

Sorry for the questions, but this seems like an issue that you’ll have to do a fair amount of debugging before I can really do much (if anything). This to me seems like Vimeo is sending you those thumbnails as part of the API response, which is getting saved to the EE database, and then output in the front-end for your template code (which is why I’m asking what the other small, medium, large, and max variables are outputting).

#10

BoldMinded (Brian)

Sep 20, 2021

Also pasting that JSON response into an rft file breaks the formatting, it’s inserting %20 spaces into the URL. Should rename the file to give it a .json extension so it’s formatting remains intact.

#11

MLohrman

Sep 20, 2021

I tried all the different variables and there was no difference. I just tried removing a video from the entry and adding it again and the thumbnail works again on the front end. Luckily I don’t have more than 40 videos on the site. Thanks for helping me out with this.

#12

BoldMinded (Brian)

Sep 20, 2021

That sort of sounds like when the video was initially added the Vimeo api didn’t send the thumbnail correctly, and thus that is what was saved in EE. I don’t think it was an issue with Reel saving the wrong image, b/c there is nothing in Reel’s codebase that saves an image with the vertical stripes as you shared (or any other image). It just takes what it gets back from Vimeo ¯\_(ツ)_/¯

#13

MLohrman

Sep 20, 2021

It is strange, it’s been working fine since site launch. Client has access to Vimeo and the site, so we’l just blame them, haha. Thanks!

Login to reply