Jump to content
Mark

Cheeky Request regarding Site Profiles

Recommended Posts

Hi, 

I'm currently working out PW a line at a time by pulling apart each Site Profile found in the Modules section, referring to the cheat sheet and the great help docs. Thanks Ryan, Joss, Martijn-geerts and Soma

 

I would love to see more Site Profiles uploaded!  I'm being cheeky here, but are there any more users that would like to share their creations? 

Thanks in advance.

Sorry, I have just noticed I posted this request in the wrong section. It should of gone in the Modules/Plugins! 

Edited by Mark
  • Like 4

Share this post


Link to post
Share on other sites

Wow, thanks horst, that's amazing. I love your graphical overview and video too. I will try it out next week. 

  • Like 1

Share this post


Link to post
Share on other sites

... I love your graphical overview ...

 

Is made with FreeMind!

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for the link. I've been looking for free mind mapping software for a while now.

Nearly purchased a mind map Chrome/Googledrive extension but Freemind looks the ticket! Cheers.

  • Like 1

Share this post


Link to post
Share on other sites

 Hi Apeisa, I am just realizing how amazing PW actually is. (I'm a little slow at times ??? )!! Ryan has done a great job.

I guess I'm curious to find out how the experts do it! Because PW is so flexible there are so many solutions. The post started by Soma was an interesting read. http://processwire.com/talk/topic/740-a-different-way-of-using-templates-delegate-approach/. Has anyone changed their workflow since the thread was started in 2011?

I would be very interested to see how a page eg. template from Foundation 4 (http://foundation.zurb.com/page-templates4/workspace.html) could be tackled by a couple of members. 

  • Like 1

Share this post


Link to post
Share on other sites

Hi, yes. If possible use foundation starter template (http://foundation.zurb.com/templates.php) then export as a site profile. 

I have seen Bootwire made by Joss, Its a brilliant profile. I'm thinking about the alternative possibilities explained in the thread - "A different way of using templates / delegate approach"

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for the link. I've been looking for free mind mapping software for a while now.

Nearly purchased a mind map Chrome/Googledrive extension but Freemind looks the ticket! Cheers.

I've been using Freemind for a while now. I highly recommend it and couldn't work without it now.

Hi, 

I'm currently working out PW a line at a time by pulling apart each Site Profile found in the Modules section, referring to the cheat sheet and the great help docs. Thanks Ryan, Joss, Martijn-geerts and Soma

 

I would love to see more Site Profiles uploaded!  I'm being cheeky here, but are there any more users that would like to share their creations? 

Thanks in advance.

Sorry, I have just noticed I posted this request in the wrong section. It should of gone in the Modules/Plugins! 

I think you mean Themes and Profiles rather than Modules/Plugins

Share this post


Link to post
Share on other sites

 I would be very interested to see how a page eg. template from Foundation 4 (http://foundation.zurb.com/page-templates4/workspace.html) could be tackled by a couple of members. 

I think I have done just that :) I've been using Foundation for a while now and really am amazed at how well it flows.

There are a total of 13 template pages: banded, bannerhome, blog, contact, feed, grid, marketing, orbithome, realty, sidebar, soboxy, store, workspace.

I was able to add those to a default ProcessWire install. I've been on these forums for months, really just taking my sweet time reading as much as I can about How-To-Do-This and How-To-Do-That. I have yet to actually use PW on a project site.

I swapped out all the placehold.it tags and replaced them with holder.js

https://github.com/imsky/holder

I'd like to share what I have but I really just wanna do a few more things with it before I do.

  • Like 2

Share this post


Link to post
Share on other sites

Hi OrganizedFellow,

the Foundation project you are working on sounds great. Thank you very much for sharing, I can't wait to try it out.

  • Like 1

Share this post


Link to post
Share on other sites

Hi OrganizedFellow,

the Foundation project you are working on sounds great. Thank you very much for sharing, I can't wait to try it out.

I just had another project popup. But the last thing I want to do with my PWFoundation project is to convert the default install to Foundation and make it fully responsive. After I have that done, I'll throw it up on my github for others to check out.

  • Like 1

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By rushy
      I'm trying to migrate a PW site on my local dev server to a shared hosted server and have used the ProcessExportProfile module to export a profile as a zip file. So far so good. I then deploy new install of PW on the server by unzipping the PW installation files but I do not run the install until I have replaced the various site profiles with the files from the exported profile. So basically:
      In the PW install files I delete all the site-* folders except site-default. This one I overwrite with  the export profile folders so it contains my assets, install, modules and templates folders together with the exported config.php
      I then run the install in the browser in the normal way and it starts the installation and I can see my website profile in the list and I select it. It proceeds as normal and gets to setting up the database. I provide the db info. as usual and it proceeds as far the info. below and 'hangs' at this point , it never goes on to setup the PW login admin. and complete the install I am left at that screen.  
      If I relaunch the browser at the site it all seems to work! BUT I have no admin login to PW so cannot get into the backend. 
      I have basically followed the Installation, Moving and Troubleshooting guide by Joss Sanglier: http://processwire.com/docs/tutorials/installation-moving-and-troubleshooting/page4
      Any idea where I could check for an error log or some help as I am at a loss as to the problem. 
      Many thanks. Paul
      ProcessWire 3.x Installer
       Test Database and Save Configuration
       Database connection successful to pinpoin1_master
       Saved configuration to ./site/config.php
       Profile Import
       Imported database file: ./wire/core/install.sql
       Imported database file: ./site/install/install.sql
    • By MoritzLost
      Writing reusable markup generation functions
      Hello there, I've been working with ProcessWire for a while now, and I've been writing some helper functions to generate markup and reduce the amount of repetitive code in my templates. In this tutorial I want to explain how to write small, reusable functions and combine them to accomplish bigger tasks. Note that this is the follow-up to my last post, Building a reusable function to generate responsive images. In that tutorial, I demonstrated a pretty large function that generates multiple image variations for responsive images, as well as the corresponding markup. In this post, I'll split this function into multiple smaller functions that can be utilized for other purposes as well. This will be more beginner-orientated than the last one, I hope there's some interest in this anyway 🙂
      Note that for my purposes, I prefer to have those functions as static methods on a namespaced object, so the following code examples will be placed in a simple Html class. However, you can use those as normal functions just as well.
      class Html { // code goes here } Edit: Those functions use some syntax exclusive to PHP 7.1 and above, they won't work in PHP 7.0 and lower. Thanks for @Robin S for pointing that out.
      Seperation of concerns
      To split up the original function, we need to analyze all the individual tasks it performs:
      Generate several image variations in different sizes. Generate the corresponding srcset attribute markup according to the specification. Generate the sizes attribute markup based on the passed queries. Automatically include the description as the alt attribute. Generate the markup for all attributes (including the ones passed to the function). Generate the markup for the complete img tag. The first three of those tasks are very specifically concerned with generating responsive images. Generating the alt attribute is relevant to any img tag, not just responsive images. Finally, generating the attributes and HTML markup is relevant to all HTML markup that one wants to generate. Therefore, this is how a hierarchy between those functions could look like.
      Generate responsive image Generate image markup Generate any HTML tag markup Generate an HTML start tag Generate HTML attributes markup Generate an HTML end tag Those bullet points are the tasks I want to turn into individual functions, each accepting arguments as general as they can be, facilitating code reuse. I'll start writing those out from the ground up.
      Generating attributes markup
      HTML attributes are a list of property-value pairs, where the value is wrapped in quotation marks (") and assigned to the property with an equals-sign (=). Each pair is separated by a space. There are also standalone/empty attributes that don't have a value, for example:
      <input id="name" class="form-control" disabled> Since the input format consists of key-value pairs, it makes sense to use an associative array as the argument to the attributes functions.
      public static function attributes( array $attributes ): string { $attr_string = ''; foreach ($attributes as $attr => $val) { $attr_string .= ' ' . $attr . '="' . $val . '"'; } return $attr_string; } However, this still needs to support standalone attributes. Those attributes are also known as boolean attributes, since their presence indicates a true value, their absence the opposite. Since all other values in the markup are strings or integers, we can differentiate between those based on the type of the value in the associative array. If it's a boolean, we'll treat it as a standalone attribute and only include it if the value is also true.
      public static function attributes( array $attributes, bool $leading_space = false ): string { $attr_string = ''; foreach ($attributes as $attr => $val) { if (is_bool($val)) { if ($val) { $attr_string .= " $attr"; } } else { $attr_string .= ' ' . $attr . '="' . $val . '"'; } } if (!$leading_space) { $attr_string = ltrim($attr_string, ' '); } return $attr_string; } Of course, this means that if a value in the array is boolean false, this array item will be left out. This is by design, as it allows the caller to use expressions in the array declaration. For example:
      echo Html::attributes([ 'id' => 'name', 'class' => 'form-control', 'disabled' => $this->isDisabled() ]); This way, if isDisabled returns true, the disabled attribute will be included, and left out if it doesn't.
      Note that I also included a $leading_space argument for convenience.
      Generating start tags, end tags and complete HTML elements
      The start tag is identified by the element name and the attributes it contains. The end tag only needs a name. Those functions are trivial:
      public static function startTag( string $element, ?array $attributes = [] ): string { $attribute_string = self::attributes($attributes, true); return "<{$element}{$attribute_string}>"; } public static function endTag(string $element): string { return "</{$element}>"; } Of course, the startTag function builds on the existing function to generate the attributes. Note that a start tag is identical with a standalone tag (i.e. a void HTML element such as the img tag).
      At this point, it's also trivial to write a function that builds a complete element, including start and end tag as well as the enclosed content.
      public static function element( string $element, ?string $content = null, array $attributes = [], $self_closing = false ): string { if ($self_closing) { return self::startTag($element, $attributes); } else { return self::startTag($element, $attributes) . $content . self::endTag($element); } } Note that while this function does take several arguments, all except the first have reasonable default values, so usually the caller will only have to pass two or three of them. Some examples:
      echo Html::startTag('hr'); // <hr> echo Html::element('a', 'My website', ['href' => 'http://herebedragons.world']); // <a href="http://herebedragons.world">My website</a> Image tags
      Those functions make for a solid foundation to build any type of HTML element markup. Based on the type, the functions can accept more specific arguments to be easier to use. For example, the previous link example could be simplified by writing a link function that accepts a link text and an href value, since those are needed for any link:
      public static function link( string $url, ?string $text = null, array $attributes = [] ): string { // use url as text if no text was passed $text = $text ?? $url; $attributes['href'] = $url; return self::element('a', $text, $attributes); } Anyway, for our image markup function, we'll take a Pageimage object as an argument instead, since most images we will use in a ProcessWire template will come from the ProcessWire API. Since all ProcessWire image fields have a description field by default, we can use that description as the alt attribute, which is good practice for accessibility.
      public static function image(Pageimage $img, array $attributes = []): string { $attributes['src'] = $img->url(); // use image description as alt text, unless specified in $attributes if (empty($attributes['alt']) && !empty($img->description())) { $attributes['alt'] = $img->description(); } return self::selfClosingElement('img', $attributes); } Pretty simple. Note that the alt attribute can still be manually overridden by the caller by including it in the $attributes array.
      Responsive images
      Now, the responsive image function can be shortened by building on this function in turn. Optimally, the three distinct tasks this performs (see above) should be separated into their own functions as well, however in practice I haven't seen much need for this. Also, this post is plenty long already, so ...
      public static function imageResponsive( Pageimage $img, ?int $standard_width = 0, ?int $standard_height = 0, ?array $attributes = [], ?array $sizes_queries = [], array $variant_factors = [0.25, 0.5, 0.75, 1, 1.5, 2] ): string { // use inherit dimensions of the passed image if standard width/height is empty if (empty($standard_width)) { $standard_width = $img->width(); } if (empty($standard_height)) { $standard_height = $img->height(); } $suffix = 'auto_srcset'; // if $attributes is null, default to an empty array $attributes = $attributes ?? []; // get original image for resizing $original_image = $img->getOriginal() ?? $img; // the default image for the src attribute $default_image = $original_image->size( $standard_width, $standard_height, ['upscaling' => false, 'suffix' => $suffix] ); // build the srcset attribute string, and generate the corresponding widths $srcset = []; foreach ($variant_factors as $factor) { // round up, srcset doesn't allow fractions $width = ceil($standard_width * $factor); $height = ceil($standard_height * $factor); // we won't upscale images if ($width <= $original_image->width() && $height <= $original_image->height()) { $current_image = $original_image->size($width, $height, ['upscaling' => false, 'suffix' => $suffix]); $srcset[] = $current_image->url() . " {$width}w"; } } $attributes['srcset'] = implode(', ', $srcset); // build the sizes attribute string if ($sizes_queries) { $attributes['sizes'] = implode(', ', $sizes_queries); } return self::image($default_image, $attributes); } See my last post for details. Since then, I made some changed to the function I outlined here (thanks to @horst for pointing out some pitfalls with my approach). Most notably:
      The generated images now include a prefix so they can be removed by a cleanup script more easily. The function now accepts a width and a height parameter so that the aspect ratio of the generated images is fixed (reasons for this change are explained here). To get the original functionality back, I also wrote two helper functions that takes only a width/height and fill in the missing parameter based on the aspect ratio of the passed image. The helper functions look like this:
      public static function imageResponsiveByWidth( Pageimage $img, ?int $standard_width = 0, ?array $attributes = [], ?array $sizes_queries = [], array $variant_factors = [0.25, 0.5, 0.75, 1, 1.5, 2] ): string { // automatically fill the height parameter based // on the aspect ratio of the passed image if (empty($standard_width)) { $standard_width = $img->width(); } $factor = $img->height() / $img->width(); $standard_height = ceil($factor * $standard_width); return self::imageResponsive( $img, $standard_width, $standard_height, $attributes, $sizes_queries, $variant_factors ); } Conclusion
      This approach was born out of necessity, since pure PHP templating makes for some messy code. Of course, another approach would be to use a template engine in the first place. However, I didn't want the overhead of installing Twig or Blades for my smaller projects, so for those small to medium-sized projects, I found some helper functions to generate markup and clean up my code to be a helpful addition.
      A small disclaimer, I update those functions pretty frequently while developing with ProcessWire, so it's possible some errors made their way into the versions I posted here that I haven't discovered yet. If you want to use some of the included code in your own projects, make sure to properly test it.
      I'm also working on a small library including those and some other helpers I wrote, I'll post a Github link once it's in a usable stage.
      So this post got way longer than I intended, I hope that some of you still made your way through it and enjoyed it a bit 🙂 If you see some problems or possible improvements to those methods and the general approach, I'd be happy to hear them!
      Complete code for reference
      <?php use \Processwire\Pageimage; class Html { /** * Build a simple element tag with the passed element. * * @param string $element The element/tag name as a string. * @param ?string $content The content of the element (what goes between the tags). * @param ?array $attributes Optional attributes for the element. * @param boolean $self_closing Whether the element is self-closing (i.e. no end tag). $content is ignored if true. * @return string The HTML element markup. */ public static function element( string $element, ?string $content = null, array $attributes = [], $self_closing = false ): string { if ($self_closing) { return self::startTag($element, $attributes); } else { return self::startTag($element, $attributes) . $content . self::endTag($element); } } /** * Builds a start tag for an element (or a self-closing/void element). * * @param string $element * @param array $attributes * @return string The HTML start tag markup. */ public static function startTag( string $element, ?array $attributes = [] ): string { $attribute_string = self::attributes($attributes, true); return "<{$element}{$attribute_string}>"; } /** * Build an end tag for an element. * * @param string $element The HTML end tag markup. * @return void */ public static function endTag(string $element): string { return "</{$element}>"; } /** * Build an HTML attribute string from an array of attributes. Attributes set * to (bool) true will be included as standalone (no attribute value) and left * out if set to (bool) false. * * @param array $attributes Attributes in attribute => value form. * @param bool $leading_space Whether to include a leading space in the attribute string. * @return string The attributes as html markup. */ public static function attributes( array $attributes, bool $leading_space = false ): string { $attr_string = ''; foreach ($attributes as $attr => $val) { if (is_bool($val)) { if ($val) { $attr_string .= " $attr"; } } else { $attr_string .= ' ' . $attr . '="' . $val . '"'; } } if (!$leading_space) { $attr_string = ltrim($attr_string, ' '); } return $attr_string; } /** * Image Functions. */ /** * Build a simple image tag from a Processwire Pageimage object. * * @param Pageimage $img The image to use. * @param array $attributes Optional attributes for the element. * @return string */ public static function image(Pageimage $img, array $attributes = []): string { $attributes['src'] = $img->url(); // use image description as alt text, unless specified in $attributes if (empty($attributes['alt']) && !empty($img->description())) { $attributes['alt'] = $img->description(); } return self::selfClosingElement('img', $attributes); } /** * Builds a responsive image element including different resolutions * of the passed image and optionally a sizes attribute build from * the passed queries. * * @param Pageimage $img The base image. Must be passed in the largest size available. * @param int|null $standard_width The standard width for the generated image. Use NULL to use the inherent size of the passed image. * @param int|null $standard_height The standard height for the generated image. Use NULL to use the inherent size of the passed image. * @param array|null $attributes Optional array of html attributes. * @param array|null $sizes_queries The full queries and sizes for the sizes attribute. * @param array|null $variant_factors The multiplication factors for the alternate resolutions. * @return string */ public static function imageResponsive( Pageimage $img, ?int $standard_width = 0, ?int $standard_height = 0, ?array $attributes = [], ?array $sizes_queries = [], array $variant_factors = [0.25, 0.5, 0.75, 1, 1.5, 2] ): string { // use inherit dimensions of the passed image if standard width/height is empty if (empty($standard_width)) { $standard_width = $img->width(); } if (empty($standard_height)) { $standard_height = $img->height(); } $suffix = 'auto_srcset'; // if $attributes is null, default to an empty array $attributes = $attributes ?? []; // get original image for resizing $original_image = $img->getOriginal() ?? $img; // the default image for the src attribute $default_image = $original_image->size( $standard_width, $standard_height, ['upscaling' => false, 'suffix' => $suffix] ); // build the srcset attribute string, and generate the corresponding widths $srcset = []; foreach ($variant_factors as $factor) { // round up, srcset doesn't allow fractions $width = ceil($standard_width * $factor); $height = ceil($standard_height * $factor); // we won't upscale images if ($width <= $original_image->width() && $height <= $original_image->height()) { $current_image = $original_image->size($width, $height, ['upscaling' => false, 'suffix' => $suffix]); $srcset[] = $current_image->url() . " {$width}w"; } } $attributes['srcset'] = implode(', ', $srcset); // build the sizes attribute string if ($sizes_queries) { $attributes['sizes'] = implode(', ', $sizes_queries); } return self::image($default_image, $attributes); } /** * Shortcut for the responsiveImage function that only takes a width parameter. * Height is automatically generated based on the aspect ratio of the passed image. * * @param Pageimage $img The base image. Must be passed in the largest size available. * @param int|null $standard_width The standard width for this image. Use NULL to use the inherent size of the passed image. * @param array|null $attributes Optional array of html attributes. * @param array|null $sizes_queries The full queries and sizes for the sizes attribute. * @param array|null $variant_factors The multiplication factors for the alternate resolutions. * @return string */ public static function imageResponsiveByWidth( Pageimage $img, ?int $standard_width = 0, ?array $attributes = [], ?array $sizes_queries = [], array $variant_factors = [0.25, 0.5, 0.75, 1, 1.5, 2] ): string { // automatically fill the height parameter based // on the aspect ratio of the passed image if (empty($standard_width)) { $standard_width = $img->width(); } $factor = $img->height() / $img->width(); $standard_height = ceil($factor * $standard_width); return self::imageResponsive( $img, $standard_width, $standard_height, $attributes, $sizes_queries, $variant_factors ); } /** * Shortcut for the responsiveImage function that only takes a height parameter. * Width is automatically generated based on the aspect ratio of the passed image. * * @param Pageimage $img The base image. Must be passed in the largest size available. * @param int|null $standard_height The standard height for this image. Use NULL to use the inherent size of the passed image. * @param array|null $attributes Optional array of html attributes. * @param array|null $sizes_queries The full queries and sizes for the sizes attribute. * @param array|null $variant_factors The multiplication factors for the alternate resolutions. * @return string */ public static function imageResponsiveByHeight( Pageimage $img, ?int $standard_height = 0, ?array $attributes = [], ?array $sizes_queries = [], array $variant_factors = [0.25, 0.5, 0.75, 1, 1.5, 2] ): string { // automatically fill the width parameter based // on the aspect ratio of the passed image if (empty($standard_height)) { $standard_height = $img->height(); } $factor = $img->width() / $img->height(); $standard_width = ceil($factor * $standard_height); return self::imageResponsive( $img, $standard_width, $standard_height, $attributes, $sizes_queries, $variant_factors ); } }  
    • By rafaoski
      You can download and test from this address:  GITHUB-SITE-BS4 and this MODULES - SITE-BS4
      And I add a screenshot:

       
    • By EyeDentify
      Simple example for loading template specific CSS file.
      This example asumes that you have your CSS file in a directory relative to template root.
      Like:
      templates/css/my_template_specific.css
      Also i use in the template a simple text field to hold the name of the CSS file i want to load.
      I call this field 'css_file'
      Use what you feel comfortable with.
      So in your header section of the DOM notice the "page specific CSS" part?
      Thats were the magic happens. What happens is that we check to see if the file exists in the CSS dir relative to template root.
      And if it does we load it. Simple and effective.
      I load all other CSS that is used all over the site in global_styles.css first.
      And make sure you load template specific last, because then you can easily override CSS in global.
       
      DOM header example:
      <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><?PHP echo($page->title); ?></title> <!-- main CSS --> <link rel="stylesheet" href="<?PHP echo($config->urls->templates); ?>css/global_styles.css"> <!-- page specific CSS --> <?PHP /* Use relative path in file_exists() */ if(file_exists('css/' . $page->css_file)) { echo("<link rel=\"stylesheet\" href=\"{$config->urls->templates}css/{$page->css_file}\">"); } ?> </head> <body> Thats my way of doing it. I am sure there is plenty of more ways to do it. This is for the newbies or anyone that wants more options.
      Good luck with your CSS out there in Cyberspace.
      Cheers from EyeDentify
    • By thetuningspoon
      Podcast Profile
      Github: https://github.com/thetuningspoon/PodcastProfile
      Direct Download: https://github.com/thetuningspoon/PodcastProfile/archive/master.zip
      Manage your podcasting with ProcessWire! The Podcast Profile is a fully featured iTunes podcast publishing platform built using nothing more than ProcessWire's basic fields/templates/pages system. Automatically generates an XML feed for submission to iTunes. 
      Fully implements the iTunes podcasting specification (https://www.apple.com/itunes/podcasts/specs.html) and supports managing an unlimited number of podcasts and episodes from the same installation. Accommodates both on-site and off-site file hosting.   Get it here: http://modules.processwire.com/modules/podcast-profile/     Instructions   1. Upload a fresh copy of ProcessWire to your server.   2. Extract the PodcastProfile-master folder from the zip file to the root directory of the new installation.    3. Rename the folder to site-PodcastProfile <- IMPORTANT!   4. Install ProcessWire as usual. When asked to select a site profile, choose "Podcast Profile".   5. Once installed, you can add a new Podcast via the "Add New" menu in the upper right portion of the admin panel.   6. Fill out the podcast details and then begin adding episodes under the podcast page, or via the "Add New" menu.   7. The XML file for each podcast is generated at http://www.yoursite.com/podcast-name/ (The url of the podcast page)   8. Use this URL to submit the podcast to iTunes at https://buy.itunes.apple.com/WebObjects/MZFinance.woa/wa/publishPodcast


×
×
  • Create New...