Website
/
GravTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace x5 image lazy loading with pure HTML

main
Anonymous Contributor 2023-09-12 08:14:58 +02:00
parent 4989ffa1dc
commit f7b6684c66
6 changed files with 5 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/4Creative-Discord-Button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
images/4Creative-Logo-small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
images/4Creative-logo-transp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

0
images/4creative-logo.png → images/4Creative-logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 44 KiB

57
templates/partials/base.html.twig
View File

@ -128,62 +128,7 @@
</div> </div>
<div id="imFooter_imObjectImage_04_wrapper" class="template-object-wrapper"> <div id="imFooter_imObjectImage_04_wrapper" class="template-object-wrapper">
<div id="imFooter_imObjectImage_04"> <div id="imFooter_imObjectImage_04">
<div id="imFooter_imObjectImage_04_container">4Creative Logo</div> <img loading="lazy" alt="4Creative Logo" style="width: 60px; height: 60px; position: relative; left: 0px; top: 0px; user-select: none;" width="60" height="60" unselectable="on" src="{{ media['image://4Creative-logo-small.png'].url|e }}">
</div>
<script>
x5engine.boot.push(function () {
$('#imFooter_imObjectImage_04').addClass('imlazyloading').trigger('imLazyLoadingStart');
new x5engine.mediaObject({
'url': '211206165160216183098117154166151148224212215151098171228213210167160207168205163128156150165194170125133178160154',
'protect': true,
'load': function (o) {
$('#imFooter_imObjectImage_04_container').html($(o.DOMObject()).css({ 'position': 'relative', 'left': 0, 'top': 0 }));
$('#imFooter_imObjectImage_04').trigger('imLazyLoadingEnd');
}
});
});
</script>
</div>
<div id="imFooter_pluginAppObj_05_wrapper" class="template-object-wrapper">
<!-- Animated Image v.31 -->
<div id="imFooter_pluginAppObj_05">
<div id="iandt_imFooter_pluginAppObj_05">
<div class="wrapper flip-vert">
<div class="sides-container">
<div class="side front">
<div class="text-container">
<div class='center-all'></div>
</div>
</div>
<div class="side back">
<div class="text-container">
<div class="center-all">
<script>
function decode_html(encoded, newlineTag) {
encoded = replaceAll("&amp;gt;", ">", encoded);
encoded = replaceAll("&amp;lt;", "<", encoded);
encoded = replaceAll("&quot;", "\"", encoded);
encoded = replaceAll("&amp;", "&", encoded);
encoded = replaceAll("&lt;br /&gt;", "", encoded);
return encoded;
}
function replaceAll(find, replace, str) {
return str.replace(new RegExp(find, 'g'), replace);
}
</script>
<div id="imFooter_pluginAppObj_05_link_btn" class='btn'>
<script>$('#imFooter_pluginAppObj_05_link_btn').append(decode_html("&amp;lt;a href=&quot;http://discord.gg/ZfPtWAr&quot; onclick=&quot;return x5engine.imShowBox({ media:[{type: \'iframe\', url: \'http://discord.gg/ZfPtWAr\', width: 1920, height: 1080, description: \'\'}]}, 0, this);&quot;&amp;gt;Unser Discord Kanal&amp;lt;/a&amp;gt;"));</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
animatedimage_imFooter_pluginAppObj_05();
</script>
</div> </div>
</div> </div>
</div> </div>

32
templates/partials/header.html.twig
View File

@ -40,21 +40,10 @@
<div id="imHeaderObjects"> <div id="imHeaderObjects">
<div id="imHeader_imObjectImage_02_wrapper" class="template-object-wrapper"> <div id="imHeader_imObjectImage_02_wrapper" class="template-object-wrapper">
<div id="imHeader_imObjectImage_02"> <div id="imHeader_imObjectImage_02">
<div id="imHeader_imObjectImage_02_container">4Creative Logo</div> <div id="imHeader_imObjectImage_02_container">
<img loading="lazy" alt="4Creative Logo" style="width: 180px; height: 180px; position: relative; left: 0px; top: 0px; user-select: none;" width="180" height="180" unselectable="on" src="{{ media['image://4Creative-logo.png'].url|e }}">
</div>
</div> </div>
<script>
x5engine.boot.push(function () {
$('#imHeader_imObjectImage_02').addClass('imlazyloading').trigger('imLazyLoadingStart');
new x5engine.mediaObject({
'url': '211206165160216183098117154166151148224212215151098171228213210167160207168156169188148',
'protect': true,
'load': function (o) {
$('#imHeader_imObjectImage_02_container').html($(o.DOMObject()).css({ 'position': 'relative', 'left': 0, 'top': 0 }));
$('#imHeader_imObjectImage_02').trigger('imLazyLoadingEnd');
}
});
});
</script>
</div> </div>
<div id="imHeader_imMenuObject_04_wrapper" class="template-object-wrapper"> <div id="imHeader_imMenuObject_04_wrapper" class="template-object-wrapper">
{{ _self.menu('imHeader_imMenuObject_04',pages) }} {{ _self.menu('imHeader_imMenuObject_04',pages) }}
@ -99,21 +88,8 @@
</div> </div>
<div id="imStickyBar_imObjectImage_02_wrapper" class="template-object-wrapper"> <div id="imStickyBar_imObjectImage_02_wrapper" class="template-object-wrapper">
<div id="imStickyBar_imObjectImage_02"> <div id="imStickyBar_imObjectImage_02">
<div id="imStickyBar_imObjectImage_02_container">4Creative Logo transparent</div> <img loading="lazy" alt="4Creative Logo transparent" style="width: 110px; height: 64px; position: relative; left: 0px; top: 0px; user-select: none;" width="110" height="64" unselectable="on" src="{{ media['image://4Creative-logo-transp.png'].url|e }}">
</div> </div>
<script>
x5engine.boot.push(function () {
$('#imStickyBar_imObjectImage_02').addClass('imlazyloading').trigger('imLazyLoadingStart');
new x5engine.mediaObject({
'url': '211206165160216183098117154166151148224212215151098203228213210167166203161225169124157160213',
'protect': true,
'load': function (o) {
$('#imStickyBar_imObjectImage_02_container').html($(o.DOMObject()).css({ 'position': 'relative', 'left': 0, 'top': 0 }));
$('#imStickyBar_imObjectImage_02').trigger('imLazyLoadingEnd');
}
});
});
</script>
</div> </div>
</div> </div>
</div> </div>