TYPO3 ver. 6.2.1 with Bootstrap 3 - using blank image in SRC tag

tpbillund commented 10 years ago

I have a little problem showing my image aften some clearing of baseURL. Then my images is blank and it using another image as the SRC, why do it do that ?

See right site main section in this link http://wnf.dk/golf-vinrejser.html

The funny part is that its only the image I have added to the page with Page -> Add Record.

So images added to background in CSS and TS is working fine.

This is an ex. on a image, where all the files is right, but not the SRC.

benjaminkott commented 10 years ago

All images in this example are lazyloaded that means that the image that will be delivered initial to the client is only a very small blank image. As soon as the JavaScript in the bottom has been loaded the images should get replaced with the correct images depending on the current resolution of your device and only if they are within the viewport of the user.

That means that no image will be loaded that the user cant see and the user only gets the image that is prepared for his device - so no smartphone will get retina desktop images, and low bandwith users can browse the site faster because they only download the images they should see.

The javascript responsible for this you can find here: https://github.com/benjaminkott/bootstrap_package/blob/master/Resources/Public/JavaScript/Libs/jquery.responsiveimages.js

The typoscript for the image rendering can be found here: https://github.com/benjaminkott/bootstrap_package/blob/master/Configuration/ContentElements/Base.ts (line 1 to 43)

I will check the javascript again at the weekend if there is a problem, in my testcases everything worked fine.

@tpbillund I have checked your website and there is a javascript error - i dont know where this comes from can you have a look at this.

devtools

tpbillund commented 10 years ago

Hi Benjaminkott Thx. for the feedback, isent that a file TYPO3 is generating ? I have tried to delete images and compressed files in compressor (Install tool and clean up) no luck with that, so it's something TYPO3/Bootstrap is generating itself.. My Javascript code and Base.ts file is like the 2 u linked to. It worked fine for 3 days ago and then suddenly it did the things with the images, that it want to use the blank.gif image..

About the event.returnValue then its in the jquery-1.11.1.js file line 4857 and there its called event.originalEvent.returnValue, there is no other place in the fine to find that name.

The event.preventDefault() i can find 3-5 places in the file, but dont know what to do.

tpbillund commented 10 years ago

How can I turn off LazyLoad, so I will get my images back.

benjaminkott commented 10 years ago

I checked this again, and there is no problem i can find with the boostrap package. You are loading additional JavaScript that is breaking the JavaScript since jQuery is not loaded when you are trying to access it. Please check again your the additional JavaScriptare, as long there are errors the lazyload will not be functional.

you can disable it by changing the rendermode for images.

benjaminkott commented 10 years ago

I will close this since there is no problem with the Bootstrap Package. The problem on @tpbillund side accoured after inserting custom incorrect javascript and this is nothing i can fix.

tpbillund commented 10 years ago

Its ok U close it, but can't see how it can be "Incorrect Javascript" when I haven't added extra Javascript, it's a Bootstrap Package with Powermail thats all, and the Powermail wasen't added at that time, so I have removed the blank image from the base.ts file and added the ###SRC### and now its show the rigth image.

And after that I got a new error with the powermail again the same error, but this time I got helt bc. the jQuery script was added to the footer and not the header part.

And that can ONLY be by U, so NO IT NOT A PROBLEM on my side...

benjaminkott commented 10 years ago

@tpbillund

You are Using a differend version of jQuery in your Setup. Bootstrap Package: jquery-1.10.2.min Your Setup: jquery-1.11.1.
You are using additional JavaScript
jQuery v1.8.3 jquery.com
jQuery UI - v1.10.4 - 2014-01-17
jQuery UI Datepicker 1.8.18
validationEngineLanguage (dont know where that comes from
Inline Form Validation Engine 2.6, jQuery plugin
Some PowerMail JavaScript
More PowerMail Custom JS in the 2. concatenated file related to baseURL
InlineJavaScript above the concatenated JS Files in the bottom

I really dont know where all that stuff comes from, but is nothing that the Boostrap Package delivers at some point. It´s maybe coming from powermail but i dont know to be honest. This is nothing i can fix!

tpbillund commented 10 years ago

@tpbillund

You are Using a differend version of jQuery in your Setup.
Bootstrap Package: jquery-1.10.2.min
Your Setup: jquery-1.11.1.

You are using additional JavaScript
jQuery v1.8.3 jquery.com
jQuery UI - v1.10.4 - 2014-01-17
jQuery UI Datepicker 1.8.18
validationEngineLanguage (dont know where that comes from
Inline Form Validation Engine 2.6, jQuery plugin
Some PowerMail JavaScript
More PowerMail Custom JS in the 2. concatenated file related to baseURL
InlineJavaScript above the concatenated JS Files in the bottom

I really dont know where all that stuff comes from, but is nothing that the Boostrap Package delivers at some point. It´s maybe coming from powermail but i dont know to be honest. This is nothing i can fix!

Yes Now I do, but if I changes it back then U can still see the issue. I change the jQuery from 1.10.2 to 1.11.1 to see if that fix the issue.

the extra added Javascript is a function to add readonly on an input field, ADDED after this issue. 3, 4, 5, 6, 7, 8, 9, 10 Ads to Powermail ADDED after this issue.

benjaminkott commented 10 years ago

@tpbillund again this seems to be something in your setup

i can have a look, for that i need a complete dump of your setup - includes file and database. i will fix that issue in your setup and send you back a working copy. please upload it somewhere so i can have access to it.

this is a onetime offer.

tpbillund commented 10 years ago

Again U are doing a great job - and thx for the offer - as i say/wrote some of the issue was fixed when I edit the setup.txt fil in the TYPOSCRIPT folder and added the jQuery script in the includeJSlibs and remowed it from the includeJSFooterlibs.

So just keep up the god work.....

supershivas commented 10 years ago

Hi Benjamin,

I am not sure the same issue happened to me but each time I add an image through the page editor in a typical page content (as Text and Images or Images Only), the displayed image is always the following: capture decran 2014-08-12 a 12 57 18

With this URL:

http://my-site.org/typo3/sysext/extensionmanager/Resources/Public/Images/Distribution.png

But it doesn't happened when I use bootstrap content elements ( as carousel, tabs,...)

Do you know how to fix it?

benjaminkott commented 10 years ago

This is strange... should not happen. Seems like your FAL goes nuts? I really have no clue where this issue comes from but seems not bootstrap_package related. sry

Did you add the root directory as a filestorage?

inaffect-ag commented 9 years ago

I had to change my template from "CSS Styled Content Typo3 v6.1" to the Standard "CSS Styled Content" After that my images will be shown.

benjaminkott / bootstrap_package

TYPO3 ver. 6.2.1 with Bootstrap 3 - using blank image in SRC tag #12

I really dont know where all that stuff comes from, but is nothing that the Boostrap Package delivers at some point. It´s maybe coming from powermail but i dont know to be honest. This is nothing i can fix!