MateThemes

March 19, 2020

This looks great and is really helpful!

Thanks for sharing it!

February 23, 2020

On 2/15/2020 at 11:36 AM, Mikie said:
Hi @MateThemes.

I think below is what you mean? This is for the portfolio-index.php.

Pagination is a bit more involved. You could use the inbuilt pager https://processwire.com/docs/front-end/markup-pager-nav/
<?php namespace Processwire;

$entries = $page->children();

foreach ($entries as $entry) {

	echo "<p>{$entry->title}</p>";

	foreach ($entry->images as $image) {

		$imgUrl = $image->width(600)->url;
		echo '<img src="' . $imgUrl '">';

	}
}

Hello!

Thank you for your help, that gives me a starting point!

February 9, 2020

Hello everyone!

I am working with Processwire since some time. But some topics are quite hard for me.

I have a Portfolio (Gallery) Page.

I am build a template with Portfolio Index and pages with portfolio entries.

Structure:

Portfolio Index
-- Portfolio Entry
-- Portfolio Entry

and so on.

Portfolio Entry has an Image field with max 12 images and are accessible Templates.

Now I want to display the single Portfolio Entry on the Portfolio Index and Paginate them. In the index page all images of a single Entry page should be displayed (I should not be organized as albums, where a random image of the portfolio entry should be displayed).

I have no clue to achieve this. May someone could give me an advice.

Thank you in advance!

January 22, 2020

Thank you for your help!!!

This get me started to work out my gallery block!!!

January 19, 2020

Hello everyone!

I have a markup and image field question:

I have a markup in which a gallery preview should be displayed on home page. This gallery have a special markup, 3 of 4 images have special image ratio.

The gallery looks like this.

The html markup is like this:

<div class="uk-section-muted" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-top-small; delay: 200;">
        <div data-src="./assets/images/arrahof/home-restaurant-bg.svg" class="uk-background-norepeat uk-background-contain uk-background-top-center uk-section uk-section-large" uk-img>
            <div class="uk-container uk-container-small">
                <div class="uk-margin-large" uk-grid>
                    <div class="uk-width-1-1@m">
                        <h2 class="uk-text-center" uk-scrollspy-class>Das Angebot im ArraHof</h2>
                    </div>
                </div>
                <div class="uk-grid-small uk-grid-margin-small" uk-grid>
                    <div class="uk-width-expand@s">
                        <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class>
                            <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#">
                                <img class="el-image" data-src="https://via.placeholder.com/610x604" data-sizes="(min-width: 610px) 610px" data-width="610" data-height="604" alt="Placeholder Image" uk-img>
                                <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div>
                                <div class="uk-position-center uk-position-small">
                                    <div class="uk-overlay uk-padding-large uk-transition-fade uk-margin-remove-first-child">
                                        <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">Lorem Ipsum</h3>
                                        <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="uk-width-expand@s">
                        <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class>
                            <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#">
                                <img class="el-image" data-src="https://via.placeholder.com/610x604" data-sizes="(min-width: 610px) 610px" data-width="610" data-height="604" alt="Placeholder Image" uk-img>
                                <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div>
                                <div class="uk-position-center uk-position-small">
                                    <div class="uk-overlay uk-transition-fade uk-margin-remove-first-child">
                                        <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">The Williams family</h3>
                                        <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="uk-grid-small uk-grid-margin-small" uk-grid uk-height-match="target: .uk-card; row: false">
                    <div class="uk-width-2-3@s">
                        <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class>
                            <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#">
                                <img class="el-image" data-src="https://via.placeholder.com/610x400" data-width="610" data-height="400" alt="Placeholder Image" uk-img>
                                <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div>
                                <div class="uk-position-center uk-position-small">
                                    <div class="uk-overlay uk-transition-fade uk-margin-remove-first-child">
                                        <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">The Williams family</h3>
                                        <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="uk-width-expand@s">
                    <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class>
                        <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#">
                            <img class="el-image" data-src="https://via.placeholder.com/610x820" data-sizes="(min-width: 610px) 610px" data-width="610" data-height="820" alt="Placeholder Image" uk-img>
                            <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div>
                            <div class="uk-position-center uk-position-small">
                                <div class="uk-overlay uk-transition-fade uk-margin-remove-first-child">
                                    <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">The Williams family</h3>
                                    <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="uk-margin-large" uk-grid>
            <div class="uk-width-1-1@m">
                <div class="uk-text-lead uk-width-xxlarge uk-margin-auto uk-text-center" uk-scrollspy-class>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</div>
                <div class="uk-margin-medium uk-text-center" uk-scrollspy-class>
                    <a class="el-content uk-button uk-button-default uk-button-large" href="#">Unterkunft</a>
                </div>
            </div>
        </div>
    </div>
