Leaderboard
Popular Content
Showing content with the highest reputation on 12/07/2023 in all areas
-
@dotnetic Maybe I misunderstood, I thought he doesn't want the image to be loaded below a certain screen size. And since URL comes from a ProcessWire page he can't push it in a CSS and use media queries. In this case I tested the following and it's working: <style> :root { --myImageUrl: url('{{ pages.get(5872).gameLogoLarge.url }}'); } body { /* This part can be in external CSS. */ @media screen and (min-width: 640px) { height: 100vh; background: var(--myImageUrl) no-repeat fixed center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } </style> Note that it works on <body> but not <html>, but I don't think you have to put something on html except (maybe) the "height:100vh".2 points
-
I can't test this right now, but it might be simpler to put your functions in a separate file (e.g '_funcs.php') and then in '_init.php' use: // in _init.php require_once '_funcs.php'; By using 'require_once', it shouldn't matter how many times '_init.php' gets called, the '_funcs.php' file will only be included once.2 points
-
I'm working on a website where I want to add an image as background: The image comes from a PW images field. So I can't add the image via CSS... I'm doing it like this: <html lang="de" class="uk-background-muted" style="background-image: url(<?= $site->bgImgUrl() ?>)"> In CSS I have this: html { height: 100vh; background: no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } So far, so good. But I don't need that image on mobile, as it will never be visible. I only need it for screen sizes > 1440px. Any ideas how I could do that? I tried adding a <style> tag with @media(min-width: 1440px) { ... } </style> but that did not work. As soon as I placed it as "style" attribute of the html tag it worked. Thx for your help 🙂1 point
-
If that is what he wants, it can be achieved with using the picture element and source <picture> <source media="(min-width: 1440px)" srcset="https://placekitten.com/1024/800"> <img src="no-image.png" id="hintergrundbild"> </picture> so the image would only load on screen size at 1440px and above. The no-image.png could either be replaced with a blank image or a low res version, which will never get shown, because the element is hidden by default. But sure, it will produce a 404 if the image does not exist. I adapted my codepen, to reflect these changes. I am not saying that da2's solution is wrong. It is just another way to do it. But I think the version with using an image is much more flexible.1 point
-
Hi Bernhard, you could just use an image tag inside of the body with object-fit. The advantage of this method is that you even could use different images for different resolutions if you want to. Another advantage is that you do not land in specifity hell because the style attribute has a very high specifity. I created a small codepen example, that you could use as a base: https://codepen.io/jmar/pen/oNmmJeB1 point
-
Strange, on my side it works in every language.1 point
-
I found the problem. My page is multi language. So I have to change the prefix in the "LanguageSupportPageNames" Module. Anyone who can read has a clear advantage 🤣 🤦♂1 point
-
@bernhard, thanks for the heads-up. The new tab option was working for child items but not for the top level menu items. Fixed in v0.1.5 and in this version I've also added an option to define an icon for the top-level items - these are only visible in the sidebar menu so probably not seen all that often but still good to have control over.1 point
-
Why do you want to do that? You can configure that via $config->pageNumUrlPrefix, but what you are trying to do is not possible by default (and maybe not a good idea at all). By adding the slash you basically let it look like another layer of the pagetree (or of your sitemap), but that's not the case, so I'd say it's logically incorrect. Also see here:1 point
-
I had the same problem with 3.0.218. I had to delete the module ".Modules" in the modules table in the database. After that, the error was gone. Thought this was only a local problem 😉1 point
