Hi there – I have an animated .gif from an advertiser (AspirEDU) on our site that I’ve placed on our homepage that isn’t displaying correctly and I cannot figure out why. We have other animated .gifs on the same page that function just fine (e.g. eLearningExperts).
I’m using Newspaper version 6.6.4
Please see http://www.moodlenews.com
The .gif is in the 1st column, just below the “Latest News” section. (The ad should be for AspirEDU)
The ad is implemented via the Theme panel using the Custom Ad 1 spot.
This is the code I’ve used: http://www.screencast.com/t/omuZivaPWJ
Hello,
The implementation you used is corect and the ad displays fine: http://screencast.com/t/z9J7G5T1
I could not see any problems with it. Please provide more details so we can better understand the issue.
Thank you!
You are seeing the same thing I am. The AspirEDU logo only appears for a flash and then the animated words run through. Also, you’ll note that the graphic on screen is only 684px wide and should be 700px.
This is what it should look like: http://www.screencast.com/t/cHJ7ohvrAlqJ
Hello,
I have tried your ad on my end: http://screencast.com/t/eoZsx7qi31
Please check your code again and do not specify any width to it this time.
Try your code like so:
<div class="td-visible-desktop">
<a href="http://www.aspiredu.com?=moodlenews"><img src="http://www.moodlenews.com/wp-content/uploads/AspirEDU-Advertisement-700x86.gif"/></a></div>Let us know how it goes.
Thank you!
No luck – I was able to recreate your success by placing the code in the Header Ad position. The .gif works fine there, but not when I place it in the custom_ad 1 section. See this video: http://www.screencast.com/t/spDnj2GrR
And this screen shot showing how the custom ad block is placed on our page: http://www.screencast.com/t/glmWHwTdXos
What do you think?
Hello,
I tested this again on my end but it seems to display fine in custom ad 1 implemented exatly the same as yours: http://screencast.com/t/wogxkqiN
It seems the issue is not the theme. Please try to update your theme to the latest version, then try it without any plugins. Disable all of them except visual composer and clear cache (reset cdn if you use it).
Let us know how it goes.
Thank you!
Thank you for your continued help with this, Bogdan.
The difference I see between your example and mine is that you’re not implementing the image in the same way as I am. When I test the image in the header spot, footer spot, etc. it works fine. In fact we also have other animated .gifs on the page that function correctly.
However, we have the page in a 2/3 + 1/3 column configuration. I’m implementing the image in the 2/3 column. First we have a Block 1, then an Ad Box, then Block 2, then another Ad Box (which currently uses Google adwords). see here: http://www.screencast.com/t/glmWHwTdXos
Now, check out this video: http://www.screencast.com/t/LSpeClaaQF
I have implemented the AspirEDU .gif in the 2/3 column at the top using a “Single image” block. Same issue – flickering and squeezing of the image. At the same time I’ve substituted the header image (which is only a .jpg) in the Ad Block position. You can see how the header image (which is 728X90) has been squeezed to 640X80, left aligned and presses up against the section below (Block 2). If you continue to scroll down the page, in the 3rd Ad block position, we’re using AdWords and the full width is being used without squeezing, etc.
Right now, until we figure it out, I have placed a static .jpg image on the page. Check it out – it should be 700X86, but on the page it is only 640X80.
My gut tells me there is something going on with the Ad Block squeezing the image and, as such affecting the display of the animation (as is readily visible in the video examples I’ve send over).
Note: I’ve updated the images we’re using so they now have a black boarder.
//www.moodlenews.com/wp-content/uploads/AspirEDU.com-Advertisement-700×86.gif
@stephenladek try to set your ad in one colum row. The problem its 2/3 column its a bit small than 700px.
http://www.screencast.com/users/inggeek/folders/Default/media/082f76fd-dce4-4862-b726-eebf78327715
Thanks, @inggeek. However this is exactly the problem that I have identified as well. I need a solution for the 2/3 column because this is the ad space that we have sold to our advertisers. I don’t have the option of changing the layout to only one column at this stage.
What would be the correct size for an animated .gif in the 2/3 column, using the custom Ad Box block?
I also need the sizes for tablet and phone so it is responsive, please.
Thanks!
Hello,
The container for a 2/3 layout is 696 pixels wide (total width).
640px for tablet landscape, 484px for tablet portrait. The mobile version is simply responsive and adapts to the different widths starting from 728 pixels width (side-bar jumps below so more space for the ad)
I hope this helps.
Thanks.
Thanks again, Bogdan.
I’ve had my client create a .gif that is 640X80px, and it appears to fit without issue because the words don’t appear squeezed or clipped.
//www.moodlenews.com/wp-content/uploads/AspirEDU.com-Advertisement-640×80.gif
However, we’re still experiencing the same animation problems where the logo and border flashes for an instant and then disappears while the words animate on screen. I’ve kept the 640X80 graphic on the page so you can see it in real time.
Any other thoughts?
Hello,
Unfortunately the url you provided does not work and the one on your website is already broken. I’m not sure why this is happening as it displays fine on my end every time. I added this ad:
<div class="td-all-devices"><a href="#"><img src="http://i2.wp.com/www.moodlenews.com/wp-content/uploads/AspirEDU.com-Advertisement-640x80.gif"/></a></div>
Even if i add it in the header section or in the content on a 2/3 layout, it still displays fine and does not break. I do not know why id does on your website. Please send us an email at contact@tagdiv.com and provide wp-admin so we can test this issue directly. Please also include a link to this topic.
Thank you!
Success! I’ve used the code you have provided and it works now. Thank you for all of your help.
Glad it finally worked out.
Best of luck on your project!
