Jump to content

First site, first problem

thomassausen

By thomassausen,
in Getting Started

 Share

Recommended Posts

Wanze Hero Member

Wanze

Posted
Posted

No Problem for Pw. Instead of a module, you have to generate the markup for the slider in your template.

For example, check the documentation section of your first link:

http://dimsemenov.com/plugins/royal-slider/documentation/

Do all the steps as described (add js, css etc..). Then simply grab the Images / Text from the fields.

<!-- STEP 2, see the docs from the link above -->
<div class="royalSlider rsDefault">

<?php
  foreach ($page->images as $image) {
   echo "<div>";
   echo "<img class='rsImg' src='{$image->url}' alt='{$image->description}'>";
   echo "<p>{$image->description}</p>";
   echo "</div>"; 
}
?>

</div>

The code above would create a slide for each Image with the description text below. As far as you only want to slide Image + Text, there's no need for a repeater. You can use a field of type Image which allows you already to store multiple images with descriptions

  • Like 2
Link to comment
Share on other sites
MatthewSchenker Hero Member

MatthewSchenker

Posted
Posted

Greetings,

Implementing a slideshow in ProcessWire is very intuitive.  As long as you know the "standard" ways of including JQuery and CSS in your pages, and calling JQuery on a particular page, you are all set.  There is just a bit of ProcessWire-specific syntax.

I use BxSlider, Galleria, and FlexSlider in my sites.  I find them very flexible and easy to use when implementing dynamic images.  Below I outline the steps I use to get Galleria working.

Step 1: Include the Associated JQuery and CSS Files

The first step involves downloading the necessary files from the Galleria Web site and including them in your ProcessWire installation.  In my example, I am using the basic Galleria CSS and JQuery, and I am using a Galleria theme, so I have three files altogether.

1. Place the CSS files here: /site/templates/styles

2. Place the Javascript files here: /site/templates/scripts

3. In your template, include the following in the <head> area (I include this in my head.inc file):

<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/galleria.classic.css" />
<script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/galleria-1.2.8.min.js"></script>
<script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/galleria.classic.min.js"></script>

Step 2: Loop Through the Images in Your Template

These instructions assume you have created an image upload field called "images."  It also sets a size on the fly for the "large" gallery images and the "thumbnails."  I run a test to assure that there are images.  And I have linked the images to the content.  You might do some of this differently.  Just adapt your code.

Add the following code (or something similar) where you want the slider to appear in your template:

<?php
/* Test to see if there are gallery images uploaded (number of images is > 0). If so, present a gallery. If not, leave this area blank. */
$image_num = count($page->images);
if($image_num > 0)
{ ?>
	<div id="galleria_holder">
	   <div id="galleria">
		<?php
		  foreach ($page->images as $gall_image) {
		  $large = $gall_image->size(640, 480);
        	  $thumb = $gall_image->size(200, 150);
		?>
    	          <a href="<?php echo $large->url; ?>"><img src="<?php echo $thumb->url; ?>"</a>
                <?php
                } ?>
	   </div>
	</div>

Step 3: Fire the Galleria Script

Directly below the code shown above, call the Galleria script and its options.  Check the Galleria Web site for full instructions, but it is straight JQuery work at this point.

The code below calls a Galleria theme, sets a "fadeslide" transition, and turns off the "counter" option (then closes the conditional statement opened in the snippet from Step 2):

<script>
    Galleria.loadTheme('<?php echo $config->urls->templates?>scripts/galleria.classic.min.js');
    Galleria.run('#galleria', {
    transition: 'fadeslide',
    showCounter: false
});
</script>

<?php
} ?>

There are some particular details for Galleria.  But the three steps shown above are the same for just about any JQuery script I can think of.

Thanks,

Matthew

  • Like 5
Link to comment
Share on other sites
thomassausen Jr. Member

thomassausen

Posted
  • Author
Posted

Another question. I'm using a grid and want to show all my portfolio-items in a 3 column grid. Every third item need a last-class.

So we had in this topic:

<?php 
$latest_portfolio = $pages->get("/portfolio")->children();
foreach($latest_portfolio as $item) {
$thumb = $item->portfolio_image->size(270);
echo '<div class="span3"><article class="item"><a href="' . $item->url . '"> 
<img src="' . $thumb->url . '" alt="' . $thumb->description . '" class="teaser"/></a></article></div>';
} ?>

And it's fine. But how do I add on every third item a last class? So there ist: <div class=span3"></div><div class=span3"></div><div class=span3 last"></div>?

Need another if-case with hmm modulo operator?

Link to comment
Share on other sites
diogo Hero Member

diogo

Posted
Posted

You answered your question:

