_Roy_ Posted January 16, 2022 Share Posted January 16, 2022 Hi all, I am trying out ProcessWire on my XAMPP-installation to test out how I could use it in real-life situations. I have already found out a couple of things that are quite promising! I do have a question about generating specific things for the Home-page. A lot of times (most of the times in fact), a client will ask for an image caroussel on top of the home-page, or blocks where they can draw attention to specific things (I don't know the official term for them, but I call them attention blocks, I mean the sort of thing that is directly under the blue block on the top of the processwire.com-homepage about why clients love processwire). What is a good way to generate these things with processwire? In the case of the image caroussel, you would want to have multiple items where the home-page then loops through (much like it loops through the pages to generate a navigationmenu)... Link to comment Share on other sites More sharing options...
Jan Romero Posted January 16, 2022 Share Posted January 16, 2022 Hi Roy, welcome to ProcessWire! ProcessWire likes to remain “markup agnostic”, so it won’t really “generate” this sort of thing for you per se. This leaves you flexible to set up your site the way you deem best. For the carousel you would want to use a javascript solution such as Swiper.js or Slick.js. Whatever you choose will probably have its own expectation of what the markup should look like. On the ProcessWire side of things, it can be as simple as creating an multi-image field for your homepage template and uploading some pics. Outputting the markup for those images is very easy with PW, and PW will help you make sure the images are the right size, aspect ratio, compression and so on. It’s also great for managing further information about the images, such as textual descriptions, licensing info or links. Anyway, depending on your requirements, it obviously doesn’t have to be images from a multi-image field. ProcessWire makes it just as easy to have a carousel of each of your site’s subsection’s main image, or something. Or no images at all. The hard part then is making sure the javascript slider you chose interacts well with the rest of your site and works responsively. These frontend concerns are outside of ProcessWire’s scope. The other thing also depends greatly on your requirements. If you just want some testimonials on your homepage, you might use one of the multi fields (eg. the Repeater field). Editors will be able to add as many customer quotes as they like, and your site might randomly show some number of those. Again, ProcessWire’s role here is to help structure that data and make it accessible to your frontend code, but the HTML and CSS are up to you. Since you mentioned the ProcessWire homepage, I noticed each item has a link to some other part of the site for more information. There are plenty of ways to achieve this and you’ll have to pick the one that’s best for you and your client. ProcessWire’s homepage not only links to various pages but also to specific sections on those pages. Using the central repeater I suggested above, you might add a url field to the repeater and fill it accordingly. This gives you the most freedom: you can put anything in there, even an external link to Youtube. It’s also the worst user experience for your client, who now has to copy and paste stuff from the address bar around (it’s also error prone for this reason). Another option would be to use a page reference field. Now you’re bound to pages on your site and you can even control specifically which pages may be chosen. This will also enable you to select all pages that are referenced on the home page, if you ever need to. Pretty solid. An entirely different approach would be to store this information not on the home page at all, but on the detail pages themselves. You could have a couple of fields on every single page (“attentionblock_title”, “attentionblock_snippet”…) and if they’re filled, you show that page on the home page. It might even be a just checkbox. 5 Link to comment Share on other sites More sharing options...
_Roy_ Posted January 16, 2022 Author Share Posted January 16, 2022 Hi @Jan Romero, thank you for the extensive answer! Extremely helpfull! I am aware that ProcessWire does generate the HTML/JS-markup, that is exactly what I was looking for before I came across it ? I am testing the multi-image field, and for the use-case I come across a lot it is perfect, so thank you or that. I have found the example-code how to extract the info for the various images so I've managed to do that, but that did get me wondering what information I can use through the $page-variable in the template. I have done a (very rudementiry) print_r($page), but that seems to be incomplete somehow as it does not meniton the caroussel (which is how I named the field). Is there anyway to see what gets sent along in $page? Link to comment Share on other sites More sharing options...
Jan Romero Posted January 16, 2022 Share Posted January 16, 2022 25 minutes ago, _Roy_ said: Is there anyway to see what gets sent along in $page? Well, it depends on the page’s template. It will be all of this https://processwire.com/api/ref/page/ plus one property per field, so if the page has a template that contains your image field called “caroussel”, you can access the first image like this: $firstImage = $page->caroussel->first(). Now $firstImage will be an object of type PageImage. $page->caroussel is an object of type PageImages (which inherits from WireArray, which is where the first() method comes from). What properties and methods a Page object has also depends on hooks you (or a module) may have set up, and on whether the page uses a custom class. There are also special pages built into ProcessWire. It is often said that in ProcessWire everything is a Page, so for example users are special pages that have some extra functionality, as are repeater items. If you’re just getting into ProcessWire it’s helpful to keep this in mind and not mentally connect the Page class to frontend pages too much (for example you may want to create pages just to hold some data, but with no accessible URL of their own). Btw afaik the spelling in English is carousel, so if you’re giving your fields English names you might want to fix that before it’s all over your codebase ? Link to comment Share on other sites More sharing options...
_Roy_ Posted January 16, 2022 Author Share Posted January 16, 2022 Ah, great! a bit weird that print_r does not show everything, but it's good that I can look at it in the Docs here. This was just a fast test, I'm clicking all kinds of things at the moment to test it all out. This installation is getting deleted for sure since it is bound to get messed up at some point. But yeah: English is not my native language ? Link to comment Share on other sites More sharing options...
pwired Posted January 17, 2022 Share Posted January 17, 2022 Hi Jan Romero, Thanks for posting about swiper.js - really stands out from the usual carousel/sliders 1 Link to comment Share on other sites More sharing options...
bernhard Posted January 17, 2022 Share Posted January 17, 2022 Hi and welcome to the forum / PW ? On 1/16/2022 at 7:33 PM, _Roy_ said: Ah, great! a bit weird that print_r does not show everything, but it's good that I can look at it in the Docs here. Have a look at https://processwire.com/modules/tracy-debugger/ that makes your life a lot easier! Link to comment Share on other sites More sharing options...
_Roy_ Posted January 22, 2022 Author Share Posted January 22, 2022 Hi @bernhard, thanks for the tip! That sure is an extremely usefull module to have during the building-phase! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now