Typo3 replacing src for large external image with data-large URL from local folder path

Question

Typo3 replacing src for large external image with data-large URL from local folder path. path: typo3conf/ext/bootstrap_package/Resources/Private/Partials/ContentElements/Media/Rendering/Image.html

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<img src="{f:uri.image(src: 'EXT:bootstrap_package/Resources/Public/Images/blank.gif')}" data-src="{f:uri.image(image: file)}" data-large="{f:uri.image(image: file, cropVariant: 'default', maxWidth: 1140)}" data-medium="{f:uri.image(image: file, cropVariant: 'medium', maxWidth: 940)}" data-small="{f:uri.image(image: file, cropVariant: 'small', maxWidth: 720)}" data-extrasmall="{f:uri.image(image: file, cropVariant: 'extrasmall', maxWidth: 320)}" title="{file.title}" alt="{file.alternative}" class="lazyload" data-preload="{f:if(condition: settings.preload.images, then: 'true', else: 'false')}" />
<noscript>
    <img src="{f:uri.image(image: file)}" title="{file.title}" alt="{file.alternative}" />
</noscript>
</html>

Problem is that we have a 7 mb large file 1140 X 700 it comes under data-large. I am adding an external URL for it. But when I view page it replace the img src with data-large those have local image path instead of external image path. I am adding a external image file from extension. HTML page looks like

<img src="/typo3k/fileadmin/_processed_/c/6/csm_Namibia__6__01_bf7ab3fa07.jpg" data-src="https://media.........../view/14fd891e99c67dfc2d475aded2f38d3b389811" data-large="/typo3k/fileadmin/_processed_/c/6/csm_Namibia__6__01_bf7ab3fa07.jpg" data-medium="/typo3k/fileadmin/_processed_/c/6/csm_Namibia__6__01_2ea86b1ad4.jpg" data-small="/typo3k/fileadmin/_processed_/c/6/csm_Namibia__6__01_a5c4bf8281.jpg" data-extrasmall="/typo3k/fileadmin/_processed_/c/6/csm_Namibia__6__01_03571e8240.jpg" title="" alt="" class="lazyload" data-preload="false" style="opacity: 1;">

the problem occurs only for large image file, for small image its working fine showing external link for src attributes and for data-large too.

for small 720 X ... image its working showing html on view like

<img src="https://media............../view/11ca5ff84cdb906c5427d87bb3bd383e389813" data-src="https://media.............../view/11ca5ff84cdb906c5427d87bb3bd383e389813" data-large="https://.................../view/11ca5ff84cdb906c5427d87bb3bd383e389813" data-medium="https://media................../view/11ca5ff84cdb906c5427d87bb3bd383e389813" data-small="/typo3k/fileadmin/_processed_/5/9/csm_Namibia__6__c0a95f8209.jpg" data-extrasmall="/typo3k/fileadmin/_processed_/5/9/csm_Namibia__6__75677ed405.jpg" title="" alt="" class="lazyload" data-preload="false" style="opacity: 1;">

please help me typo3 8.7 version I am working.

You might want to ask in the TYPO3 Slack instead which allows you to interactively refine your question to increase the chance of getting an answer. Right now your question is not easy to understand and sounds like a very specific usecase which is not something for Stackoverflow. — Mathias Brodala
yes you might be right, but on slack I haven't account yet and I tried now but taking 3 days and require manual validation. on mail I receive we have received your request for a typo3.org login account. Due to an immensive amount of spam subscriptions, we are currently approving new accounts after manual verification. You confirm that the account will not be used for spamming any of our services with unrelated or advertising content. !!! Respond to this e-mail within the next 3 days and confirm that this account will be used with best intentions. !!! — Sunil Kumar Dhakad

HerrZ HerrZ · Accepted Answer · 2019-11-01T13:50:35

try this:

<img
    src="{f:uri.image(src: 'EXT:bootstrap_package/Resources/Public/Images/blank.gif')}"
    data-src="{f:uri.image(image: file, maxHeight:dimensions.height, maxWidth: dimensions.width, treatIdAsReference:1)}"
    data-large="{f:uri.image(image: file,treatIdAsReference:'1', cropVariant: 'default', maxWidth: 1140)}"
    data-medium="{f:uri.image(image: file, treatIdAsReference:'1', cropVariant: 'medium', maxWidth: 940)}"
    data-small="{f:uri.image(image: file, treatIdAsReference:'1', cropVariant: 'small', maxWidth: 720)}"
    data-extrasmall="{f:uri.image(image: file, treatIdAsReference:'1', cropVariant: 'extrasmall', maxWidth: 320)}"
    title="{file.title}" alt="{file.alternative}"
    class="lazyload"
    data-preload="{f:if(condition: settings.preload.images, then: 'true', else: 'false')}"
/>

i added the treatIdAsReference parameter. do you have any limits set for image manipulation?

Typo3 replacing src for large external image with data-large URL from local folder path

1 Answers