$i=1;
foreach($latest_portfolio as $item) {
    $thumb = $item->portfolio_image->size(270);
    echo '<div class="span3' . ($i % 3 === 0 ? ' last' : '') . '"><article class="item"><a href="' . $item->url . '"> 
    <img src="' . $thumb->url . '" alt="' . $thumb->description . '" class="teaser"/></a></article></div>';
$i++;
}

edit: too slow... Wanze takes the prize :)

  • Like 1
Link to comment
Share on other sites
diogo Hero Member

diogo

Posted
Posted
I'm no expert but isn't it also possible to do it with CSS selector nth-child ?

Not if he is using a framework, I guess... but if not, I'm totally with you:

item{ 
  float: left;
}
item:nth-child(3n+1){
  clear: left;
}
 
Link to comment
Share on other sites
thomassausen Jr. Member

thomassausen

Posted
  • Author
Posted

Another framework-question. This time about: Twitter Bootstrap.

Each row consists of 12 column.

So: 

<div class="row">

<div class="span6">Content</div>

<div class="span6">Content</div>

</div>

is the way to go. If you need more than two items, you need more rows (margin-issue):

<div class="row">

<div class="span6">Content</div>

<div class="span6">Content</div>

</div>

<div class="row">

<div class="span6">Content</div>

<div class="span6">Content</div>

</div>

I did this:

<?php 
 $members = $pages->get("/profil")->children();
 foreach($members as $member) {
   $thumb = $member->about_image;
   echo '
  <div class="span6">
      <div class="row-fluid">
      <div class="span6 doCenter">
      <img src="' . $thumb->url . '" alt="' . $thumb->description . '"/>
      </div><!-- /.span6 doCenter -->
      <div class="span6">
      <h3 class="vmedium">' . $member->title . '</h3>
      <span class="vitalic">' . $member->about_job . '</span>
      </div><!-- /.span6 -->
      </div><!-- /.row-fluid -->
      </div><!-- /.span6 -->
      ';
      }
?>

It's working fine but it output:

<div class="row">

<div class="span6">Content</div>

<div class="span6">Content</div>

<div class="span6">Content</div>

<div class="span6">Content</div>

</div>

So how is it possible to add <div class="row"> before and </div> after two items?

Link to comment
Share on other sites
ryan Hero Member

ryan

Posted
Posted

It's hard to say exactly here because I don't see where the <div class="row"> is output in the code example. But generally if you want to take some action (like outputting an opening or closing div tag) after a predefined quantity of items, then you'd use the PHP modulus operator, as described above in an earlier post. Or you can use a counter variable ($cnt) that you increment on every iteration and then check if it's at the iteration you want. For example, this would have two span6 divs within each row div: 

$cnt = 0; 
foreach($something as $item) {
  $cnt++;
  if($cnt == 1) echo "<div class='row'>"; // start new row
  echo "<div class='span6'>Content</div>";
  if($cnt == 2) { // end row
    echo "</div>";
    $cnt = 0; // reset
  }
}
// if $cnt != 0 then we have an unclosed row, so close it:
if($cnt) echo "</div>";

It's possible that the last row div could have only one span6 div. If you wanted to prevent that possibility, you'd add this before the last line:

if($cnt == 1) echo "<div class='span6'>Content</div>";
  • Like 1
Link to comment
Share on other sites
thomassausen Jr. Member

thomassausen

Posted
  • Author
Posted

Thanks at all for your great support.

Now I'm building my blog. In sidebar I'll output all categories like this:

<h3>Categories</h3>
<ul class="list categories">
<? 
$categories = $pages->get("/categories")->children();
foreach($categories as $category) { ?>
<li><a href="<?= $category->url ?>"><?= $category->title ?></a></li>
<?;} ?>
</ul><!-- /.list .categories -->

So on click categories.php will load with url like: site.com/categories/categoryname

How do I filter the output? I want to show only the right category, guess based on url.

Link to comment
Share on other sites
Joss Hero Member

Joss

Posted
Posted

Head over to the Cheat sheet again and look for inputs ... that is where the gets and posts are.

That way you can use just the one category page

So, you can make an href to /blog/?cat=<?php echo $category->title; ?>

and then on the incoming category page, fetch the value with

$category = $input->get->cat

And do with it as you need.

Link to comment
Share on other sites
thomassausen Jr. Member

thomassausen

Posted
  • Author
Posted

This works

<h1>Category: <?=$page->title?></h1>
<? foreach($pages->find("post_categories=$page") as $post)?>
<div class="post">
<h2>
<? if ($post->body != Null ) { ?>
<a href="<?= $post->url ?>"><?= $post->title ?></a>
<?; } else { echo $post->title; }?>
</h2> 

etc.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...