Jump to content

Leaderboard

Popular Content

Showing content with the highest reputation on 11/24/2014 in all areas

  1. netcarver
    Markup Cross-Fade On Github. In the Module Repository. Thanks to the good people at Lightning.pw for hosting the demo for free! Demo no longer available. A full-screen cross-fading background animation module with optional, per-slide, overlay text. It's based on an article by Mary Lou over on codrops. Here's the home.php template code for the entire site... <?php $cf = wire('modules')->get('MarkupCrossfade'); $settings = array( 'pages' => wire('pages')->get("template=slides")->children(), 'title_xforms' => "scale(1.0) translateY(300px)\nscale(1.0)\nscale(1.0)\ntranslateY(300px)", ); ?><html lang="en"> <head> <meta charset="utf-8"> <title>MarkupCrossfade Demo</title> <style> @font-face { font-family: 'BebasNeueRegular'; src: url('<?php echo wire('config')->urls->assets; ?>fonts/BebasNeue-webfont.eot'); src: url('<?php echo wire('config')->urls->assets; ?>fonts/BebasNeue-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } body { background-color: #333; overflow-x: hidden; padding: 0; border: 0; margin: 0; } <?php echo $cf->renderCss($settings); ?> .markup-crossfade li div h3 { font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 80px; letter-spacing: 2px; } </style> </head> <body> <?php echo $cf->renderHtml($settings); ?> </body> </html> The only other work involved was adding a 'slides' and a 'slide' template ('slides' having children of template 'slide') and adding an image field called 'image' (NB. not "images"), a text/textarea called 'body' and a required integer field called 'duration' to the slide template. Add a parent to the page tree called 'slides' using template 'slides' and add as many manually sorted children as you need, setting the image, body text and duration for each. After that, the only thing left to do was to upload BebasNeue from fontsquirrel to 'assets/fonts'. That's it. There are a number of parameters you can configure and pass in to the render methods. Here's the list of settings and their defaults taken straight from the source code... array( 'pages' => $pages, // WireArray of pages defining the slides of the slideshow. 'duration_field' => 'duration', // Field of the slide page that provides the duration (in seconds) 'overlay_field' => 'body', // Field of the slide page that provides the overlay text 'image_field' => 'image', // Field of the slide page that provides the image (url) 'title_xform_field' => '', // Textarea field of the slide page that provides the title transformations 'image_xform_field' => '', // Textarea field of the slide page that provides the image transformations 'title_xforms' => '', // Default title transformations - one per line (\n separator please) - leave blank for none. 'image_xforms' => '', // Default image transformations - one per line (\n separator please) - leave blank for none. 'html_class' => 'markup-crossfade', // What class to apply to the owning list 'z_index' => '-10', // z-index of slideshow container and its spans 'li_id' => 'slide_', // What id to use for each slide. The slide # will be appended to this 'browsers' => array( // Array of browsers extensions to render CSS for '', '-webkit-', '-moz-', '-o-', '-ms-' ), 'skip_css' => false, // only generate the keyframes, don't output a modified copy of the module's static css file. 'mask_image' => '', // location of mask image relative to the site root. Leave blank if none. ); In order to use per-slide image and/or title transformations you need to add either one or two textarea fields to your slide templates. Each textarea should have a maximum of five lines of text. Each line of text is used to define the transformation(s) applied at each of the 5 stages of the animation that gets generated. The following (used for the global title animation on the demo site)... scale(1.0) translateY(300px) scale(1.0) scale(1.0) translateY(300px) ...defines the start keyframe with the title scaled at 1.0 and translated along the Y axis by 300px. The next keyframe is not translated so the browser animates it up into the visible area. It stays there in the next frame and is animated back out in the fourth frame. The skip_css setting lets the renderCss() method know if it should include its default css scaffolding file (included with the module) in the output. If set to true, only the CSS for the actual animations is output and you'll have to supply your own scaffolding CSS in your page templates. Whilst this works great in Chrome on linux, could you let me know what the experience is like for you on your OS/Browser combination. Thank you!
    8 points
  2. horst
    Pia - Pageimage Assistant Hello, today I can tell you that Pia Ballerina want to assist you with Pageimages and that can become really helpful! . . . Pia, in its current state, version 1.0.0, provides: a GUI (the module config screen) for quick and easy changes to the sitewide Pageimage default options an alternative way for calling the Pageimage resizing methods with PW selector strings three new methods as shortcuts to the resizing functions a new method called retinafy and its alias hiDPI, (introduced in version 0.2.0) . . . 2) Instead of ->width(), ->height(), ->size() you can call ->pia() now. With a PW selector string you tell Pia what image variation you want to have : . $image->pia("width=100, quality=80, sharpening=medium")->url; . If you want process ->width() just define width. If you want process ->height() only define height. If you want process ->size() just define width and height. If you want process ->size() with equal values for width and height, just define only size, or use the alias square: . $image->pia("width=480")->url; $image->pia("height=320")->url; $image->pia("width=400, height=300")->url; $image->pia("size=350")->url; $image->pia("square=350")->url; . So, yes, - I see. Now you may think: "Ok, nice looking girl, - and she can dance very well, - but for what should it be good that she is involved here? My very old buddies width, height and size - and me, - we don't need any Ballerinas between us!" . Yeah, I see what you mean. But this above is not what Pia is good for, this is just a little warming up for you. . In some cases one need to specify more than just width and / or height. If it comes to that you need explicitly populated options with the individual pageimages, Pia will become faster and more comfortable at some point. Also the code is looking more readable with Pia, at least to me: . // regular style #1: $image->width(800, array("upscaling" => false, "cropping" => true, "quality" => 80, "sharpening" => "strong")); // or regular style #2: $options = array("upscaling" => false, "cropping" => true, "quality" => 80, "sharpening" => "strong"); $image->width(800, $options); // now lets Pia dance: $image->pia('width=800, upscaling=0, cropping=1, quality=80, sharpening=strong'); $image->pia('width=800, upscaling=off, cropping=on, quality=80, sharpening=strong'); . For me it is that not only Pia begin to dance, my fingers do so too when writing selector strings instead of the regular array code. . Ok, last thing before we can go to stage: "You already may have noticed that Pia accepts few different values for boolean expression, yes?" for TRUE you can write these strings: "1, on, ON, true, TRUE, -1" for FALSE you may use one out of "0, off, OFF, false, FALSE" Ready? Ok, lets go to stage. . . . 3) Pia provide three new methods as shortcuts. This means that when using one of the shortcuts you have pre-populated options, regardless of the sitewide default settings: crop :: does what the name says contain :: is equal to the regular method: ->size($width, $height, array("cropping" => false)) cover :: this, Pias third child, is a new kid on the block . Let's have a closer look and compare it. We use Pias image from above as source for this example. (It's dimensions are 289 x 400 px) . . * crop $image->crop('square=100'); . it is 100 x 100 px and the name is: pia-ballerina_titel.100x100-piacrop.jpg . . . * contain $image->contain('square=100'); . it is 73 x 100 px and the name is: pia-ballerina_titel.100x100-piacontain.jpg . . . * cover $image->cover('square=100'); . it is 100 x 139 px and the name is: pia-ballerina_titel.100x139-piacover.jpg . . . Ok, you got it? . "Crop" crop out the area, "Contain" fits the image into the area, and "Cover" calculates the needed dimensions for the image so that the area is completly covered by it. . Following is a link with lots of those crop-, contain-, cover- variations. I have stress-tested it a bit: much variations . ---------- . . Later Additions: . * contain with option weighten Since version 0.0.6 contain can take an additional param called "weighten". (read more here) . . . * retinafy Since version 0.2.0 retinafy is added. It returns a markup string, e.g. a HTML img tag, where placeholders are populated with property values from the pageimage. Default properties are: URL, WIDTH, HEIGHT, DESCRIPTION. The method also can take an optional array with CustomPropertyNames. You also can use the alias HiDPI if you like. (read more here) . . ---------- . . You can get the module from the modules directory or from the repo on Github: . git clone https://github.com/horst-n/PageimageAssistant.git your/path/site/modules/PageimageAssistant . . Bye! . Classical ballet performance at the Aalto Theatre in Essen, in the context of the Red Dot Award ceremony 26 June 2007, Act III, Sleeping Beauty, the wedding reception Photos: Horst Nogajski - www.nogajski.de
    5 points
  3. Martijn Geerts
    I always start with the data part. Paper & pen. (maybe most important step) Draw site tree. Assign templates to site tree Per template write down where the data comes from. from fields from relations services etc. Build all needed fields Create all templates and assign the fields (Don't specify the family settings, don't set no fields required) Create basic page structure Go back to each template, and specify family settings and set some fields required. ppfff, your data structure is ready. Template level: Build a view file ( I always use some kind of delegate solution ) Add menu structure, and edit links. ( Not able to navigate on front-end is hugely annoying ) Start other stuff, no predefined order, really depends on project and where the data comes from.
    5 points
  4. horst
    Image Animated GIF v 2.0.2 Module for PW 2.5 stable or newer, but is obsolete for PW Versions greater then 3.0.89 (... read more ...) This module helps with resizing and cropping of animated GIFs when using the GD-Library. The GD-Library does not support this. This module is completely based upon the fantastic work of László Zsidi (http://www.gifs.hu/, builts the initial classes) xurei (https://github.com/xurei/GIFDecoder_optimized, enhanced the classes) I have ported it to a PW module and it works with core imagefields, together with Pia and with CropImagefields that uses the new naming scheme since PW 2.5. ------------------------------------------------------------------------------------------------------------------------------------------ read more in this post about the rewrite from version 1.0.0 to version 2.0.0 ------------------------------------------------------------------------------------------------------------------------------------------ You can find it in the modules directory: https://modules.processwire.com/modules/image-animated-gif/ and on Github: https://github.com/horst-n/ImageAnimatedGif ------ A preview can be found here
    4 points
  5. Peter Knight
    There are usually 2 menu types on most sites. Let me generalise here a bit. You've got the top navigation which tends to be global. It's on every page and usually accompanies the company logo. Then you've got the side navigation which is contextual or based on the section the user is currently within. I'm assuming you're asking how you your client can pick which links / pages are used on the top navigation? Create a field called top_navigation or something meaningful to you and your clients Set it to Type=Page type (Basics Tab) Make it Multiple Pages (Details Tab) Assign it PageListMultipleSelect+ win the Input field type (Input tab) Finally, associate this naviagtion field with a template. You can just assign it to the homepage or you could create a new page called Site Settings or Navigation. Just tell your client this is the place to manage their top menu. Here's a screengrab of how it should look.
    4 points
  6. Macrura
    @MarcinP - i don't see any problem with this, and you can always use the alternate template filename to limit the # of actual file templates you need to create... my philosophy is that I create as many of those family type relations templates as necessary; I don't think it really affects anything...
    4 points
  7. Soma
    Just committed little update - added support for adding custom services via site config - some minor fixes and improvements - added config for what fields module searched on {title} and {text} placeholder fields - added placeholder field „media“ => pinterest - added services tumblr, reddit (off by default) and pinterest (off by default) - updated themes with {themeUrl} - updated readme
    4 points
  8. Macrura
    Part II: Using a Profields Table [Note: this part requires you to own ProFields] 1.) Setup a field of type table for settings, I call it settings_table. It will have 2 columns, setting and value 2.) add it to your template (example would be if you had a settings template). 3.) Add some settings.. | site_title | My Great Site | |------------|-------------------------| | phone | (666) 777-8888 | |------------|-------------------------| | slogan | Tulips Rule | |------------|-------------------------| | facebook | http://www.facebook.com | 3.) Place this code in your _init.php or wherever you have global stuff.. replace the page number with the appropriate page number: $settings_table = $pages->get(1020)->settings_table; foreach($settings_table as $row) { ${$row->setting} = $row->value; } now you can do this: echo $site_title echo $phone echo $slogan echo $facebook - - - ...and one might wonder, what is to prevent a client from inadvertently changing the setting name or even deleting a critical setting and consequently breaking their site? with some jQuery, and the help of admin custom files (courtesy of martijn-geerts) you can disable any existing setting name from being edited. or deleted; add this to your AdminCustomFiles/ProcessPageEdit.js file: $(function(){ $('li.Inputfield_settings_table tr').each(function(){ setting = $(this).find('input[name*="_setting"]'); value = $(this).find('input[name*="_value"]').val(); icon = $(this).find('i.InputfieldTableRowDeleteLink'); if(value) { setting.addClass("disabled").attr('readonly', true); icon.removeClass("InputfieldTableRowDeleteLink fa-trash-o").addClass("fa-lock"); } }); }); this does assume that the table is named settings_table, the setting column is named "setting" and the value column is named "value". you can also add this to your AdminCustomFiles/ProcessPageEdit.css li.Inputfield_settings_table tr input.disabled { background-color: #e8e5e5 !important; color: #949494!important; } Here is a screenshot of this in action: Edit: added instructions to protect the settings names, prevent deletion, and change the color to differentiate the field status.
    3 points
  9. Joss
    I suggest that whatever you do you stay away from any fixed scaffolding framework. The point of ProcessWire is that people can use whatever layout structure they want. For instance, many like Bootstrap and Foundation as complete solutions, but many others find them large and cumbersome and too limited. If you have a large framework with lots of JS and CSS and then people want different JS for different slideshows or product display and so on, you can end up with an inflated beast. So, I would suggest you stick to the functionality in a very agnostic way and make sure it is done in such a way that people can create the template files it as they wish.
    3 points
  10. Macrura
    Needed to show someone how to quickly setup some settings for various things in a simple text area: could be used for slider settings, site settings, etc; What it does: gives you a matching variable for each key of each line... 1.) setup a textarea field for the settings ; i'm calling it settings_ta 2.) add delimited settings, 1 per line; i use a pipe (|) delimiter; example: address|some info here facebook|https://www.facebook.com twitter|https://twitter.com phone|(999) 999-9999 3.) in your _init.php, get the settings - replace the page number and the name of your settings field: $settings_ta = $pages->get(1644)->settings_ta; $settings_lines = explode(PHP_EOL, $settings_ta); foreach($settings_lines as $settings_row) { $settings_pair = explode('|', $settings_row); ${trim($settings_pair[0])} = trim($settings_pair[1]); } more condensed version, for those of you who like brevity... foreach(explode(PHP_EOL, $pages->get(1644)->settings_ta) as $settings_row) { $settings_pair = explode('|', $settings_row); ${trim($settings_pair[0])} = trim($settings_pair[1]); } now you can do this in your templates: echo $address; echo $facebook; echo $twitter; echo $phone; Edit: made the code simpler....; 2nd edit - added trim to support using ace editor with tabs Addendum: as an added convenience, you could use the Ace text editor module which would give you a monospaced text field and the ability to use tabs for your settings, which could be more readable and easier to edit. The code has been updated to support this by trimming the exploded strings prior to generating the variable/value. address | some info here facebook | http://www.facebook.com twitter | http://twitter.com phone | (999) 999-9999
    2 points
  11. MarcinP
    Hi. I wonder if is there possibility to limit page children to specific template. I know that it can be done in template settings. But I think it could be good option to do it in page settings. Lets say we have templates like news, gallery, author, tag, movie, song itc. We have also pages with the same names. If we want page 'Video' to accept children only with template 'video' we need to create template like 'videos-container' and set it to accept only children with template 'video'. And so on with other pages and teplates. It ends with many 'empty' templates which role is only limitation child templates in specific pages. If we could limit children templates in page settings it would be enough to have one template like 'common-container'. PS: sorry for my bad english.
    2 points
  12. ryan
    Given a Google Calendar XML feed URL, this module will pull it, cache it, and let you foreach() it or render it. Download at: https://github.com/r.../MarkupLoadGCal USAGE The MarkupLoadRSS module is used from your template files. To use it, you get a copy of the module, tell it what URL to load from (with the load method), and then execute a find() query with a selector string. It works basically the same as a $pages->find("selector string"). <?php $cal = $modules->get("MarkupLoadGCal"); $cal->load('http://calendar XML feed'); $items = $cal->find('from=2011-12-1, to=2011-12-31'); foreach($items as $item) echo "<p>{$item->title}</p>"; To get a Google calendar URL, you would go into your (or another) calendar on Google and click to the calendar's settings. At the bottom of the screen, you will see a section called "Calendar Address" with XML, ICAL, and HTML. Copy the XML address, and use that with this module. If you just want one to test with, use the one from my examples below: http://www.google.co...com/public/full Note: you must use the 'full' not 'basic' calendar from Google Calendar. You can identify if you've got the right one because it will end with 'full' rather than 'basic', as in the URL above. Selector Properties The selector properties you may provide to find() are: from: Starting date in any common date/time format (or unix timestamp). to: Ending date in any common date/time format (or unix timestamp). keywords: Keyword(s) to search for in the Google calendar events. limit: Max number of items to load (default = 100). sort: May be 'date', '-date', 'modified' or '-modified'. html: Set to '0' if you don't want the event description in HTML. The find() method will return the found items. You can then foreach() these items to generate your output. A render() method is also included with the items which provides some default output, if you want it. Calendar Item (Event) Properties Each calendar item has the following properties: title: The title of the event description: Detailed description of the event (in HTML, unless disabled) location: Where the event will take place author: Author of this item from: Timestamp of when the event begins to: Timestamp of when the event ends dateFrom: Formatted date string of when the event begins dateTo: Formatted date string of when the event ends See the module file for additional configuration options. EXAMPLES Example #1: Simplest example <?php // get the calendar module $cal = $modules->get("MarkupLoadGCal"); // set the feed URL: may be any google calendar XML feed URL $cal->load('http://www.google.com/calendar/feeds/3icgo6ucgvsf6bi5orld9moqqc%40group.calendar.google.com/public/full'); // find all items for December, 2011 $items = $cal->find('from=2011-12-1, to=2011-12-31'); // render items using built-in rendering echo $items->render(); Example #2: Rendering your own items <?php $cal = $modules->get("MarkupLoadGCal"); $cal->load('http://www.google.com/calendar/feeds/3icgo6ucgvsf6bi5orld9moqqc%40group.calendar.google.com/public/full'); $items = $cal->find('from=2011-12-1, to=2011-12-31'); foreach($items as $item) { echo " <h2>{$item->title}</h2> <p> <b>Date From:</b> {$item->dateFrom} (Timestamp: {$item->from}) <br /> <b>Date To:</b> {$item->dateTo} (Timestamp: {$item->to}) <br /> <b>Location:</b> {$item->location} <br /> <b>Author:</b> {$item->author} </p> {$item->description} "; } Example #3: Finding Keywords <?php $cal = $modules->get("MarkupLoadGCal"); $cal->load('http://www.google.com/calendar/feeds/3icgo6ucgvsf6bi5orld9moqqc%40group.calendar.google.com/public/full'); $items = $cal->find("from=Aug 1 2011, to=Dec 1 2011, keywords=Eddie Owen"); echo $items->render(); ADDITIONAL INFO Options See the module's class file (MarkupLoadGCal) for a description of all options in the comments of the $options and $markup arrays at the top of the class file. Handling Errors If an error occurred when loading the feed, the $cal will have an 'error' property populated with a message of what error occurred: <?php $items = $cal->find("..."); if(empty($items) && $cal->error) { // an error occurred echo "Error! " . $cal->error; } $items will be blank if an error occurs, but it will always be of the same type, so it's up to you whether you want to detect errors. If you don't, then your calendar output will just indicate that nothing was found. Cache By default your calendar queries are cached for an hour. You can change the cache time by setting the $cal->cache property to the number of seconds you want it to cache. --- Edit: Added note that you must use the 'full' google calendar feed rather than the 'basic' one.
    2 points
  13. Martijn Geerts
    a bit related: I use InputfieldSelectFile and then select the custom 'template' in the page. In the example below, I have a /site/templates/includes/ folder with PHP files in it. I now can select a file and use that as a template. So no need for additional templates. $tpl = new TemplateFile($config->paths->templates . "includes/" . $page->select_file); $tpl->set('current', $page); $markup = $tpl->render(); echo $markup;
    2 points
  14. Joss
    If you want a quick way of creating loads of selectors, then try this http://modules.processwire.com/modules/process-page-field-select-creator/ It creates the templates, the relationship and even the fields. You might be interested in a Villa site that Ryan did with processwire that used pagefields for criteria: http://www.villasofdistinction.com/ And if you need, you can also look at the Page Table field where you not only establish the relationships and can create new variations from the field, but those variations can be complex pages in their own right. There is no problem in ProcessWire with using lots of templates to create familial relationships. You are not going to stuff the system and you can tie down what can be added at any fixed place. I must have missed something, but I am struggling to work out what you need to achieve that the existing powerful system does not already do.
    2 points
  15. Joss
    Templates are there to give the very functions you want - that is what their job is
    2 points
  16. Macrura
    Part III: Using YAML (part of structured data module). 1.) Install the module (make sure to install the new version, FieldtypeDataStructure) 2.) create the field for it (ex. settings_ds) 3.) Add some settings - these can be more sophisticated/nested than the settings above, because of the YAML structure options: - name: address street: 27 Hawthorne Lane city: New York state: NY zip: 10982 phones: main: (999) 888 9874 fax: (555) 548-5647 - name: social_media facebook: https://www.facebook.com twitter: https://twitter.com - name: global site_title: My Awesome Site tagline: Tulips Rule 4.) Get the field into your template: $settings_ds = $pages->get(1644)->settings_ds; 5a.) Option 1: Auto populate the $vars foreach($settings_ds as $setting) ${$setting->name} = $setting; 5b.) Option 2: Query the field with PW selectors (this is awesome): $address = $settings_ds->get("name=address"); $social_media = $settings_ds->get("name=social_media"); $global = $settings_ds->get("name=global"); this is cool because you can keep all the parts of a setting together as a group, and have multiple parameters like this: // address echo $address->street; echo $address->city; echo $address->state; echo $address->zip; echo $address->phones->main; echo $address->phones->fax; // social media echo $social_media->facebook; echo $social_media->twitter; // global echo $global->site_title; echo $global->tagline;
    2 points
  17. Joss
    Martijn is absolutely right here. There are two sides of any website - how it looks and how it is managed. Processwire, unusually, actually has a really logical separation - the /site/templates/ directory is how it looks and the admin is how you manage it. And, as you know, joining the two together is very, very simple. So, probably your starting point, with that pencil and paper, is to forget it is a CMS at all and work it out as if it were a static site. Once that is done, you can then allocate the various parts of your theoretical site to the two sides - the html to the templates directory and the content to the admin. From that, your structure will probably become clear very quickly.
    2 points
  18. horst
    Hi Marty, assuming you want to build a grid upon an unknown collection of images and you want to have full control, you may start with this construct and change it to suite your needs: echo "<br /><hr /><pre style='font-family:monospace;'>"; // only a little test unit $yourImagesArray = array( 1,1,1,1,1,1, 1,2,1,1,1, 1,1,1,1,1,2, 1,1,1,2,1,1,1,2,1,2,1,1,1,2,1,1,1,1,2,1,1,1,2,1,1,1,2,1,2,1,1,1,2,1,1,1,1,2,1,1,1,2,1,1,1,2,1,2,1,1,1,2,1); // build the grid $images = $yourImagesArray; // containing lots of images, most with no tag or a "single" tag and some with a "twice" tag! You have to make sure it contains enough images for your grid, so. $i = 0; for ($row=1; $row<=7; $row++) { echo "\n$row:"; // only for the test for ($col=1; $col<=6; $col++) { // get the next image from the collection $img = $images[$i++]; // you would use $images->eq(++$i) with real images here! if (6 == $col) { // only special case is with the last $col while (2 == $img) { // last $col cannot take a "twice"-image. For the example I simply drop all "twices" while searching for a single-one. $img = $images[$i++]; } } // now we have a valid $img for our grid, so create output if (2 == $img) { $col++; // adjust the $col counter! echo 'oo'; } else { echo 'O'; } } } // ready with grid echo "</pre><br /><hr />"; // only for the little test unit test output is: 1:OOOOOO 2:OooOOO 3:OOOOOO 4:OOooOO 5:OooOoo 6:OOOooO 7:OOOooO
    2 points
  19. Joss
    Cloudflare, in its most basic free version, which is what I am using, simply caches any assets, So you do not need to do any synchronising in that sense. during development you can simply bypass the caching or you can go to dev mode which does the same thing, but turns the caching back on after three hours. To a greater extent Cloudflare just works out of the box. The only thing I tend to change is 404 - Cloudflare has its own 404 system that brings up a site search, but that is branded as cloudflare unless you use one of the paid plans. However, you can just turn that bit off. The best thing is to read through all their docs - they have a huge amount of things you can play with, even on the free version, including caching javascript, handing google analytics and so on.
    2 points
  20. Macrura
    I almost never use the default menu listing of the page tree; i make a custom page tree somewhere under a "Menus" page and then generate the menus there, as is mentioned by Kongondo above... works like a charm.. if you need help building it, let me know!
    2 points
  21. netcarver
    Thank you for the feedback Horst. According to another article, the CSS used should work in IE10+ (along with FF5+, Opera 12+, Safari 4+ & Chrome) but the quality may vary. Even on a new-ish chrome browser on a fast Android tablet the animation quality can vary a little between loads of the page - sometimes there is a little stall here and there. With regard to per-slide transformation settings: yes, it is possible. The example code I posted sets a simple scale-up for the image and a translation for the overlay text for all slides but you can specify a slide field for the image and/or overlay transformations making them configurable for each slide. Having said that, I've not tried to duplicate the effects used in that site so I can't say a positive "Yes, it can do that" even though you can customise things on a per-slide basis. Edited to reflect the removal of the image scale-up from the opening post - FF on android was stalling with the image scaling.
    2 points
  22. Macrura
    @adrian - yes, i love that YAML thing; and as I see it there are maybe 4-5 good ways to do settings, depending on the site and the scenario; I usually use a profields table, and have 2 columns, and do a similar code as above to get the $vars, and i'm using this for a lot of things like slider settings, site settings, settings for javascript plugins etc.. where i need to have a ton of settings without much effort... For some things that are mission critical I make fields, especially if the setting can use a color picker, rangeslider, or select. the delimited textarea is good for beginners who maybe don't have profields, and who need a quick easy way to have some editable settings in the b/e.. and there should be an easy way to use the YAML field to do this; i guess i should try it and do another tutorial for using that for settings...
    2 points
  23. Joss
    Er ... not sure I totally follow this. Are you using CKeditor and if so, are you not using the image button to add images from an image upload field? If you do not want them to do this, but limit what they do with an image, you can use a bit of hanna code that takes an image from a single image field on the page and inserts it wherever they put in the code in their text.
    2 points
  24. Jan Romero
    So I suppose this is a somewhat pointless addition, seeing as drafts are about to come to the core, but I needed this right now and ProcessWire made it possible for me to implement over the last two days. An experience that convinced me once more that ProcessWire is absolutely amazing. GitHub link. So what does this do? This module allows you to create a draft version of (hopefully) any page, which can be edited while the public facing page remains in place and unchanged. Drafts are placed under a special Admin page, which also doubles as a rudimentary manager. It shows what pages have drafts assigned and lets you update the original page with its draft. I need all this mainly for front-end editing, so for me the focus is on the added API methods. I have added functionality to redirect every edit to a draft page for testing, and it can make sense to have that behavior of course, so it will probably become a config setting. How does it do that? Page cloning is very very handy for this purpose, so that’s mostly what I’m doing here. It’s elegant in that very little code is needed, but it is perhaps somewhat crude to delete pages, including their field data and files on the file system, so much. I needed some hacky-feeling tricks to convince PW to delete pages that have children and clone pages to my custom admin page even when their template prohibits that sort of parent. What doesn’t this do (well)? Since a draft is linked to its page by having the page ID for a name (!), which conviniently also guarantees uniqueness, modifying page names should be pretty much impossible. It would be best to create a table to store the references, but I kind of like that you can keep everything 100% PW API. The most complicated fieldtypes I have tested this module with are Images/Files and Multiplier. That covers my immediate need, but perhaps PageTables will cause problems. I don’t have any experience with those. There are probably a lot of other things to look out for, but I can’t remember any more right now. Be aware this is most definitely not production ready or anything. I would like to thank Teppo Koivula, whose Changelog module I used for inspiration downright based this on. Great work there, and a lot to learn from. If you find fragments of Changelog in this module, that’s no coincidence. Also hugely helpful are the great members of this forum and Ryan’s code, which I assume we all use as our main documentation <3 Please absolutely tear this apart, if you can spare the time to have a quick look. I like to think I did okay, but I’m eager to learn and I’m sure this is full of questionable practices, bugs and inefficiencies. So yeah, its unlikely anyone will have the need to use this on a site, but hopefully I can get some feedback out of it and perhaps it can teach other beginners like me a trick or two. GitHub link again. /wall of text
    1 point
  25. Joss
    I am trying to put together my own icon set so I don't keep nicking everyone elses. So, these are primarily for use on a website - navigation, parts of the site, just a few social bits and so on. What others should I do? Without ending up doing hundreds! With companies, I am using their official logos, though not necessarily the right colours! For the moment I am just doing them in Illustrator in grey with no backgrounds. I will mess with them later and put them into neat sets. But these are my core images:
    1 point
  26. ralberts
    Not our first ProcessWire powered website, but definately our most interesting one so far: http://www.rabotheater.nl At Itix we build and maintain online ticketing software for theatres and cinema's. About 30 theatres across the Netherlands are powered by Itix. Our software has some form of integrated content mangement, but this "CMS" does not live up to current standards and client wishes anymore. We decided to move all frontend related content to a PW environment. Eventhough most data still exists within Itix, all website-specific enrichment is done within ProcessWire. PW gets it's data through export/imports (for complete datasets) and a method of triggering events, filling a jobqueue and updating specific single items. Rabotheater is our first client moving to a PW powered website, but I'm confident many will follow. http://www.rabotheater.nl
    1 point
  27. Joss
    The site I have just uploaded today, http://claysvehiclerepairs.uk is the first site I have done where the pressure was on to speed it up. The site has a lot of graphics, it uses foundation which is far from lightweight, it has 890 or so pages (it has left Pete's sitemap module smouldering), various extra bits of JQuery going on like equal heights and is just big and weighty. I managed to get it running fine, actually, and then I added AIOM and the site shook itself into a higher gear - very pleased indeed. So Thanks to everyone involved with AIOM. Then I gassed up procache, pulled the choke out and hit the start button. The full roar of the ProCache 289 V8 with Holly double pumpers, slot change box and overcharger, thundered into action and the website just about catapulted itself out of the traps and round the internet track at lightning speed. The difference was seriously noticeable. And the result? Page analysis says - &*$£king fast. Mobile analysis says fast too, which considering what is going on is very pleasing. So Thanks to to Ryan for making a CMS that is a joy to optimise with no secret stashes of rubbish to drag you to your needs and for a module that adds rocket fuel to the finished item. Gertcha my son!
    1 point
  28. Peter Knight
    Check out ico moon. Actually, there are lots of great icon sets out there.
    1 point
  29. Pete
    Hi horst - great module (I'm a bit late to the party ). Here's an example using Apeisa's Thumbnails module - I had trouble with this because the thumbnail URL is relative to the homepage and therefore doesn't contain the whole server path to load the thumbnail with. // First we get the thumbnail - replace thumbname with your thumbnail name as set in the Thumbnails module $relativePath = $page->images->first()->getThumb('thumbname'); // Then we add the root path (note: will not work in a subdirectory - not sure about localhost either - you may have to hardcode this bit unless someone has an idea? $fullPath = $config->paths->root . $relativePath; // Now do your nice manipulations if the image doesn't already exist (we only want to convert it once) if (!file_exists($fullPath)) { $modules->get('PageImageManipulator')->imLoad($fullPath, array('outputFormat'=>'jpg', 'targetFilename' => '$page->images->path . 'test.jpg'))->save(); } echo "<img src='" . $page->images->url . "test.jpg' /> This was typed in the browser and my actual code is for a different scenario so this may require some modification! EDIT: Of course, once you've generated the file once then you will want to check for that rather than keep recreating the file - modified my example to show this. EDIT2: It would probably be a good idea if you are using this example to have a module that clears any existing test.jpg files on page save (or image changes but not sure how) for the relevant templates so that if someone changes the image the PIM runs again when the image is next viewed on the site.
    1 point
  30. init2null
    I've gotten a little obsessed with the page loading time on my latest website. Many of you use AIOM for asset preprocessing, but I decided to use Grunt and htaccess for more control and a lighter server burden. Here are the techniques I used in a random order: For file versioning, I supply distant expiration dates and use this line in my htaccess: RewriteRule ^([^.]+)\.[0-9]+\.([^.]+)$ $1.$2 The file is referenced as "myfile.<?php echo filemtime("myfile.js"); ?>.js", though I do this in a function for additional path translation. MD5 would be another option, but it would take longer. For both Javascript & CSS (first converted from LESS), I first combine the multiple support libraries into one file. I include these files on the server as *.src.*; the templates includes the *.src.* files when the viewer is superuser. I then minify them and include them as *.min.*. I use Grunt to compress them all as *.*.gz and serve them as needed: <IfModule mod_headers.c> # Serve gzip compressed CSS files if they exist and the client accepts gzip. RewriteCond %{HTTP:Accept-encoding} gzip RewriteCond %{REQUEST_FILENAME}\.gz -s RewriteRule ^(.*)\.css $1\.css\.gz [QSA] # Serve gzip compressed JS files if they exist and the client accepts gzip. RewriteCond %{HTTP:Accept-encoding} gzip RewriteCond %{REQUEST_FILENAME}\.gz -s RewriteRule ^(.*)\.js $1\.js\.gz [QSA] # Serve correct content types, and prevent mod_deflate double gzip. RewriteRule \.js\.gz$ - [T=text/javascript,E=no-gzip:1] RewriteRule \.css\.gz$ - [T=text/css,E=no-gzip:1] <FilesMatch "(\.js\.gz|\.css\.gz|\.svgz)$"> # Serve correct encoding type. Header set Content-Encoding gzip Header set Precompressed true #for debugging # Force proxies to cache gzipped & non-gzipped css/js files separately. Header append Vary Accept-Encoding </FilesMatch> </IfModule> I needed to provide the main script with arguments but wanted to load the Javascript using the async keyword, so I assigned the arguments as global variables and access them when JS finishes loading. I found many ways to use SVG in this design, and I aggressively optimized the illustrations and the generated code. Editing the XML by hand can shave several kilobytes off the file. In one case, I reduced the file size from 40 KB to 4. I also use Grunt to pre-compress it as with the JS and CSS. If you're really obsessive, you can rearrange the SVG attributes for better compression. These may be basic tips for most of you, but I'm hoping they'll be helpful to someone. For anyone interested, I've attached the Gruntfile. I only ask that you don't judge the file structure too harshly. Since I probably haven't scratched the surface here, feel free to provide any of your own tips. gruntfile.js.txt
    1 point
  31. Macrura
    I usually just need one template called 'option' with a title field and a container called 'option-index', also with only title. That I use for dozens of different page selects tree branches... Do all of your templates that require containers have different fields?
    1 point
  32. apeisa
    Fokke, superb job with translations! Only tthing I was wondering was "perhe" at template edit, since we don't have children and parents. I couldn't come up with anything better though
    1 point
  33. LostKobrakai
    Yeah, that's why I wanted to make your statement a little bit more clear for potential other readers of this thread.
    1 point
  34. horst
    <kidding>better not "the main concept" but "one of the main concepts"</kidding>
    1 point
  35. pwired
    Martijn and Joss have it right. First of all processwire is kind of an engine that can drive any html, php, css, js, that you are going to use. So first step would be prototyping your website into different parts. Then assign what code is needed for what parts. Final step is to port it all into processwire => template files, your code and api and "pages" and fields in the admin. You can use wireframers to quickly prototype a website: http://pencil.evolus.vn/
    1 point
  36. horst
    thanks for the nice words. 1) unfortunately Pia only assist with preparing and delegating values to the images engines. She isn't able to process images by herself. What you are requesting is "canvas", it is provided by Pim. I don't know yet if Pia dynamically should support shortcuts depending on other installed modules or not. It can become a bit confusing. On the other hand I see how comfortable it could be if Pia would assist here too. 2) I will do so when finding a bit time for it. yes, she is!
    1 point
  37. Martijn Geerts
    Actually I have been in the same situation but then in the context of inputfield Page. (Not showing pages for loggedin users except root). It was a real question for me then, but it makes sense after you get the concept.
    1 point
  38. horst
    Glad it is working now for you! Your hosting company uses LiteSpeed and now PHP 5.5. It must have been a specific configuration problem there, because PW 2.5 is running fine on PHP 5.4. Any chance we can get to know what problem it was they have solved with changing the PHP version?
    1 point
  39. Anton Martin
    Thanks to all that took the time to answer my calls for help! This issue has been resolved. The fix was to upgrade the PHP version to 5.5.
    1 point
  40. LostKobrakai
    Have you tried markup cache for the search? The cache files are chosen by name, so you can just put your selector values in the name, so it really caches markup depending on the searched values.
    1 point
  41. LostKobrakai
    I just wanted to highlight that subpages aren't affected by your statement "get will get it, regardless of state". For the selector I tried both simply because it had not worked the way I was expecting it to work. But I never had an issue like this before, so in the beginning I wasn't really aware that the cart-item template could tamper with the result.
    1 point
  42. kongondo
    Since you've isolated the problem to pages that contain repeater fields, that's where I'd focus (having ruled out the other usual suspects). Have you tested your site on a local/dev server? Do you get the same problems? Maybe its some field within the repeater? You could remove them one by one from the repeater and see if that changes things? Using massive images in the single image field? Just a couple of things to check out... Are there any errors recorded in your PW logs btw?
    1 point
  43. adrian
    I wonder if owzim's new YAML fieldtype would be useful for this scenario also? Your approach might be simpler for non-tech users to understand and format though!
    1 point
  44. Jan Romero
    Check out the Hanna Code module if you don’t want to use a WYSIWYG editor. It’s perfect for this.
    1 point
  45. MadeMyDay
    Like Soma suggested with language alternate fields installed, but for less redundance I'd go with that: three (or more depending on language count) fields: firstSliderImage (image) firstSliderImage_fr (image) multilangSliderImages (image) then you build your slider like that (shematic): $firstSlide = "<div class='slide'> <img src='{$firstSliderImage->eq(0)->url}'> </div>"; foreach($multilangSliderImages as $si){ $slides = "<div class='slide'> <img src='{$si->url}'> </div>"; } $slider = $firstSlide.$slides; echo $slider; Advantage: Your client only has to differ the first slides, for the rest it suffices to upload one version. edit: While re-reading this, it isn't even needed to build it like that since with language alternate fields you can configure to fall back to the standard language content. So just build it like Soma suggested, no need for multiple upload of the same image.
    1 point
  46. Soma
    No no function "And it will choose the right one depending on language." Readup http://processwire.com/api/multi-language-support/multi-language-fields/#language-alternate-fields somefield //default somefield_fr / must match a language name "fr" And PW will look for them and take care of which field is used according user language of course. 1. I think for carousel I would create a image per page and add language alternate fields for each language. Then create the slider from the those pages. 2. Or use the new core PageTable field to handle the slider. in the end it's the same as 1 as it creates a page for each PageTable entry, but nicer editing features. 3. Repeaters are still nice to also handle sliders, again each item is a page at the end anyway. ... not sure, it's what you have and it works fine. This is also one of those cases you wish there were no languages I had to always deal with these sort of things and while it can't be simple it has to be complicated. An image has language descriptions that's enough most of the time, but there's cases where the image also has to be translated. PW doesn't have an image field that could stores an image per language (yet), which is a shame kinda If you'd ask Ryan, he would response with my first post, that you can use language alternate fields for that. But it's not always the optimal and most practical solution. And it's really a edge case. In projects I work they're most likely often "Institutions etc" they like to have images of graphs and Political images that exist in various languages, flyers etc etc. After all it would be nice to have, and if PW could in some way support that, it would be really cool.
    1 point
  47. Soma
    There was many changes to file or images and overall, I had once in ImageManager used a InputfieldFile on a process admin module, set the upload dir etc, and then loaded the file from there to create image pages. But then since 2.5 I think it didn't work suddenly, and I couldn't get Ryan to explain what happens (as so many times) So I'm not sure what's working and what not anymore. Well after hours of trying and thinking I got it working, just something I can't make sense of it. All I remember was that the admin page is used to upload the image from a InputfieldImage, where before it wasn't. This code is interesting, but as said I have no idea what worked and why. https://github.com/somatonic/ImagesManager/blob/master/ImagesManager.module#L173 Ohhh, and you might be on a module settings config screen you are having this? There it won't work anyway as there's no page!
    1 point
  48. jacmaes
    Google Calendar API v2 was depreciated on November 17, 2014. I can't seem get the "full" xml feed anymore, which is required for the module to work as Ryan indicates in the first post, and I'm guessing it's because an API Key is now required.
    1 point
  49. kongondo
    Upcoming update: Blog version 2.3.0. (dev) In relation to the issue about displaying Blog Authors' usernames in their pages URLs/Links, I have updated Blog (dev branch for testing first). If an author's 'display names' (title field in user template) are set, Blog [renderPosts(), postAuthor() and renderAuthors()] will now use and display a $sanitizer->pageName() version of that as URL/Link to that author's posts. E.g., if a Blog author has the display names 'Grace Jones' and a username 'gjones', if using Blog Style 1 or 2, their author URL will be, e.g.: /blog/authors/grace-jones/ rather than the current /blog/authors/gjones/. I have updated the demo files blog-post.php and blog-authors.php to reflect this change (see screenshots below). Inevitably, if you are using these files (or their code), unless you update them to reflect the changes your links will lead to 404s. Apologies for this. However, the benefits of the changes outweigh this inconvenience IMHO. Similarly, if you are using custom code, note that, as stated above, renderPosts(), etc will no longer use an author's username in creating author URL/links. Hence, you will also need to adjust your code (see examples in the above template files if unsure). if a 'display name' is not yet set, there will be no author URL link and a generic 'Author Name' will be displayed as the author's name rather than their username. This should serve as a reminder for the client/developer to make sure a 'display names' is set for each Blog Author. I will soon merge this to Master branch as it is an important update. Please test and let me know if there are any issues, thanks. Screens. Blog Author without 'display names' set Blog Author with 'display names' set
    1 point
  50. dazzyweb
    I agree and think it is something that is possible if the time and effort is put into it. For me this is one area and advantage that other cms's such as Wordpress with Woocommerce have over Processwire. Maybe something like woocommerce could be taken as an example of how to do it. I dream of the day that Processwire has such an E-commerce solution so I don't have to look outside of Processwire.
    1 point
×
×
  • Create New...