SamC
-
Posts
733 -
Joined
-
Last visited
-
Days Won
9
Everything posted by SamC
-
@ROLAND_JUNO mine is like this. Using the new gtag. Just paste it in as the first item in the <head> section for your site like so: <?php namespace ProcessWire; ?> <!DOCTYPE html> <html lang='en'> <head> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-NUMBER"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-NUMBER'); </script> <!-- then the rest of your meta tage/page title/whatever --> <meta http-equiv='content-type' content='text/html; charset=utf-8' /> <meta name='viewport' content='width=device-width, initial-scale=1' /> </head> You find your specific code (and UA-NUMBER) on the google analytics website.
-
I'm going to use the IMagick Image Sizer engine which I just installed. Does the quality here override the quality I set on the front end for image resizing? Let's say it's different: $options = array("quality" => 90, "cropping" => "center"); What is the resulting quality of the image '$thumb'? $thumb = $entry->postThumbnail->size(800, 450, $options); Finding this a bit confusing. Thanks for any advice. ==EDIT== After reading around a few posts, I notice you can set defaults in config.php. So if I: /** * * Global image sizing options * */ $config->imageSizerOptions = array("upscaling" => true, "cropping" => "center", "quality" => 90)); ...then use imagemagick, and set the quality of that to 85, will the cropping center options be applied to images? I read PW will use IMagick if present, then GD as a fallback i.e. do the array above apply only to the fallback?
-
I'm making a function which just returns an image based on the current page. I set global image options in '_init.php' and wanted to use this variable in '_func.php' but it throws an undefined error. '_init.php' is appended on every page. Below is how it works now, but I've had to redefine the image options twice: // _init.php // Global image options $options = array("quality" => 80, "cropping" => "center"); // Include shared functions (if any) include_once("./_func.php"); // _func.php function getMetaImage() { $page = wire("page"); $pages = wire("pages"); // max height of uploaded landscape image = 1200px $imgHeight = 1200; $imgWidth = 1200; $options = array("quality" => 80, "cropping" => "center"); // <<<< want rid of this // if /tutorials/blog-entry/ if ($page->postThumbnail && $page->parent->id === 1017) { $metaImage = $page->postThumbnail->size($imgHeight, $imgWidth, $options)->httpUrl; } // if /tutorials/blog-entry/blog-entry/ elseif ($page->parent->postThumbnail) { $metaImage = $page->parent->postThumbnail->size($imgHeight, $imgWidth, $options)->httpUrl; } // default image on /site-settings/ else { $metaImage = $pages->get(1319)->postThumbnail->size($imgHeight, $imgWidth, $options)->httpUrl; } return $metaImage; } // /includes/header.php <meta property='og:image' content='<?= getMetaImage(); ?>'> Is there a way to define the global options just once and use them in my functions file? Thanks for any advice. -
Really great post, thanks for sharing @noelboss. Signed up to medium and did the above too, PW def needs some more exposure as does this write up.
-
Never heard of it. Which is a good thing by the sounds of it
-
Completely unrelated to this thread but thanks for sharing this @abdus. I've been looking for a way to serve up 'file.css' on local and 'file.min.css' on a live version and I never thought of using debug being true/false to change the file extension. Right now I have two header files and I have to awkwardly edit each one whenever something changes. Gonna implement something similar immediately! (and now to just remember to turn debug mode off on live site...) =EDIT= Did this in the end: // /templates/includes/header.php <link rel="stylesheet" type="text/css" href='<?= "$assets{$prependedFolder}css/styles.{$ext}css"; ?>' /> // /templates/_init.php (prepended) $templatesUrl = $config->urls->templates; $assets = $templatesUrl . "site-assets/"; $prependedFolder = $config->debug ? "src/" : "dist/"; $ext = $config->debug ? "" : "min."; Works great.
-
Lol, I have no idea what you just described but it sounds BAD!
-
What @kongondo said for sure! I always keep the dev tools open now, css and js caching was a nightmare for me. This stops that, 'alt+cmd+i' on a macbook. Can't remember the windows desktop combo, maybe 'shift+alt+i'.
-
Coming from CMSs that used centralized media, this tripped me up at first too. Convoluted is an understatement. However, I also think allowing users to insert images to their hearts content inside an RTE brings a world of design pain. Moderately related, one client a few years back added so many top level menu items that it spilled onto a new line and looked awful. Now I tightly control what they can and can't do, and that definitely includes image uploading. Maybe it's just me, but I also find working inside an RTE field where images have been inserted really awkward unless they're about 30 rows high. Anyway, the profields repeater matrix is an excellent alternative (for PW v3 and above). You can add body > image > body > image, (with image being just a single image upload field which you can set min/max image sizes). You have much more fine grained control over the final output. I thought it was well worth the £115 or so (whatever the exchange rate is) for unlimited usage. The other profields field types are very useful too that come bundled in. There's also the media manager module (£28 single site, £108 for unlimited use) which I haven't tried but it looks awesome: https://processwireshop.pw/plugins/media-manager/
-
Haha, great links!
-
https://javascript.info/ninja-code Quite enjoyed reading this one. Thought I'd share
-
Hi @Monty and welcome. I'm not 100% sure how you make just one part of a site powered by processwire. Maybe see this older thread where they talk of something similar: It might actually be easier to integrate processwire into the entire site. Then you can add your gallery easily, plus you'd have a nice CMS to boot for making any future changes. It sounds way more difficult than it actually is. You can convert existing HTML themes to processwire easily, so your static site would be no different. Whichever way you decide to go, just post in here and you'll have all the help you need.
-
Thanks @Robin S starting to understand this a bit better now.
-
I think this may be getting closer. Let's start with the final output: <!-- /home/ --> <div class="container-1400px"> <div>SOME STUFF IN A CONTAINER</div> </div> <!-- /basic page/ --> <div class="full-width-coloured-bg"> <div class="container-1400px"> <div>SOME STUFF IN A CONTAINER</div> </div> </div> <div class="container-1400px"> <div class="row"> <div class="col-10"> LEFT SIDE </div> <div class="col-2"> SIDEBAR </div> </div> </div> <!-- /services page/ --> <div class="full-width-coloured-bg"> <div class="container-1400px"> FULL WIDTH STUFF </div> </div> <div class="container-1400px"> <div>SOME STUFF IN A CONTAINER</div> </div> <div class="container-1400px"> <div class="row"> <div class="col-10"> LEFT SIDE </div> <div class="col-2"> SIDEBAR </div> </div> </div> I just can't see in any way how I can get this working with markup regions. With direct output and includes, it's a breeze, but the disadvantage to using direct output is that I'm having to set all my templates with an 'alternate template filename' of '_main.php' and then 'include($page->template->name)' in the main content area. Markup regions should allow me to pre-populate which would be nice. Of course, I could go the WP route and just for each template include header, then the content, then include footer, so wouldn't have to set the alternate template filename at all, but never been a great fan of that approach either. I like using a master template where everything is rendered from within that. Just can't see how this could be done. I was looking to use something like this: <region id="outer" class="might-need-a-full-width-class-here"> <region id="main"></region> <region id="sidebar"></region> </region> So in a template, sidebar will only appear if I add that tag: // basic-page.php <region id="sidebar"> <?php include("./includes/sidebar"); ?> </region> But of course, as soon as you use a tag with an id of "outer" to get the wrapper div in, the entire contents of that region are replaced and the main and sidebar are zapped out of existence. If you use div instead of region, the div is printed along with the class, which means you end up having full width wrappers around everything. See what I'm saying? Finding this hard to explain.
-
Displaying the most recent blog posts using different layouts for each
SamC replied to mike62's topic in Getting Started
Good to hear! That's a nice technique, will certainly be looking into that one. -
Displaying the most recent blog posts using different layouts for each
SamC replied to mike62's topic in Getting Started
This reminds of something I did a while back. There's another way of grabbing the first item: Possibly a bit late to the party here but knowing an extra method can't hurt. http://cheatsheet.processwire.com/pagearray-wirearray/sorting-and-filtering/a-not-selector/ Nice mockup btw @mike62 -
I'm trying to get my head around the new markup regions. I've come across a problem. How do you wrap tags around two regions in a template file (a container) if '_main.php' is responsible for all output? This example renders the correct output: _main.php <region id="main"> FULL WIDTH OR SIDEBAR IN HERE </region> basic-page.php <region id="main"> <div class="container"> <div class="content"> Content in basic-page.php </div> </div> </region> home.php <region id="main"> <div class="container"> <div class="content"> Content in home.php </div> <div class="sidebar"> Sidebar in home.php </div> </div> </region> But how do I make the sidebar a region so I can populate it at will depending on which template is loaded but also add a container (which will be required)? _main.php <div id="main"> FULL WIDTH OR SIDEBAR IN HERE </div> <div id="sidebar"> THE SIDEBAR </div> I could just wrap a container around both in '_main.php': <div class="container"> <div id="main"> FULL WIDTH OR SIDEBAR IN HERE </div> <div id="sidebar"> THE SIDEBAR </div> </div> ...but then EVERY page on the whole site would not be able to have full width elements. It's not possible to render tags via the page template files unless they are inside a tag/region with an id as they will be printed before the <html> tag. I'm probably missing something here about markup regions. I know @bernhard mentioned using them recently so may be able to shed some light. Any hints would be great, thanks.
-
Bug in default image grid mode: vertical list (verbose)
SamC replied to SamC's topic in General Support
Ha, yep. Guilty of not reading the issue properly until after posting... Thanks @Robin S this issue was really offputting for me. -
Bug in default image grid mode: vertical list (verbose)
SamC replied to SamC's topic in General Support
Removing the first run of 'setGridSize' function above this block seems to work: //console.log('initInputfield'); //console.log($inputfield); //setGridSize($inputfield, size, ragged); << THIS if($inputfield.hasClass('InputfieldImageEditAll') || mode == 'list') { var listSize = getCookieData($inputfield, 'listSize'); setListSize($inputfield, listSize); // runs when 'verbose list' console.log("setListSize ran"); } else { setGridSize($inputfield, size, ragged); // runs when 'square grid images' and 'proportional' console.log("setGridSize ran"); } Work for all views now at my end. -
Bug in default image grid mode: vertical list (verbose)
SamC replied to SamC's topic in General Support
Hmmm, I tried it and it didn't seem to fix What I noticed is that when I save the page, the image starts at the correct previous size, then resizes a fraction of a second later to a smaller version, so I: setGridSize($inputfield, size, ragged); if($inputfield.hasClass('InputfieldImageEditAll') || mode == 'list') { var listSize = getCookieData($inputfield, 'listSize'); setListSize($inputfield, listSize); console.log("setListSize ran"); } else { setGridSize($inputfield, size, ragged); console.log("setGridSize ran"); } ...and the output showed that this runs twice (I never noticed it runs before the if block).
-
Bug in default image grid mode: vertical list (verbose)
SamC replied to SamC's topic in General Support
So I looked into this a bit but I'm way over my head staring at the /wire/modules/Inputfield/InputfieldImage js file. What I did notice was that after I dragged the slider fully to the right, the left column is 39% and the right column is 61% (at the bottom). These change depending on the slider value, but both together equal 100% width. When the page is saved, the width of the left column always reverts to 260px wide. I'm having no luck tracking down where this 260px comes from in the first place, so would need someone more experienced to look at this.
-
Starting to see the point of regions now after playing around with it this morning. Need to keep reminding myself that '_main.php' is the LAST file that is output. This does seem to have (at least) one advantage over my last approach. Namely, I don't have to set '_main' as the alternate template filename anymore for each template. =EDIT= Another thing I've noticed, if you include a file from '_main.php' (which is not a known system template), the include must have... <?php namespace ProcessWire; ?> ...at the top or it doesn't output.
-
At present, all templates are rendered via '_main.php' but each template that needs to be a rendered page (basic-page, blog-index, blog-entry etc.) uses the alternate template filename instead of '_main.php' being appended. Hence: // _main.php <?php include("./includes/header" . ".php"); ?> <?php include("./views/{$page->template->name}" . ".php"); ?> <?php include("./includes/footer" . ".php"); ?> and the header which is included on every page: <?php namespace ProcessWire; ?> <header> <div class="container"> LOGO, MENU ETC... </div> <?php if ($page->template == "tag-entry") { $title = "Processwire " . strtolower($page->title) . " tutorials"; } elseif ($page->parent->template == "blog-entry") { $title = $page->parent->title; } else { $title = $page->get("altTitle|title"); } ?> <div class="container pt-5 pb-6"> <h1 class="display-3"><?= $title; ?></h1> <?php if ($page->subtitle): ?> <p class="subtitle"><?= $page->subtitle; ?><p> <?php endif; ?> <?php if ($page->template == "blog-entry" && $page->parent->template == "blog-entry"): ?> <p class="date-and-cat"><span>Posted on</span> <strong><?= renderPostDate($page->parent) ;?></strong> <strong><?= renderTags($page->parent); ?></strong></p> <?php elseif ($page->template == "blog-entry" && $page->parent->template == "blog-index"): ?> <p class="date-and-cat"><span>Posted on</span> <strong><?= renderPostDate($page) ;?></strong> <strong><?= renderTags($page); ?></strong></p> <?php endif; ?> </div> </header> So, using another method such as markup regions, not sure how to render this. Maybe something like: // _main.php <?php if ($page->template == "tag-entry") { $title = "Processwire " . strtolower($page->title) . " tutorials"; } elseif ($page->parent->template == "blog-entry") { $title = $page->parent->title; } else { $title = $page->get("altTitle|title"); } ?> <region id="header"> <div class="container pt-5 pb-6"> <h1 class="display-3"><?= $title; ?></h1> <?php if ($page->subtitle): ?> <p class="subtitle"><?= $page->subtitle; ?><p> <?php endif; ?> <region id="date-and-cat"></region> </div> </region> and a blog page for example: // blog-entry.php <region id="date-and-cat"> <?php if ($page->parent->template == "blog-entry"): ?> <p class="date-and-cat"><span>Posted on</span> <strong><?= renderPostDate($page->parent) ;?></strong> <strong><?= renderTags($page->parent); ?></strong></p> <?php elseif ($page->parent->template == "blog-index"): ?> <p class="date-and-cat"><span>Posted on</span> <strong><?= renderPostDate($page) ;?></strong> <strong><?= renderTags($page); ?></strong></p> <?php endif; ?> </region> Not really sure here. I also have include files inside loops and stuff like that. I think my best bet is to start with empty templates and build it up rather than modifying my existing ones which is just confusing me no end. Don't really want to divert this thread too much though.
-
I think includes() would be faster because it is a function built into php. It's like whatever's in the include file is simply written right into the page. The markup regions have to be processed by PW first to see what goes where, then put it all together for final output. I'm not convinced on markup regions tbh. I'm just not getting how you dynamically change just parts of the regions instead of having to define what goes in the entire region in every template. Maybe just tired! I'll carry on tomorrow.
-
You're in luck because I just tried this. // _main.php <region id="header">HEADER</region> <region id="main"></region> <region id="footer">THIS IS MY FOOTER</region> ...and a template: // basic-page.php (used to make the /about/ page) <?php namespace ProcessWire; ?> <region id="header"></region> <region id="main"> <div class="container py-5"> <div class="row justify-content-center"> <div class="col-md-8"> <?= $page->body; ?> </div> </div> </div> </region> <region id="footer"></region> Then on a page made with the basic-page template. The header and footer are hidden completely (from view and source).
