Trying to add an awards system on a public profile page. The awards are echoed from mySQL as images. The thing is, a maximum of 5 awards can be shown, and in the next line there is no space between it and the first line. How can I add it, possibly with <br>, but if something else is better, it's also welcome!
I tried some <<<EOD , but it got too complicated and it didn't work. Tried the naive approach, adding <br> after the echo, but obviously it didn't work either. Tried increasing the padding, it also didn't work at all.
<div class="row">
<?php if(is_array($allawards)) { ?>
<p style="padding: 10px">
<?php /* To show the image: */ ?>
<?php foreach($allawards as $award) { ?>
<img src="<?php echo $award->image; ?>"
alt="<?php echo $award->descrip; ?>">
} ?>
</p>
<?php } ?>
<br/>
</div>
It's not PHP task, you need to use simple CSS.
Margin-bottom?
img {margin-bottom: 5px;}
Margin-top to 6th and others?
img:nth-child(5) ~ img {margin-top: 5px;}
In your foreach you can increment a counter; after you echo, you can check if the counter is at five, and break if so.
$counter = 1;
foreach
...
echo ...
if ($counter == 5) echo '<br>';
$counter++;
Or, instead of fixing this with a manual break, you may look to your styling to solve this a little more simply and more dynamically. With CSS Grid you can specify the area to have 5 elements wide, and a row-gap of however much space you want between each set of 5 awards, like so:
#awards_container {
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr; //1fr each instead of autos so they're always
the same width
grid-row-gap: 5px;
}
Related
I use code-prettify and work like a charm
How can I justify codes?
I add this code:
<?php
echo 1;
echo 1;
?>
But I want print this:
<?php
echo 1;
echo 1; //--> remove extra space
?> //--> remove extra space
Google code-prettify is a syntax highlighter, not a code beautifier. Code indentation is usually part of code beautifier.
I've got a problem and was hoping you guys could help me out;
For a project I'm working on I want to create an uneven grid in a WordPress template. For the grid, I'm using Desandro's Masonry.js which is a lovely library for creating flexible grids.
Currently, I have all wordpress content displayed as a straight horizontal grid, like so:
even grid
However, my eventual goal is to have the grid displayed as following:
uneven grid
To give you an idea of how I currently have my grid setup here's a chunk of the code:
I'm using the following WordPress loop for the majority of the grid display:
<main id="main" class="site-main" role="main">
<?php
if ( have_posts() ) :
if ( is_home() && ! is_front_page() ) : ?>
<?php
endif;
/* Start the Loop */
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content-masonry', get_post_format() );
endwhile;
else :
get_template_part( 'template-parts/content', 'none' );
endif; ?>
Which selects from the following content-part:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<a href="<?php echo get_permalink( $post->ID ); ?>">
<div class="row">
<div class="grid-item col-xs-12 col-sm-6 col-md-6 grid-item-content-background">
<div class="grid-item-content-background">
<div class="front-page-grid-item-tag">
</div>
<div class="button-container">
<i class="fa-border-circle glyphicon glyphicon-chevron-right"></i>
</div>
<!-- post-tags -->
<div class="tags-container">
<?php $tags = wp_get_post_tags( $post->ID );
$html = '';
foreach ( $tags as $tag ) {
$tag_link = get_tag_link( $tag->term_id );
$html .= "<div class='tag-display tag-icon-{$tag->slug}'></div>";
}
echo $html; ?>
<h4 class="front-page-category">
<?php foreach( (get_the_category()) as $category ) { echo $category->cat_name . ' '; } ?>
</h4>
</div>
<!-- .post-tags -->
<div class="grid-item-content">
<div class="grid-item-content-thumbnail"
<?php
if ( $thumbnail_id = get_post_thumbnail_id()) {
if ($image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg'))
printf('style="background-image: url(%s);"', $image_src[0]);
} ?>>
<div class="frontpage-overlay frontpage-overlay-trigger">
<div class="frontpage-article-text-container">
<h2 class="front-page-title"><?php echo get_the_title(); ?></h2>
<h3 class="front-page-subtitle">
<?php {
$subtitle = get_post_meta ( $post->ID, 'subtitle', $single = true );
if ( $subtitle !== '' ) echo $subtitle;
elseif ( $subtitle == '' ) echo '<!-- no subtitle set -->'; } ?>
</h3>
</div><!-- .front-page-article-text-container -->
</div><!-- .frontpage-overlay -->
</div><!-- .grid-item-content-thumbnail -->
</div><!-- .grid-item-content -->
</div><!-- .grid-item-content-background -->
</div><!-- .grid-item -->
</div><!-- .row -->
</a>
</article><!-- #post-<?php the_ID(); ?> -->
Now I've noticed that Masonry uses absolute positioning on the .grid-item class to position elements from top: 0px and left: 0%. Would it at all be possible to have masonry instead start elements from, say, 40px top on the uneven elements inside the grid? Making the grid effectively uneven?
Normally I would simply encapsulate the left side of the grid within a container with an additional margin-top, but sadly I've been unable to achieve that. I've also tried setting all uneven children of the grid to an additional margin-top using CSS, but that was to no avail either (which probably has something to do with the absolute positioning Masonry does).
I've been fussing about this for hours on end. If somebody could assist me that would be really appreciated!
Thank you!
Update:
Due to the used library using absolute positioning, any CSS edits are uneffective. I assume that I'll be needing a jQuery hack that'll set the top of the first element to top: 40px instead of the top: 0; but I have no clue where to start. If anybody can help me that'd be very much appreciated!
You may be able to leverage the :nth-of-type() CSS selector. If these elements are rendering in the expected order, you would use :nth-of-type(odd) to select the first column. Adding margin-top:40px; to drop every element in that column.
If the grid elements are not rendered in the expected order, you may have to modify Masonry.js or write your own JS to find and modify the top positioning of the left column grid elements.
Okay, so I eventually found the solution by adding the following jQuery:
jQuery( '.grid-item:even' ).css( 'margin-top', '40px' );
Hope it helps somebody!
Thank you all.
I want to know what is the wrong with following code; I want to make the inner div color appear as a part of the outer div color. I am using this for a percentage poll bar:
echo '<div style="width:130px; height:20px; background-color:#ecf2f9; overflow:hidden;">';
echo '<div style="width:<?php print $percent1; ?>%; background-color:#ff33cc; position:relative; z-index:3"></div>';
echo '</div>';
or if there will be another solution to get the result i need.
Thanks in advance for your help
In your case it is relatively simple. Just set the hight for the inner div and you are done ;)
A DIV has no default height. That's the problem.
Example:
echo '<div style="width:130px; background-color:#ecf2f9;">';
echo '<div style="width:<?php print $percent1; ?>%; background-color:#ff33cc; height:20px;"></div>';
echo '</div>';
You can see a plain HTML example of your bar here:
https://jsfiddle.net/eaz1vbex/
Beside that, using <?php print $percent1; ?> that way won't work, because echo outputs the content without further parsing by the PHP interpreter. If you want to keep the above style of code, you should change it to the following before continue reading:
echo '<div style="width:130px; background-color:#ecf2f9;">';
echo '<div style="width:' . $percent1 . '%; background-color:#ff33cc; height:20px;"></div>';
echo '</div>';
Alternatively:
echo "<div style='width:130px; background-color:#ecf2f9;'>";
echo "<div style='width:$percent1%; background-color:#ff33cc; height:20px;'></div>";
echo "</div>";
Please read this for better understanding:
http://php.net/manual/en/function.echo.php
Hints:
You should use CSS for all style attributes (except width, which is dynamic). Using the style tag is not recommended because it makes it hard to maintain and redesign later in the product lifecycle. It also bloats up output.
You maybe want to use some sort of template engine or at least the "here document"-syntax, for better maintainability of markup.
Example:
echo <<<END
<div style="width:130px; background-color:#ecf2f9;">
<div style="width:$percent1%; background-color:#ff33cc; height:20px;"></div>
</div>
END;
Example with seperate CSS:
CSS:
.progressBar { width:130px; background-color: #ecf2f9; }
.progressBar .progress { background-color:#FF33cc; height: 20px; }
PHP:
echo <<<END
<div class="progressBar">
<div style="width:$percent1%;" class="progress"></div>
</div>
END;
See: https://jsfiddle.net/fchp5aqa/
it's work : i have set a height : 20px and your $percent1 did not print !! so i change it and fix it. i think it enough to understand what i done!!
echo '<div style="width:130px; height:20px; background-color:red; overflow:hidden;">';
echo '<div style="width:'.$percent1.'%; background-color:blue; position:relative; z-index:3; height:20px;"></div>';
echo '</div>';
In my page I have three columns and many rows to show the following elements
<div class="col-sm-4">
<img src="<?php echo $myURL; ?>" class="img-responsive img-thumbnail">
<p class="lead"><?php echo $mytext; ?></p>
</div>
The display is perfect when all the $mytext are the same size (number of lines). However, if in a row elements A and B have say 2 lines of $mytext and the element C has 3 lines, the element C on the next row won't be displayed.
How can I prevent this? Ideally, the row height should be the highest of the height of the three elements in the row.
EDIT: If you go to http://bit.ly/1HfHiqC and reduce the width of the window, you will see what I am talking about.
If you are generating the content with a loop, lets say like this
foreach ($posts as $post) {
echo '<div class="col-sm-4">';
...
}
then you need to set a counter to add an clearfix class to every col-n * x = 12 DIV, to clear the floats. In you example you have n = 4 and that means you have to clear it on every 3rd iteration. To sum it up, whenerver your row is full, and the next row begins with a new set of cols, you have to add a class to the first div in that row.
$clearfix = 0;
foreach ($posts as $post) {
if ($clearfix % 3 == 0) { $clear_class = "clearfix"; } else { $clearfix = ""; }
echo '<div class="col-sm-4 '.$clear_class.'">';
...
$clearfix++;
}
And in your css you'd add the following
.clearfix { clear: both; }
That should solve your problem.
I've build a custom facebook sidebar of my facebook page, which displays the messages in LI tags, inside a UL.
I do not want this UL box to become any longer than the other content of the page, so I made it display the first 5 messages.
Lately, I've started to post longer messages and therefore the 5 messages became longer than the other content. It is now possible to decrease the 5 messages, to let's say: 3 messages.
This however, requires manual tweaking weekly which is not optimal.
Now I've made my ul have the following css properties:
.facebooklist{
height:800px;
overflow:hidden
}
This however, cuts off the last message.
I would like to display as many li items containing my page messages, until the box reaches 800px or more in height.
Is this possible? And if so, how?
For reference, check my page here:
Image
The sidebar is located at the right.
The code:
<div class = "fbheader"><img class = "flogo" src = "img/f_logo.png"/><a class = "ftext" href="https://www.facebook.com/WIEWIE4life">WIEWIE</a><iframe class ="fiframe" src="//www.facebook.com/plugins/like?href=http%3A%2F%2Fwww.facebook.com%2FWIEWIE4life&send=false&layout=standard&width=10&show_faces=false&font&colorscheme=light&action=like&height=35&appId=520187094675923&locale=en_US" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:25px; float:right;" allowTransparency="true"></iframe></div>
<ul class = "facebooklist">
<?php
$page = file_get_contents('https://graph.facebook.com/WIEWIE4life/feed?access_token=520187094675923|OcGraoxcC7OH7gurPtx9Rqb8KnA');
$data = json_decode($page);
$x = 0;
foreach ($data->data as $news ) {
$StatusID = explode("_", $news->id);
if (!empty($news->message) && !($temp > 5)){
$temp = $temp + 1;
?>
<li class = "bericht">
<?php
$x = new DateTime($news->updated_time);
$x->setTimezone(new DateTimeZone('Europe/Amsterdam'));
$time = $x->format(DATE_ATOM);
$x = explode("T",$time);
$x[1] = substr($x[1],0,-9);
echo "<h6 class = 'date'>". $news->from->name . " - " . $x[0]. " ".$x[1]."</h6>";
?>
<?php
echo "<p class = 'message'>" . $news->message . "</p>";
?>
</li>
<?php
}
}
?>
</ul>
</div>
Thanks in advance!
Consider putting overflow: auto; and spare yourself the pain.
You can't measure text in HTML before it's displayed. As #Zim84 said, JS is your only solution but it's only a visual thing. The HTML will still be in your page, just that you'll remove it from the DOM tree.
Solutions that rely solely on PHP will probably fail, since you cannot really know how long the content will be on which screen resolution and under those 10'000's of possible browser configurations.
Therefore I'd go with JS.
Method one: hold your data in an array and append those <li> as long as the height of the <ul> does not exceed the height of your main content.
Method two: print your <li> normally with php as you did already and remove the last <li>-element with JS as long as the <ul> is bigger than the content.