I have a parent page that acts as menu for my portfolio.
It pulls in thumbnail images from the child pages which i have been able to accomplish with magic fields and some code. It dumps the images into a grid layout. The thumbnails are pulled into one container div like so:
div id="folio-content">
<div class="thumb-container">
<div class="thumb"><img src="/images/pic.jpg"/>
</div>JCPenny</div>
... </div>`
when the div gets filled up with 2 thumbnails I want to create a new container div and fill it with 2 images again and so on after 2 images.
So, if you had 4 images it would look like this.
<div id="folio-content"><!--/Main Container/-->
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>JCPenny</div>
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>Champ Car</div></div>
<div id="folio-content"><!--/Main Container/-->
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>JCPenny</div>
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>Champ Car</div></div>
this is the code I am using in my page.php file.
<?php get_header(); ?>
<div id="folio-content">
<?php
$projectpage = get_pages('child_of='.$post->ID.'&sort_column=post_date&sort_order=desc');
$count = 0;
foreach($projectpage as $page)
{
$content = $page->post_content;
if(!$content)
continue;
if ($count == 10) --- this is geting 10 images now, but I want to get them all.
break;
$count++;
$content = apply_filters('the_content', $content);
?>
<div class="thumb-container">
<div class="thumb"><a href="<?php echo get_permalink($page->ID); ?>"<?php echo get_image ("thumbnail",1,1,1,$page->ID);?></a>
</div><?php echo $page->post_title ?>
</div>
<?php
}
?>
</div><!--/close set!-->
</div>
also, how can I get ALL child pages? I have it set to 10 now with this if ($count == 10)
any help? thanks a ton again!!!!
I'm not familiar with "get_pages" but since Wordpress treats posts and pages in an identical manner you could use this.
$projectpage = get_posts('numberposts=-1&post_type=page&child_of='.$post->ID.'&sort_column=post_date&sort_order=desc');
The -1 removes the limit and gets ALL the specified pages.
I have cobbled together some code, that sort of sounds right but does not work at all! Which I am not surprised. But it is a starting point - please take a look at this code, maybe it is step in the right direction?
<?php
$projectpage = get_posts('numberposts=-1&post_type=page&child_of='.$post->ID.'&sort_column=post_date&sort_order=desc');
if (have_posts()) :
$i=0; // counter
while(get_posts()) : the_post();
if($i%2==0) { // if counter is multiple of 3, put an opening div ?>
<!-- <?php echo ($i+1).'-'; echo ($i+2); ?> -->
<div>
<?php } ?>
<div class="single_item">
<h2><?php the_title(); ?></h2>
</div>
<?php $i++;
if($i%2==0) { // if counter is multiple of 3, put an closing div ?>
</div>
<?php } ?>
<?php endwhile; ?>
<?php
if($i%2!=0) { // put closing div here if loop is not exactly a multiple of 3 ?>
</div>
<?php } ?>
<?php endif; ?>
Related
Trying to display the custom posts on my archive page within a bootstrap row containing 3 columns then starting a new row, got the code but new to PHP and dont know where to put the content.
<?php
//Columns must be a factor of 12 (1,2,3,4,6,12)
$numOfCols = 3;
$rowCount = 0;
$bootstrapColWidth = 12 / $numOfCols;
?>
<div class="row">
<?php
foreach ($rows as $row){
?>
<div class="col-md-4"<?php echo $bootstrapColWidth; ?>">
<div class="thumbnail">
<img src="user_file/<?php echo $row->foto; ?>">
</div>
</div>
<?php
$rowCount++;
if($rowCount % $numOfCols == 0) echo '</div><div class="row">';
}
?>
</div>
<div class="embed-container">
<?php the_field('podcast_embed_link'); ?>
</div>
<h3><?php the_title(); ?></h3>
<p><b><?php echo $date->format( $format_out );?></b></p>
<p><?php the_field('description'); ?></p>
<?php if( get_field('thumbnail') ): ?>
<img src="<?php the_field('thumbnail'); ?>" />
<?php endif; ?>
<?php endwhile; // end of the loop. ?>
</div>
</div>
</div><!-- #content -->
Here is the code for the page archive.podcasts.php, where would i add the custom fields within the row loop?
First of all, you don't need to close and open row tag each 3 items. If you leave the code like this:
<div class="row">
<?php
foreach ($rows as $row){
?>
<div class="col-md-<?php echo $bootstrapColWidth; ?>">
<div class="thumbnail">
<img src="user_file/<?php echo $row->foto; ?>">
</div>
</div>
<?php
}
?>
</div>
you will get the same effect, but without the separation that a row tag involves. Notice that the line involving "col-md-4" has already changes in order to not create wrong col size usage.
In this part of code:
<div class="col-md-4"<?php echo $bootstrapColWidth; ?>">
You must get wrong bootstrap class like col-md-41, col-md-412.
Correct you code by this way:
<div class="col-md-<?php echo $bootstrapColWidth; ?>">
I have a simple MySQL table that stores four fields - CATEGORY, TITLE, DESCRIPTION, IMAGE as well as a unique ID for each row.
I use ORDER BY CATEGORY to display all of them on the page through one query.
SELECT
RESOLUTIONS.CATEGORY,
RESOLUTIONS.ID,
RESOLUTIONS.TITLE,
RESOLUTIONS.DESCRIPTION,
RESOLUTIONS.IMAGE
FROM
RESOLUTIONS
ORDER BY
RESOLUTIONS.CATEGORY
I want to create a jump menu that will jump to the first row of each category on the page. Is this possible using php? I know how to create a jump menu that jumps to an ID anchor of a div, but how can I make a unique identifier (that I can jump to) inside the repeat region?
Here is the repeat code I have now...
<?php
while(!$DETAILS->atEnd()) {
?>
<div class="row g-my-10 g-color-black">
<?php if($DETAILS->getColumnVal("IMAGE")!= "") { ?>
<div class="col-md-9">
<h2><?php echo($DETAILS->getColumnVal("TITLE")); ?></h2>
<?php echo($DETAILS->getColumnVal("DESCRIPTION")); ?>
</div>
<div class="col-md-3"><img src="images/<?php echo($DETAILS->getColumnVal("IMAGE")); ?>" class="img-fluid"></div>
<? } else { ?>
<div class="col-md-12">
<h2><?php echo($DETAILS->getColumnVal("TITLE")); ?></h2>
<?php echo($DETAILS->getColumnVal("DESCRIPTION")); ?>
</div>
<?php } ?>
</div>
<?php
$DETAILS->moveNext();
}
$DETAILS->moveFirst(); //return RS to first record
?>
In each iteration check if the category is different than the one before and create an anchor.
<?php
// set any initial value that does not match an empty category (if you have them)
$lastCategory = false;
while(!$DETAILS->atEnd()) {
<div class="row g-my-10 g-color-black">
<?php
// this category is different than the last: create anchor
if ($lastCategory !== $DETAILS->getColumnVal("CATEGORY")) {
echo '<a name="category-' . $DETAILS->getColumnVal("CATEGORY") . '"></a>';
// set the compare-value to the current category
$lastCategory = $DETAILS->getColumnVal("CATEGORY");
}
?>
<?php if($DETAILS->getColumnVal("IMAGE")!= "") { ?>
<div class="col-md-9">
<h2><?php echo($DETAILS->getColumnVal("TITLE")); ?></h2>
<?php echo($DETAILS->getColumnVal("DESCRIPTION")); ?>
</div>
<div class="col-md-3"><img src="images/<?php echo($DETAILS->getColumnVal("IMAGE")); ?>" class="img-fluid"></div>
<? } else { ?>
<div class="col-md-12">
<h2><?php echo($DETAILS->getColumnVal("TITLE")); ?></h2>
<?php echo($DETAILS->getColumnVal("DESCRIPTION")); ?>
</div>
<?php } ?>
</div>
<?php
$DETAILS->moveNext();
}
$DETAILS->moveFirst(); //return RS to first record
?>
Note: You might have to put the anchor within the column or even the <h2>, depending on your grid system (is that bootstrap?). You maybe also want to refactor the generation of the title/description column, so you don't repeat yourself. Something like
<?php
if ($DETAILS->getColumnVal("IMAGE")!= "") {
$cols = '9';
} else {
$cols = '12';
}
?>
<div class="col-md-<?php echo $cols ?>">
<h2><?php echo($DETAILS->getColumnVal("TITLE")); ?></h2>
<?php echo($DETAILS->getColumnVal("DESCRIPTION")); ?>
</div>
<?php
if ($DETAILS->getColumnVal("IMAGE")!= "") {
?>
<div class="col-md-3"><img src="images/<?php echo($DETAILS->getColumnVal("IMAGE")); ?>" class="img-fluid"></div>
<?php
}
?>
Also note that according to PSR-1 you should use either <?php or the echo shortcut <?= but not just <?
And I know it's a matter of personal choice and also depends on what your file mainly contains (HTML or PHP), but I personally prefer echoing HTML code snippets instead of opening and closing PHP tags, because I find it easier to read (there is also a very marginal performance advantage)
I'm trying to insert 2 static div's inside a PHP loop, specifically one at the very beginning of the loop and one at the very end.
These 2 div's must appear within their corresponding .row parent which currently wraps around every 3 DIV's. How can I do this?
EDIT
Here's an image to describe what I need, the pink blocks are the manually inserted div's that will have different content to the blue divs. Those blue divs are just WP posts:
Here's my PHP, currently this creates 4 columns within the first and last rows where it should just be 3 columns:
<?php static $c=1;
$subs = new WP_Query( array( 'post_parent' => 14, 'post_type' => 'page' ));
if( $subs->have_posts() ) : while( $subs->have_posts() ) : $subs->the_post(); ?>
<?php if (($c % 3) === 1) {
// This creates part of the wrapper .row div
echo "<div class='row'>";
} ?>
<?php
if ($c == 1) {?>
<div class="col_4 card bar">
first card that is manually inserted with different content
</div>
<?php } ?>
<a href="<?php the_permalink(); ?>" class="col_4 card bar no-pad <?php if($c % 3 == 0) { echo 'last'; } ?>">
<?php if ( has_post_thumbnail() ) {?>
<div class="feature-image c-1">
<?php the_post_thumbnail('medium'); ?>
</div>
<?php } ?>
<div class="excerpt-wrap">
This is a post from within Wordpress
</div>
</a>
<?php if ($c == 6) {?>
<div class="col_4 card bar">
Last card that is manually inserted with different content
</div>
<?php } ?>
<?php if (($c % 4) === 3) {
echo "</div>";
}?>
<?php $c++; endwhile; endif; wp_reset_postdata(); ?>
EDIT
This is the HTML structure I'd like to achieve:
<!-- very first row -->
<div class="row">
<!-- This is a static block followed by the very first two worpdress posts-->
<div class="static-block"></div>
</div>
<!-- I could have 3 or 30 wordpress posts repeating this format -->
<div class="row">
</div>
<!-- very last row -->
<div class="row">
<!-- These are the very two worpdress posts followed by a static block -->
<div class="static-block"></div>
</div>
<?php
$c = 1;
$subs = new WP_Query(array('post_parent' => 14, 'post_type' => 'page'));
if ($subs->have_posts()) :
?>
<div class='row'>
<?php
while ($subs->have_posts()) : $subs->the_post();
if (($c % 3) == 0 || $c == 3):
?>
</div><div class='row'>
<?php
endif;
?>
<?php
if ($c == 1):
?>
<div class="col_4 card bar">
first card that is manually inserted with different content
</div>
<?php endif; ?>
<a href="<?php the_permalink(); ?>" class="col_4 card bar no-pad <?php if ($c % 3 == 0) { echo 'last'; } ?>">
<?php if (has_post_thumbnail()) { ?>
<div class="feature-image c-1">
<?php the_post_thumbnail('medium'); ?>
</div>
<?php } ?>
<div class="excerpt-wrap">
This is a post from within Wordpress
</div>
</a>
<?php if ($c == 7) { ?>
<div class="col_4 card bar">
Last card that is manually inserted with different content
</div>
<?php } ?>
<?php
$c++;
endwhile;
?>
</div>
<?php
endif;
wp_reset_postdata();
?>
if have more then 7 page and u want to static block add on last just
change 7 to post count value ( $c == $sub->post_count)
EDIT: sorry, it seems that I saw your post before you uploaded the pictures of the wireframe.
It's not so clear to me the goal of your code. But, what I understand is you need to generate an structure like this:
<div class='row'>
<div class='static'>
</div>
<div class='static'>
</div>
#here the loop will create
<div></div>
<div></div>
<div></div>
<div class='static'>
</div>
<div class='static'>
</div>
</div>
and this will be duplicated for as many i in your while you have.
if that is what you need, then I think what you need to do is count 1,2,3 with your $c variable. Everytime you are in $c = 1 print the first 2 static divs, and when you are in $c = 3 print the final 2 static divs. Reset $c to 1 when you reach $c = 3 and include a conditional asking if its the last item and its $c != 3 so you print out the last 2 static divs.
Ive got the follow PHP:
<div class="slide-background">
<div class="slide">
<?php foreach (array_chunk($items->submenu, $linkCount) as $items): ?>
<?php if (12 / $cols == 1):?>
<div class="col-md-12">
<?php else: ?>
<div class="col-md-<?php echo 12 / $cols; ?>">
<?php endif; ?>
<ul>
<?php foreach($items as $submenu): ?>
<?php echo $submenu; ?>
<?php endforeach; ?>
</ul>
</div>
<?php endforeach; ?>
</div>
<ul class="pager">
<li>prev</li>
<li>next</li>
</ul>
</div>
</div>
basically it calculates how many links to display and how many columns, but i now need to place the links in <div class="slide"></div>, but based on the columns.. so basically i need to say if $cols = 2 place two div's in a div and close.. so its basically how many every $cols it should place so many div's in that div..
Its Confusing for me to even explain.. I think Ive explained it rather well above.. If not place say so and ill try again..
Any Help Greatly Appreciated..
UPDATE:
thanks to Hans ive now have the following:
<?php $linksPerColumn = ceil($linkCount / $cols); $linkCounter = 0;?>
<div class="slide-background">
<div class="slide">
<div class="col-md-<?php echo 12 / $cols ?>">
<ul>
<?php foreach ($items->submenu as $link): ?>
<?php $linkCounter++;?>
<?php if($linkCounter % $linksPerColumn == 0):?>
</ul>
</div>
<div class="col-md-<?php echo 12 / $cols ?>">
<ul>
<?php endif; ?>
<?php echo $link; ?>
<?php endforeach; ?>
</ul>
</div>
</div>
<ul class="pager">
<li>prev</li>
<li>next</li>
</ul>
</div>
</div>
only problem is when there's only one column and i need 2 links and then for it to close the div and the ul and start new ones.. right now it does that except for everyone and not for every two links...
You could use modulus for this one. You should calculate how many items you need per column. And then create a close and open div for example:
<?
$linksPerColumn = 4;
if ($linkCount > 4){
$linksPerColumn = ceil ($linkCount / $amountOfColums);
}
$linkCounter = 0;
?>
<div class="slide-background">
<div class="slide">
<?
foreach ($links as $link)
{
$linkCounter++;
?>
// Do your HTML Here.
<?
if($linkCounter % $linksPerColumn = 0)
{
?>
</div>
<div class="slide">
<?
}
?>
</div>
</div>
// Rest of the HTML here.
I think this should do the trick for you.
What I need to do that my latest posts go automatically to top of the page? Now latest post go bottom of the ealier posts.
php:
<div id="container">
<div id="blog">
<div class="grid_9 float-left">
<?php foreach($posts->results as $post): ?>
<div class="post box_shadow">
<h2><?php echo $post->title ?></h2>
<small><?php echo date('d-m-Y',strtotime($post->date)) ?></small>
<p><?php echo Str::limit_word($post->content, 40); ?></p>
<?php echo Lang::line('home.blog_read_more', array(), $lang)->get() ?>
</div>
<?php endforeach ?>
<?php echo $posts->links()?>
</div>
</div>
<div id="footer" class=" box-shadow">
<?php echo stripcslashes($setting->footer)?>
</div>
</div>
I am still newbie so could you give advice what line I need modified or add and where?
If it is exactly the opposite of what your looking for try running array_reverse on it before hitting the loop.
That's how your array is sorted. options: reverse the array or do a for loop starting from the last index going to 0.
Something similar to below:
`$posts->results` has all of your posts
Replace the foreach with a for.
$count = count($posts->results);
for($i = $count-1; $i <= 0; $i--) {
$post = $posts->results[$i];
//display post
}
The simplest but probably less efficient way is to reverse the array right before the foreach loop.