Jump to content
thomassausen

First site, first problem

Recommended Posts

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

Share this post


Link to post
Share on other sites

sorry... i just answered to the last post of the previous page :D

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

$i=1;

foreach($latest_portfolio as $item) {

$lastClass = ($i % 3 == 0) ? " last" : "";

//....

echo '<div class="span3'.$lastClass.'"><article //...

//...

$i++;

}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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;
}
 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Also see this post, which shows you how to create a 'switch' function, similar to what you may see in EE. 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

But don't forget to use $sanitize on the GET

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...