I'm trying to pull information from instagram and twitter, and display the information as a collection of square and rectangle boxes arranged on screen.
I was using a foreach statement to display the content, but because the containing divs are not consistent in size, I have to end the foreach statement and start a new one. The content of the new foreach is exactly the same as the content of the previous. I'm not sure if I'm going about this the right way and would appreciate any push in the right direction.
The block of code below displays the first 4 most recent instagram photos.
<?php $i = 0; foreach ($instagram_data->data as $latest_post): if (++$i == 5) break; ?>
<div class="engage-block"><img src="<?= $latest_post->images->standard_resolution->url ?>"></div>
<?php endforeach ?>
After that, I display the latest twitter content.
<div class="engage-horizontal engage-block"><span>"<?php echo $latest_tweet->text ?>"</span></div>
And then I repeat another foreach similar to the first to display more instagram content. This however repeats the exact same content from the code above (shows the latest 4 photos instead of the 4 photos after the original photos).
You could put a variable in the foreach to make the twitter div if it's the fifth, like this
<?php
$i = 0; foreach ($instagram_data->data as $latest_post){
?>
if ($i==5){?>
<div class="engage-horizontal engage-block"><span>"<?php echo $latest_tweet->text ?>"</span></div>
$i=0;
}
else{?>
<div class="engage-block"><img src="<?= $latest_post->images->standard_resolution->url ?>"></div>
<?php
}
$i++;
} ?>
Related
Below is my Code.
<?php
$folder_name=$_GET['folder_name'];
$dirname = "customized_kits/images/";
$images = glob($dirname."*");
$filecount = count( $images );
$i=0;
for($i=0;$i<200;$i++) { ?>
<div class="col-md-2"> <div class="photos">
<div id="images1">
<a href=# data-lightbox="roadtrip">
<?php
if($filecount>$i) {
$filename = substr($images[$i], strrpos($images[$i], '/') + 1);
echo '<img src="'.$images[$i].'" style="width:150px;height:150px" /><br/>';
?>
<i class="fa fa-remove"></i>
<?php } else {
echo '<a ><img style="width:150px;height:150px;background-color:#eee" /></a>';
} ?>
</div>
</div>
</div>
<?php } ?>
Here I created 200 boxes with foreach loop I want to show 20 divs for single page and with help of pagination I want to show other divs.I searched in many websites I didnt get exact answer please help me to get out of this issue.
Okay so from your code you can have 200 values of $i and you want to paginate them in segments of 20. Let us start off by adding a script above your code to get the range that needs to be displayed. Page number comes as a GET parameter in number. ex example.com/feeds?number=2.
<?php
$pageno = $_GET['number']; // Page number from frontend
// Now this value will give you 1,2,3 etc
$start = $pageno*20;
// $start contains the initial offset or the value of `$i` from to start
for($i=$start;$i<$start+20;$i++) {
// Will only show 20 elements on the page
}
?>
Remember this is a very basic example. Although i would recommend using range in sql query instead so you don't have to load the complete dataset in each query.
More explanation
Suppose you have M results and you want to show N results on each page, the results on page x would start from x*N to x*(N+1) pure math here. In your code you are iterating $i over the whole loop rather just iterate over that specific range to get results. The value of x is the example is the page number that we get from number in GET verb.
i have these lines of code:
<div class="signals">
<ul>
<li>First Signal</li>
<li>Second Signal</li>
<li>Third Signal</li>
</ul>
</div>
<div id="signal1" style="display:none;">
<p style="color:#fff">First comment for #signal1 id - it will open in a fancybox -.</p>
<div id="signal2" style="display:none;">
<p style="color:#fff">Second comment for #signal2 id - it will open in a fancybox -.</p>
</div>
<div id="signal3" style="display:none;">
<p style="color:#fff">Third comment for #signal3 id - it will open in a fancybox -.</p>
</div>
Here it is the jsfiddle code: JsFiddle
Right now when i want to show different comments, i open my html file and edit the "id #signal , adding more id (or deleting them) when i need it.
The problems is: the signals can be more than the three that are showed up, or even less.
So my question is:
There is a way to generate automatically the divs that i need in a second sheet, where i will insert the comment and all the id's? (a sort of backend)
For example: if one day i need just 2 signals, i will create the #signal1 and #signal2 div, i'll insert the comments and save the secondary sheet.
When i do that, the primary sheet with the html stuff, will show 2 "li" lines:
First Signal
Second Signal
and when i click on of them, the fancybox will open and show the comment, just as the code into the jsfiddle.
I don't know much of php, but there is a way i can do that using it? Or there is a better way?
Hope i can learn from your help.
It seems that you need PHP foreach loop.
You can write the comments in a PHP array, and read them using PHP foreach.
Here is the sample code:
<?php
$commentsLabels = array('First Signal','Second Signal');
$commentsTexts = array('First comment for #signal1 id - it will open in a fancybox.','Second comment for #signal2 id - it will open in a fancybox.');
//You could use a 2D array to store both comments Labels and comments Texts in one array, but since you are new to PHP, I put them in 2 different arrays to make it easy.
//You can add more comments texts/labels to the arrays in double/single quotes separated with ','
//For now, the arrays are filled manually. in future, you can add a DB to store comments and fetch the values from there.
$counter = 0;
//we need a counter to make the comment ids dynamic
?>
<!--GENERATING LABELS-->
<div class="signals">
<ul>
<?php
foreach ($commentsLabels as $commentLabel) { //loop starts
$counter++; //increasing $counter by 1, for each iteration
//We have to add HTML tags outside the php code block.
?>
<li><?php echo $commentLabel; ?></li>
<?php
} //loop ends
?>
</ul>
</div>
<!--GENERATING POPUPS-->
<?php
$counter = 0; //reset counter
foreach ($commentsTexts as $commentText) { //loop starts
$counter++;
?>
<div id="signal<?php echo $counter; ?>" style="display:none;"><p style="color:#fff"><?php echo $commentText; ?></p></div>
<?php
} //loop ends
?>
I hope this helps you start. :-)
I have created a newsfeed in my magento site using Zend Framework. This works almost perfectly except, I want to retrieve only the first 3 entries on the rss. If I try to do this, the first 3 items are displayed on my site but the foreach loop continues to execute so excess spaces and html elements are added in my site. How can I retrieve only the first 3 entries of the rss? Here's how my code looks:
<?php $i = 0;
<?php $channel = new Zend_Feed_Rss('http://mydomain/newsfeed'); ?>
<?php foreach ($channel as $item):
<div>
if($i<3): ?>
<label>My feed title is: <?php echo $item->title; ?>
<?php endif; $i = $i + 1; ?>
</div>
<?php endforeach; ?>
I have about 10 entries on the newsfeed so if I execute something like this, I get the first 3 properly, then I get 7 excess labels with My feed title is:. I tried, using break but this broke my entire page so I can't use that. Can someone please guide me to the right direction?
you can try with for loop instead of foreach
for($i=0; $i<=min(3, count($channel->title)); $i++) {
$feed_title = $channel->title[$i];
// do something
}
hope this will sure solve your issue.
I have my data being output to a span currently... this is how it looks:
Now, when i remove the span and place a div there i am given this output:
This is desired, but I want to set a height to my page and have the data show up in as little as 3 columns. How would I do this? I have searched everywhere online but can't seem to find anything that shows a solution.
I did read that some use javascript for the format but i am still clueless on even this option.
My desired output would look like this:
If you know how many items you want in a column then you can seperate them out into individual divs and then float those divs to the left to get them to be next to each other.
<div style='float:left'>
//Items go here
</div>
<div style='float:left'>
//Items go here
</div>
etc.
If you figure out how many items your query returned, say using mysql_num_rows() and divide by 3 you can tell how many to put in each column.
Also be sure to clear the floats afterwards, so like this:
<div style="clear:both"></div>
Sometimes this is necessary as there will be random issues if this is not put there.
What you are describing can be solved with styling only. You have several divs that must be displayed in columns. The easiest way is floating them to the left, and setting the width for 1/3 of the parent. If you want 4 columns, set the with to 1/4 of the parent, and so on.
<div class='sqlResult' style="float:left;width:33%;">
<a href='#'>$key</a>
</div>
Also as other answers mentioned, don't use duplicated ids. Always use classes. If you need to target each div individually, give it a unique id, such as "category_1", "category_2", and so on.
This should work
<table><tr>
<?php $count=0; $total=mysqli_stmt_num_rows($sql)-1; $idxcount=0; $limit=10; while($row = mysqli_fetch_array($sql)): $key = $row['Keyword_Name']; ?>
<?php if($count == 0){ echo '<td>';} ?>
<span>
<?php echo $key; ?>
</span>
<?php if($total == $idxcount): ?>
</td>
<?php elseif($count == $limit): ?>
</td>
<?php $count=0; else: $count++; ?>
<?php endif; $idxcount++; ?>
<?php endwhile; ?>
</tr></table>
This is probably a stupid gotcha that I'm overlooking but I'm hoping one of you can help me!
I've got a loop to list a grid of Products in my DB.
So far so good, everything is displaying roughly OK except this one little issue.
Within a list I'm doing the following:
<ul>
<?php $i=0; foreach ($products as $product) : $i++; ?>
<li <?php
if(($i%4) ==0){
echo 'class="last"';
} elseif($i%2==0){
echo 'class="second"';
}
?>>
// Then I've got the image thumbnail etc coming in....
All looks good except for the LAST row...
So for instance if I have 8 products... the first 7 will display on the page correctly, but then there is a gap at the end where the 8th product moves onto the next page.
At first I thought it was CSS widths or something but it's not. Even if I have 20 products...always the last row only shows 3 across and puts the last product on the next page.
Any ideas anyone?
Cheers M
<ul>
<?php $i=count($products); ?>
<li
<?php
if(($i%4) ==0){
echo 'class="last"';
} elseif($i%2==0){
echo 'class="second"';
}
?>>
Let's try it..