</div>

How can I achieve when I have an image field to add the custom markup within the image field? I have no clue to get this done.

Thank you!

January 14, 2020

16 hours ago, flydev ?? said:

Hi,

You can add a variable which store the number of menu shown in your foreach() loop then add the class uk-hidden to the rest of items:


<?php 

$nMenu = 0; // number of menu shown

foreach(...) { 
  // [...]
  
  // check the var, if > 5 then add uk-hidden class to the elem
  $hidden = ($nMenu < 5) ? '' : ' uk-hidden';
  echo "<li class='someClass{$hidden}'>My Menu </li>";
  
  // [...]
  
  $nMenu++; // increment 

} // end foreach

Thank you very much for your help! This works like a charm!!!

January 13, 2020

Hello community!

I am quite new to PHP and I am still learning. So I run into following problem.

I have a Table in a Repeater Matrix. This Table displays some menu items of a restaurant cart. I want to show 5 items and the other cart items should be visible only a button is clicked (Typical hide/show jquery topic, as far as I see.)

Following markup I have in my RepeaterMatrix:

<div id="tm-menu-marketing" class="uk-section-default" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-small-top; delay: 200;">
    <div data-src="<?=urls()->templates?>/assets/images/home-menu-bg.svg" uk-img class="uk-background-norepeat uk-background-bottom-left uk-background-image@l uk-section uk-section-large">
        <div class="uk-container">
            <div class="uk-grid-large uk-grid-margin-large" uk-grid>
                <div class="uk-width-expand@m">
                    <div class="uk-text-small uk-margin uk-text-center" uk-scrollspy-class>
                        <span class="uk-heading-divider"><?php echo $page->menu_table_time ?></span>
                    </div>
                    <h2 class="uk-text-center" uk-scrollspy-class><?php echo $page->menu_table_headline ?></h2>
                    <ul class="uk-list uk-list-large uk-margin-large" uk-scrollspy-class>
                        <?php foreach($page->menu_tables as $menu_table) { ?>
                        <li class="el-item" uk-scrollspy-class>
                            <div class="uk-child-width-auto uk-grid-small uk-flex-bottom" uk-grid>
                                <div class="uk-width-expand">
                                    <span class="el-title uk-display-block" uk-leader><?php echo $menu_table->_menu_name ?></span>
                                </div>
                                <div>
                                    <div class="el-meta uk-text-primary"><?php echo $menu_table->_menu_price ?></div>
                                </div>
                            </div>
                        </li>
                        <?php } ?>
                    </ul>
                    <div class="uk-margin uk-text-center" uk-scrollspy-class>
                        <a id="loadMore" class="el-content uk-button uk-button-default uk-button-large" href="#">Komplette Speisekarte anzeigen</a>
                    </div>
                </div>
                <div class="uk-width-expand@m">
                    <div class="uk-text-small uk-margin uk-text-center" uk-scrollspy-class>
                        <span class="uk-heading-divider"><?php echo $page->menu_table_time_2 ?></span>
                    </div>
                    <h2 class="uk-text-center" uk-scrollspy-class><?php echo $page->menu_table_headline_2 ?></h2>
                    <ul class="uk-list uk-list-large uk-margin-large" uk-scrollspy-class>
                        <?php foreach($page->menu_tables_2 as $menu_table_2) { ?>
                            <li class="el-item" uk-scrollspy-class>
                                <div class="uk-child-width-auto uk-grid-small uk-flex-bottom" uk-grid>
                                    <div class="uk-width-expand">
                                        <span class="el-title uk-display-block" uk-leader><?php echo $menu_table_2->_menu_name_2 ?></span>
                                    </div>
                                    <div>
                                        <div class="el-meta uk-text-primary"><?php echo $menu_table_2->_menu_price_2 ?></div>
                                    </div>
                                </div>
                            </li>
                        <?php } ?>
                    </ul>
                    <div class="uk-margin uk-text-center" uk-scrollspy-class>
                        <a class="el-content uk-button uk-button-default uk-button-large">Komplette Speisekarte anzeigen</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Now my question. How can I count the Table items, if I have 5 items a uk-hidden class should be added to the li element and then I would like to run the hide/show script.

