Jump to content

rafaoski

Members
  • Posts

    81
  • Joined

  • Last visited

  • Days Won

    2

Posts posted by rafaoski

  1. This profile can be used as a business card or very simple blog.

    Requires the latest version processwire 3.0.101 !!!

    Milligram Site Profile For Processwire 3x with include functions like:

    MarkupRegions

    FunctionsAPI

    wireIncludeFile | wireRenderFile

    Essentially, this structure uses minimalist CSS framework Milligram and the Flexbox Grid System Gridlex

     

    Live Example

    CAN DOWNLOAD FROM THIS LINK ( Basic Version and simple Blog Version )

    https://github.com/rafaoski/site-milligram

    https://github.com/rafaoski/site-milligram-blog

    Screenshot:

    Screenshot.thumb.png.41444dbd9bee29647299cf518d5249fe.png

    If you want to use Laravel Mix you must first ensure that Node.js and NPM are installed on your machine.

    Basic example to Debian and Ubuntu based Linux distributions:

    Node.js

    curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs

    See more installation options LINK

    npm is installed with Node.js just check in linux terminal like below:

    node -v
    npm -v

    Set BrowserSync inside folder /templates/webpack.mix.js and change your dev url

    proxy: 'http://localhost/mix/', to your installation processwire folder like:
    proxy: 'http://localhost/your-processwire-installation-folder/',

    Next install npm packages in your templates folder with command npm install
    Now, boot up the dev server npm run watch, and you're all set go!
    On completion, use the command npm run production to build styles and scripts in the dist folder

    Simple Usage ( Basic Command )

    • Run npm install
    • Watch npm run watch
    • Build npm run production

    All files to Webpack build steps is inside file ( webpack.mix.js )

    Folder With all SCSS files is inside templates/src/scss

    All build styles and scripts is inside the ( dist ) folder

    References:

    Milligram
    Gridlex
    Laravel Mix
    Feather Icons
    Web Font Loader
    Verlok Lazy Load
    Cookie Consent
    Particles.js

     

     

     

     

    • Like 7
    • Thanks 1
  2. I tested your version on the latest issue of Processwire 3.0.95 with a defolt Profile (site-beginner) and it works if I add into $pages->find() selector => images.count>0

    Now he should search only if the field has images :) 

    images.count>0

    _func.php

    function test($selectTemplate) {
    
        $pages = wire('pages');
        $children = $pages->find("parent.template={$selectTemplate}, include=all, limit=3, images.count>0");
        $out = '';
    
        foreach($children as $child) {
    
    			$image = $child->images->first;
    			$out .=  '<img src="'.$image->width(50)->url.'">';
    
        }
    
        return $out;
    }

    basic-page.php

    <?=test('basic-page'); ?>

     

     

  3. Thanks to you and ( @kongondo' , @Pete , @justb3a )  for a great blog profile which is a good alternative to wordpress ...
    I noticed a very small error in ready.php, the translation function lacks ...

    Error: Uncaught Error: Call to undefined function _() in /srv/http/proc-blog/site/ready.php:12

    "nextItemLabel"        =>    _("Next Page &gt;"),
    "previousItemLabel"    =>    _("&lt; Previous Page"),

    "nextItemLabel"            =>    _("Next Page &gt;"),

    "previousItemLabel"     =>    _("&lt; Previous Page"),

    Just add double underlining to translations __()

    Yeah, thanks a great profile for once.

    • Like 2
  4. Maybe it will help you

    _func.php

    // IMAGE FROM FIRST CHILDREN
    function myThumb($page) {
    
    $out = '';
    
    if ( !count($page->child->images) ) return 'Add Image';
    
    $image = $page->child->images->first;
    
    $out .= '<img src="'.$image->width(200)->url.'">';
    
    return $out;
    
    }
    
    // IMAGES FROM PAGE CHILDRENS
    function myThumbs($p_children) {
    
    	$out = '';
    
    	foreach ($p_children as $page) {
    
    		if (count($page->images) ) {
    
    			$image = $page->images->first;
    	
    			$out .= "<img src='{$page->images->first->width(200)->url}'>";
    		}
    
    	}
    
    	return $out;
    	
    }

     

    basic-page.php

    <?php echo myThumb($page); ?>
    <hr>
    <?php echo myThumbs($page->children); ?>

     

  5. This profile can be used as a simple business card or blog.

    The profile does not use any framework css structure, only styles based on CSS GRID and FLEX.

    To minimize page loading, I added lazy load for images ( Tupola Lazy Load ).

    With include functions like:

    MarkupRegions

    FunctionsAPI

    CAN DOWNLOAD FROM THIS LINK:

    https://github.com/rafaoski/site-grayscale-pw

    https://github.com/rafaoski/site-min-grayscale-pw

    Screenshot:

    full-grayscalepw-compressor.thumb.jpg.f69cb4f6abc97f1f8e8b1ad3d70a8159.jpg

     

    • Like 12
  6. This code should help you get to the wire directory:

    <link rel="icon" type="image/x-icon" href="<?php echo $config->urls->root ?>wire/favicon.ico">


    But I prefer to add in the directory of my template files in which I change the path to (templates/):

    <link rel="icon" type="image/x-icon" href="<?php echo $config->urls->templates ?>assets/img/favicon.ico">


    Here you can read more about $config:
    https://processwire.com/api/variables/config/

    • Like 1
  7. Hi and thanks @MilenKo ...  I've just tested on version 3.0.85 and installed the profile without any problems ...
    I do not know if you have unpacked catalog correctly in the installer folder ...
    A while back I added a simple tutorial on how to install profiles and maybe this simple tutorial will help you:

     

    I also recommend you this profile:

    Which I recently added and is based on Spectre.css ... I think you should also like it ... It is very simple and clean ...

    You may have trouble with CHMOD access rights if you use Linux or Mac locally, but I'm not sure because I installed the profiles on the Laragon test environment as well as ordinary shared hosting ...
    Maybe these links will help in something:

    https://processwire.com/docs/security/file-permissions/

    A simple example for files and folders:

    https://help.directadmin.com/item.php?id=589

  8. Maybe this way can help ...
    I often use delayed loading for images from this page

    https://appelsiini.net/projects/lazyload/

    Adds a script in bottom with async or defer to better load page time

    <script src="<?php echo $templ_url?>assets/js/lazyload.min.js" defer></script>
    <script>
        window.addEventListener("load", function(){
            lazyload();
        });
    </script>


    And I add the lazyload class for the image along with data-src

    <img class='lazyload' data-src="/your-image-url" alt="img-alt">

     

    • Like 2
  9. Hello All ... I just added a new Site Profile Based on Spectre.css ...

    A lightweight profile that can be the basis for your blog . There are several pages like About Us, Blog, Contact Page, Categories, Authors ...
    He also uses the Font Awesome.

    CAN DOWNLOAD FROM THIS LINK:

    http://modules.processwire.com/modules/site-spectre/

    https://github.com/rafaoski/site-spectre

    Live Example

    Some Screenshots:

    home-compressor.thumb.png.d324183e74f137dca276a89be1218f82.png

    blog-compressor.thumb.png.452d50aada9332b82fae1e0fc53efeec.png

    categories-compressor.thumb.png.568afdc3eb48622272fc68bb5743c5ec.png

    contact-compressor.thumb.png.d80b4391d4b8837525c3073f5ae696e5.png

    options-page-compressor.thumb.png.eab1f46a4f0f9af75875435606db6dcb.png

    authors-compressor.png

    If you enable multilingual support, you will have a simple menu for switching between languages.

    multi-lang.png.d8560863940aed9784130e42b6b9ffad.png

    • Like 10
  10. Hi @teppo. Yes you has a lot of experience and your point of view seems to me to be right. When it comes to slimming processwire it would generally be useful to compress all the images that are in the profiles.
    I used a compressor from here:
    https://compressor.io/compress
    And I compressed the images in the Regular profile that you can download from here:
    https://github.com/rafaoski/site-compress
    Comparing it with the uncompressed profile from here:
    https://github.com/ryancramerdesign/regular
    I reduced regular profile  by 1.5MB, It would be nice to have some compression when adding profiles to the core.

    • Like 3
    • Thanks 1
  11. 1 hour ago, szabesz said:

    Blank profile should stay no matter what, I guess. However, it is a good idea to make a poll. Formally I suggested that only two profiles are enough to be bundled with the core : a Blank Profile and a Multilingual Blog Profile. Should the Blog Profile be based on UIkit 3? That is debatable. (I myself use and like UIkit 3 so I vote for it...). The new Multilingual Blog Profile should only be based on UIkit 3 if there is a good tutorial for beginners on how to setup a development environment for it.

    A great summary of @szabesz. Generally, the selection of the list in which I write about theUikit Frameworks 3 it for this because it is already a ready profile Regular and I do not see the point to change the whole now to another framework. Anyway before this profile I had no knowledge of this The Uikit Frameworks, however after looking through and hijacking the possibilities of the number of elements to code quality is probably the most modern of all I have dealt with.

    33 minutes ago, bernhard said:

    i'm working on something in this direction :) i have to polish up a lot though. don't know when i find time...

    I keep my fingers crossed for you @bernhard

    • Like 1
  12. Hey @Tom., I added THIS profile the day before, but somehow it is no here. Just I tried sending it again called Class (SiteTwilight), but it looks like it is in profiles. I do not know why is not visible? on the modules page.

    Quote

    UPDATE:
    This profile is already in modules. You can download from here:
    http://modules.processwire.com/modules/site-twilight/

    This is not my first profile that I added, this profile it was also added earlier.

    I generally like @ryan words from this Roadmap: https://processwire.com/blog/posts/roadmap-2017/

    Quote

    New bundled site profile(s). This one was also mentioned in a previous blog post, and will be a high priority for 2017. At minimum, we'd like to drop the Classic profile that currently comes as an installation option, and replace it with a common CSS framework profile. We'd also like to have a bundled blog profile, which may be one and the same as the common CSS framework profile, or something different (we'll see). Regardless of which way it goes, we want to make sure that when someone installs ProcessWire for the first time, they have something that really shows off what's possible and inspires them to want to dig in to see how it works.

    Which describes how he would like to put it all to some degree in 2017.
    I'm also advocating his approach to creating two profiles.
    1. CSS Framework for fast building sites.
    2. The UIKIT Profile that contains the Blog.

    I do not know if you've understood my message about modern site profiles, maybe I did not get it right as I started writing.
    I do not want to add new site profiles just enrich existing profiles with 2 files, such as gulpfile.js + package.json (5kb), which gives me and many programmers the ability to quickly create new profiles, as in the above video. I like modern solutions that make my job easier. I do not want to create new startup profiles for myself, i like just start right away with the ones that give me the Processwire installer.

    I would like to also have such users also be able to quickly install Blog Profile from default Installation Processwire:

    After reading all the statements, it would be worthwhile to test it on the Processwire Weekly Which leads if I'm not mistaken @teppo ( Thanks to you Teppo for this Newsletter ).
    My sugestion to polls:
    1 - Leave one blank profile.
    2 - One CSS starter + One startup blog based on Uikit 3

    3 - One CSS starter + Startup blog based on Uikit 3 + New Multilingual Profile
    4 - Remove all the profiles and leave only Administrative Core like Laravel Voyager https://laravelvoyager.com/

    • Like 1
    • Thanks 1
  13. Hello @Robin S In general, the simplest stack gulpfile.js + package.json is about 5kb in size, its not a big file, and it speeds up front-end frameworks.
    I like the new UIKIT Starter and I would like to be able to edit it quickly with these tools without learning how to properly connect them to the profile.
    Processwire is not only a framework for PHP developers, but there are many who are faced with the front end.
    Note that the new users would like to see what Processwire can do and without Profiles it will not know anything else.
    The new ones will not know how to add a profile to the Processwire installer, and not everyone will go to the Processwire forum to find out more.

    You mentioned the reduction of the core and I agree with you 100% to throw out the profile but you could add an installer that gets profiles from github like the October CMS that can install automatic templates. I do not know if it's possible in Processwire (I know the basics of PHP but no more to create a new Download System).

    And this profile above I created using ProcessExportProfile, which works great, I made it for new users who might have installed it sometime and discover it that in addition to Wordpress, Joomla and Drupal is also ProcessWire ( Except that they need to know how to add to the installer ).
    I would like more developers and regular users to notice Processwire. But maybe the change I wanted was not the best way. Thanks to Robin for your point of view.

    • Like 2
  14. I would like every new Site Profile like new REGULAR Profile to have modern support for quick creation like browser sync, minify css, js . Something on the style below:

    https://foundationpress.olefredrik.com/

    https://understrap.com/

    One profile that does not have any CSS frontend attached but has the features needed to quickly add eg pagination, comment form, or site menu something like:

    https://roots.io/sage/

    OR

    https://laravel.com/docs/5.5/mix

    I'm not very godd with js but webpack.js meybe is good for this solution ... I would like to know what advanced users in the front end think about this combination and what would be the best ...

     

×
×
  • Create New...