Leaderboard
Popular Content
Showing content with the highest reputation on 12/27/2012 in all areas
-
Hi Folks, today we will learn how to set up a simple jquery plugin called calendario and fill events trough our admin backend. || ATTENTION || Modern Browser needed First of all, we need the jquery plugin. Grab your copy here: http://tympanus.net/...alendar-plugin/ Now create a new template file, lets call the file calendar.php In the next step we have to include all the needed files from the .zip package. You need the following .css files: calendar.css custom_2.css demo.css Just include them in the <head> </head> of your template file. Feel free to merge them together, so you could save some http connects. Now we need to include the needed javascript. Make sure you have included the latest jQuery library. Include the jquery.calendario.js and the modernizr.custom.63321.js right into the bottom of your template file. Save the calendar.php Now we will set up Processwire where the magic wil happen. We just need one new template. Create a new template called calendar. Assign the field headline to our template. Allow children to just use this template. Hit the save button. Now create a new Page as child of home and call it Calendar. Assign our calendar template to this page. Almost ready. Now we have to do some little scripting in our template file calendar.php Add this html markup to our calendar.php <div class="custom-calendar-wrap"> <div id="custom-inner" class="custom-inner"> <div class="custom-header clearfix"> <nav> <span id="custom-prev" class="custom-prev"></span> <span id="custom-next" class="custom-next"></span> </nav> <h2 id="custom-month" class="custom-month"></h2> <h3 id="custom-year" class="custom-year"></h3> </div> <div id="calendar" class="fc-calendar-container"></div> </div> </div> Now we have to call the javascript function, to get the calendar running. Just put this snippet right under the included jquery.calendario.js <script type="text/javascript" $(function() { var transEndEventNames = { 'WebkitTransition' : 'webkitTransitionend', 'MozTransition' : 'transitionend', 'OTransition' : 'oTransitionend', 'msTransition' : 'MSTransitionend', 'transition' : 'transitionend' }, transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], $wrapper = $( '#custom-inner' ), $calendar = $( '#calendar' ), cal = $calendar.calendario( { onDayClick : function( $el, $contentEl, dateProperties ) { if( $contentEl.length > 0 ) { showEvents( $contentEl, dateProperties ); } }, caldata : { <?= getEvents(); ?> // this is our function to grab our events }, displayWeekAbbr : false } ), $month = $( '#custom-month' ).html( cal.getMonthName() ), $year = $( '#custom-year' ).html( cal.getYear() ); $( '#custom-next' ).on( 'click', function() { cal.gotoNextMonth( updateMonthYear ); } ); $( '#custom-today' ).on( 'click', function() { cal.gotoNow( updateMonthYear ); } ); $( '#custom-prev' ).on( 'click', function() { cal.gotoPreviousMonth( updateMonthYear ); } ); function updateMonthYear() { $month.html( cal.getMonthName() ); $year.html( cal.getYear() ); } // just an example.. function showEvents( $contentEl, dateProperties ) { hideEvents(); var $events = $( '<div id="custom-content-reveal" class="custom-content-reveal"><h4>Termine am ' + dateProperties.day + '. ' + dateProperties.monthname + ' ' + dateProperties.year + '</h4></div>' ), $close = $( '<span class="custom-content-close"></span>' ).on( 'click', hideEvents ); $events.append( $contentEl.html() , $close ).insertAfter( $wrapper ); setTimeout( function() { $events.css( 'top', '0%' ); }, 25 ); } function hideEvents() { var $events = $( '#custom-content-reveal' ); if( $events.length > 0 ) { $events.css( 'top', '100%' ); Modernizr.csstransitions ? $events.on( transEndEventName, function() { $( this ).remove(); } ) : $events.remove(); } } }); </script> We are almost finished, but we are missing some very essential, have a look to our javascript. We are calling a function named getEvents() This function will grab our events and fire it right to our calendar. So here is the code: function getEvents() { $events = wire('pages')->get("/calendar/")->children(); foreach ($events as $event) { echo "'$event->title' : '<span>$event->headline</span> ',"; } } Put this snippet above the javascript includes. We will now create our first entry. Go back to the PW admin backend and create a Child of Calendar. Title and name need the Date on which the event has to be displayed. You have to form a date in this format: mm-dd-yyyy e.g. 12-27-2012. The headline field is our Event description. Hit the save button, go to your site and enjoy your event calendar. With a little coding you could extend the calendar to let it look like mine attached as screenshot. Hope this was useful to somebody. Cheerio.
7 points -
Hi, just had some free days and build my first admin template. I'm open for any ideas how to improve it. You can download it here: GitHub Greets, Nico
6 points
-
Hey all, I'm releasing a new admin theme called Elegance. I tried to keep the look and feel of ProcessWire, but with a modern clean and robust touch to it. Special thanks to nikola, soma and adamspruijt, because I've used components from their themes that I liked (hope u guys are okay with it ). GitHub: https://github.com/u...ganceAdminTheme Direct download link: https://github.com/u...hive/master.zip3 points
-
Diogo, you don't have to do it manually, just a save hook. Giving you back a simple find() on front-end it is worth considering it. It would also even work in admin sorting by the field and so on. Sure an simple page array where you store the height of the first image in a runtime property to then sort by it is also a way. But then just add a line or two more to save the result to the page and you already have a "function" to do it automaticly. $pa = new PageArray(); foreach($pages->find("template=xyz") as $p){ $h = $p->images->first()->height; $p->img_height = $h; $pa->add($p); } foreach($pa->sort("-img_height") as $p){ $img = $p->images->first(); .... }2 points
-
So, I've been wondering (since this evening) if it would be possible to extend default integer field with two features / settings: signed / unsigned size (nothing too fine-grained, most importantly INT, BIGINT and perhaps something like TINYINT) The main reason I'm suggesting this is that I've banged my head on a wall that is int(11) couple of times now and I'd very much prefer having better option than using a text field in those cases. Sure, a text field combined with proper filtering + sanitizing usually gets the job done just fine, but at the same time it feels more than a bit hackish and introduces yet another chance for human error to thrive. Signed / unsigned part would be just a "nice to have" extra feature and probably wouldn't be of use for most PW users, but from a DB design point of view it would make a heck of a lot of sense; if I'm only interested in positive integers (which is almost always the case, by the way) why would I allow negative input and especially if I'm not allowing it at UI level then why should it be allowed at DB level? Oh, and that extra space "unsigned" results in is a nice bonus I do know that this would be quite easy to put together as a new fieldtype, but I wanted to try tossing it around here first, just in case that someone else would feel that it'd be worth adding to built-in field. Obvious downside of this whole idea is that changing settings like these would require changes to DB schema, so what I'm asking for may not be possible at all -- in which case I'm probably just going to put together a new "big integer" field..1 point
-
I found (after 2-3 Projects using PW) that it's a good technique to use templates in a way I think hasn't been thought of yet really by some. (Although the CMS we use at work for year, works this way.) I'm sure I'm maybe wrong and someone else is already doing something similar. But I wanted to share this for everybody, just to show alternative way of using the brillant system that PW is. Delegate Template approach I tend to do a setup like this: - I create a main.php with the main html markup, no includes. So the whole html structure is there. - I then create page templates in PW without a file associated. I just name them let's say: basic-page, blog-entry, news-entry... but there's no basic-page.php actually. - Then after creating the template I make it use the "main" as alternative under "Advanced" settings tab. So it's using the main.php as the template file. - This allows to use all templates having the same php master template "main.php" - Then I create a folder and call it something like "/site/templates/view/", in which I create the inc files for the different template types. So there would be a basic-page.inc, blog-entry.inc ... - Then in the main.php template file I use following code to delegate what .inc should be included depending on the name of the template the page requested has. Using the TemplateFile functions you can use the render method, and assign variables to give to the inc explicitly, or you could also use just regular php include() technic. <?php /* * template views depending on template name * using TemplateFile method of PW */ // delegate render view template file // all page templates use "main.php" as alternative template file if( $page->template ) { $t = new TemplateFile($config->paths->templates . "view/{$page->template}.inc"); //$t->set("arr1", $somevar); echo $t->render(); } <?php /* * template views depending on template name * using regular php include */ if( $page->template ) { include($config->paths->templates . "view/{$page->template}.inc"); } I chosen this approach mainly because I hate splitting up the "main" template with head.inc and foot.inc etc. although I was also using this quite a lot, I like the delegate approach better. Having only one main.php which contains the complete html structure makes it easier for me to see/control whats going on. Hope this will be useful to someone. Cheers1 point
-
Sorry, saw just now that you can set the selectors in the options array - works great!1 point
-
I actually did something similar on one of those villa sites, so that I could randomly pull from pages having the highest quality images. I have a Pages::save hook that saves the average width of all the photos on the page to a hidden integer field. That way I can use $pages->find() to find villas with best image quality (or at least, largest images) and sort by that, etc. In your case, you might want to do the same thing, except store the height. If all the pages have the same number of images, then you could do combined height. If they are differing numbers of images, you'd probably want to do average.1 point
-
$pageArray->has($page); http://processwire.c...er=has Also it doesn't matter if you add duplicates as PW will remove them anyway.1 point
-
Years ago when I was doing hosting research Wiredtree and Knownhost came up as having good reputations at webhostingtalk.com, which is where I've always gone to research these things. Good to hear these are still recommended by folks. That's where I originally found out about Servint too. All other things being equal, I think it's good to choose a host with a data center relatively close to you geographically (ping times can make a difference). Though overall history and stability are still the most important to me.1 point
-
I've had great experience with KnownHost and their managed VPS. Most of the PW sites I run are hosted there.1 point
-
I don't get any commissions from ServInt. But they do provide a dedicated server for the ProcessWire project, which we don't have to pay for. I think this is really awesome of them to support the ProcessWire project in this way. If you get an account with Servint it's good to mention ProcessWire, just as a way to say thanks, if you want to. But just wanted to mention that nobody is getting any commissions or payments. We all are getting a great server, because Servint likes ProcessWire and supports open source.1 point
-
In a simple site these things can also go on the homepage template. Imagine, for example, a blog where the homepage doesn't have any content of it's own. You can simply populate it's template with fields for the footer, sidebars, and whatever else that would be global on the site.1 point