$(function () {
    $("li").slice(0, 8).addClass('uk-hidden');
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $("li:hidden").slice(0, 8).addClass('uk-hidden');
        if ($("li:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
    });
});

Does anyone have a clue?

Thank you in advance!

Themes and Profiles · October 12, 2019

Hello!

First: Thank you for this great profile!!!

I have a question: where can I turn of comments displayed on the blog post page? I cannot find it in the _func.php!

Thank you very much!

Themes and Profiles · September 28, 2019

Hello everyone!

I use Ryan's site profile blog for my new website. Everything works great, but i am not able to change the url of the blog categories. Currently the url is root_url/categories. My client wants the url root_url/news/categories.

If change the url in the tab url from /categories to news/categories Processwire change it to news-categories!

How can I change that or can I change it in the php file too?

Thanks for your help for a beginner!

September 26, 2019

10 hours ago, dragan said:

Are you really sure it's the same setup? Are the relevant pages published and un-hidden?

Yes!

By the way I exported the site with the exporter tool. It is the same as on the mamp installation.

I will check everything again. Maybe I didn't see something!

September 25, 2019

12 hours ago, Robin S said:

Possible reasons...

1. Your /site/ready.php is missing this code: https://github.com/ryancramerdesign/regular/blob/master/site-regular/ready.php

2. The child pages you are looping over do not (all) use a template named "category". The hook code linked to above attaches a numPosts() method only to pages using the template "category".

Hello!

Thank you for your answer. I checked both reasons but they are not the reason for the error.

The crazy think is that it works great on my local mamp installation?!

September 25, 2019

Hello everyone!

I use ryans blog site profile to build my template around it. I use my mamp pro setup with php 7, mysql 5 and apache server. On my local setup the following code works fine:

<?php foreach(page()->children as $category): ?>
	<a class='uk-link-reset' href='<?=$category->url?>'>
		<div class='uk-card uk-card-default uk-card-hover uk-card-body'>
			<h3 class='uk-card-title uk-margin-remove'><?=$category->title?></h3>
			<span class='uk-text-muted'><?=$category->numPosts(true)?></span>
		</div>
	</a>
<?php endforeach; ?>

It is the same code as ryan used it, only my css classes. On my live server with the same setup as mamp pro i got following error:

Does anyone have the same error in this context?

Thank you very much for your help!

September 17, 2019

Hello!

Are there any news on Padloper 2? (release date etc.)

I am currently planning a theme marketplace and I want to realize this with Processwire and Padloper 2.

Thanks!

September 10, 2019

19 hours ago, Sebi said:

Hi @MateThemes,

ProcessWire allows you to have any custom folder you want in its root, so you can leave your cam-directory where it is. The path to the images will stay the same. So, if you included an image with <img src="/cam/someimage.jpg"/> before, you do it just like that in your processwire-template file.

Just a small restriction to notice:
You must not create a page with "cam" as path in processwire, because that will block access to your folder.

Thank you for your help!!!

It is good that I can leave everything as it is!

September 8, 2019

Hello everyone!

I have webcam images, that are uploaded every 5 minutes to the server. Currently the webpage is written in plain html but we want to switch to processwire. The current file path is in the root -> cam/someimage.jpg.

Now if i am installing processwire, processwire will be in the root and the images could be still in cam/someimages.jpg but how can I access this images on a page?

Or does anyone have expiriences with such topics?

Thank you in advance!

Themes and Profiles · August 7, 2019

On 7/31/2019 at 7:54 AM, rafaoski said:
The easiest way is to set the options page in the _init.php file:
$siteOptions = $pages->get('/options/');

// If you set setFunctionsAPI ( $config->useFunctionsAPI = true;  ) to true in the configuration file, you can display them in the template in this way

$siteOptions = pages()->get('/options/');

//or
$siteOptions = pages('/options/');
Then in the template just display the fields:
<h1><?= $siteOptions->site_name ?></h1>

<?php
// In the field settings you should select to display a single image
if ($siteOptions->logo): ?>

	<img src="<?= $siteOptions->logo->url ?>" width='100' alt="<?= $siteOptions->logo->description ?>">

<?php endif ?>
Or add new “Unique” status for pages https://processwire.com/blog/posts/pw-3.0.127/
Add this status to the Options page and in the _init.php file get this way:
$siteOptions = pages()->get('options');

// or
$siteOptions = pages('options');

Hello!!!

Thank you very much for your help!!! It works now like a charm!

Themes and Profiles · July 31, 2019

18 hours ago, rafaoski said:
Hi ... Jonathan Lahijani has a great tutorial on youtube that can help you

Simply put, you need to create an option template,
then add 2 pages, one in the page tree named options, to which you choose the option template, and under the admin add another page and change the name, for example (admin_options), so that the names are not identical. Choose a process named ProcessPageEdit and save the page ...
in admin.php paste the code
// Custom Options Page
if( page()->name == 'admin_options' ) input()->get->id = pages()->get('options')->id;
Finally, you can add some css to hide the options page in the page tree.
/** Hook Admin Custom CSS */
$wire->addHookAfter('Page::render', function($event) {
	if(page()->template != 'admin') return; // Check if is Admin Panel
	$value  = $event->return; // Return Content
	$templates = urls()->templates; // Get Template folder URL
	$style = "<link rel='stylesheet' href='{$templates}assets/css/admin.css'>"; // Add Style inside bottom head
	$event->return = str_replace("</head>", "\n\t$style</head>", $value); // Return All Changes
});
You can also download the profile that has the option page created and see how you can create your own options page
https://github.com/rafaoski/site-minimal

Hello!!!

Thank you for the share. This is what I need!!!

What is the best way to get the fields in the template if you want to access them?

Themes and Profiles · July 30, 2019

18 hours ago, bernhard said:

Hi,

it would be helpful for everybody to list what you've tried and what did not work and why ?

What about https://modules.processwire.com/modules/settings-factory/ ?

As I described in short, I tried it with a custom settings page (with a blank template) under admin. But then no Fields were assigned. I tried it this way because I want to have a native feeling for the settings and the page should appear under the main navigation.

Is there any detailed tutorial for my purpose? I didn't find any.

I didn't know the module "settings factory" I will give it a try.

Themes and Profiles · July 29, 2019

Hello everyone!

I have searched the forum for quite a long time and I tried some solutions for my topic but nothing seems to work.

I need to create a Settings Page and for a native feeling I want to create it under the main navigation on top. The settings page should hold the Main Logo, some styling and other settings. As I said nothing seems to work for me. I tried to create a Page under Admin with Admin Template and ProcessPageEdit but then I can't assign an image field.

I don't want to write a module because it is to much work for only 3 settings.

I hope someone of the forum could help me out!

Have a nice day!

June 29, 2019

Hello everyone!

I have a problem with pagination. I have following code:

<div class="uk-section">
  <?php
  	$results = $pages->find("template=gallery, limit=10, sort=title");
    $pagination = $results->renderPager();
  		echo $pagination;
        echo "<ul class='uk-pagination uk-flex-center'>";
        foreach($results as $result) {
          echo "<li><a href='{$result->url}'>{$result->title}</a></li>";
        }
        echo "</ul>";
       	echo $pagination; ?>
</div>

Which works fine. And this markup results in following html code:

<div class="uk-section">
  <ul class='uk-pagination uk-flex-center'>
    <li>
      <a href='/galerie-bisheriger-projekte/'>Galerie bisheriger Projekte</a>
    </li>
    <li>
      <a href='/galerie-bisheriger-projekte/galerie-1/'>galerie-1</a>
    </li>
  </ul>                    
</div>

But instead of "Galerie bisheriger Projekte" and "galerie-1" I want to have a number.

And as last question, how can I add a previous and next button?

Thanks for your help!

May 12, 2019

Here is my Patreon! https://www.patreon.com/matethemes

If you wanna support the work...

Processwire is the greatest CMS I have ever seen.

May 12, 2019

Hello everyone!

I decided to develop a marketplace for Processwire.

What do you think about that? It should be a centralized place for modules and profiles!

Who wanna to collaborate with me?

May 11, 2019

I am really looking forward for this ecommerce module.

Are there any plans about pricing for the module for now?

Thank you!

May 7, 2019

Hello everyone!

So as far as I understand the discussion, it is not possible to make a repeaterfield searchable in a repeater matrix. Is this right?

Thank you!

April 29, 2019

Thank you very much for this starting tutorial!

I love to work with Twig. I am switching over from OctoberCMS to Processwire and it is hard to get over from Twig template files to a plain PHP.

So I am happy to have a starting point to start working with Twig in my Processwire Projects.

Greetings from Austria to Germany

Sign In

Profiles

Forums

Store

Posts posted by MateThemes