I'm currently working on a materialize project and I have a problem with the grids.
Indeed, my php generate 4 columns l-4 and the 4th go to the right side as show here
<div class="row equipe">
<h2><?php echo 'Equipe n°'.$data2[1].' '.$nomjeu2[0]?></h2>
<?php
$stmt3->execute(array($data2[0]));
while($infoplayer = $stmt3->fetch()){
?>
<div class="col s12 m6 l4">
<div class="card-panel">
<img class="responsive-img" src="<?php echo $infoplayer[2]?>">
<p><?php echo $infoplayer[1]?></p>
<?php if($infoplayer[3] != ''){?>Twitch<?php } ?>
</div>
</div>
<?php } ?>
</div>
I don't really know what do to do here some help would be appreciated :D
Currently Materialize's grid is based on floats and it gets broken if cards are not of the same height. The card that is larger in the first row pushes the second row to the right. To avoid that it's easier to use custom styles with flex or grid.
Related
I was working on a wordpress site and I have used Advanced Custom Fields plugin. I have also used Team Members plugin and after adding team members the shortcode that was generated I have put that on the Team custom field. But it was not reflecting. I have checked source code, the section was missing there
Also, I have tried using the same shortcode on the other fields, that worked but it's not working on the team field
Here I am sharing the screenshot. https://www.screencast.com/t/4tyIpfCz3N
<div class="container">
<div class="row text-center">
<div class="col">
<h2>Meet The Team</h2>
</div>
</div>
<div class="row">
<div class="col">
[tmm name="core-team"]
</div>
</div>
</div>
I have used the above code on the team field. On other fields it was working but it wasn't working only on that particular section
Any kind of help will be appreciatable
You need to get_field( 'team' ) in your template file, additionally you need to wrap this in do_shortcode(), as below:
echo do_shortcode( get_field( 'team' ) );
BUT there are lots of things wrong with how you are approaching this. You shouldn't be putting HTML in a WYSIWYG ACF field, they aren't built for that. Your HTML belongs in a template file. The point of ACF is to make things easier for end users to update and you have just complicated that by 1000% by forcing them to write HTML.
You don't even need to use your 'Team' ACF field for this section of what I presume is a single page website. Just put the below code into your page template (I'm assuming front-page.php). It will pull the team members directly from the Team plugin shortcode, bypassing ACF all together.
<h2>Core Team</h2>
<div class="container">
<div class="row">
<div class="col">
<?php echo do_shortcode( '[tmm name="8"]' ); ?>
</div>
</div>
</div>
Edited after code example by OP:
<div class="container">
<div class="row text-center">
<div class="col">
<h2>Meet The Team</h2>
</div>
</div>
<div class="row">
<div class="col">
<?php echo do_shortcode( '[tmm name="core-team"]' ); ?>
</div>
</div>
</div>
I've started diving into WP code for theme customization, yet I suddenly saw a serious bootstrap column fla where I can't really locate the problem.
I've designed the blog section as col-xs-12 col-sm-4 for the thumbnailed side image, and col-xs-12 col-sm-8 for the content itself. Everything is fine and dandy in all size stretches except for 768px-990px where the columns start to overlap each other, in approx the same size as the margin they should have from each other.
Here is the code:
<div class="row">
<?php if( has_post_thumbnail()): ?>
<div class="col-xs-12 col-sm-4">
<div class="thumbnail-img"><?php the_post_thumbnail('medium'); ?>
</div>
</div>
<div class="col-xs-12 col-sm-8">
<p><?php the_content(); ?></p>
</div>
<?php else: ?>
<div class="col-xs-12">
<p><?php the_content(); ?></p>
</div>
<?php endif ?>
</div>
Here are a few pictures to emphasize:
EDIT:
I changed, just to check, what happens if instead the 8-4 row, I will do a 6-6, and it works great (picture included below). isn't 8 + 4 = 12? what am I missing here?
Try giving image width 100% so that it fits in div when resizing.
Or create a fiddle and share link.
I've found out that wordpress doesn't really play nicely with bootstrap since the_post_thumbnail('$string') would overlap the bootstrap column grid if they aren't set right (WP doesn't auto set the image width into a column restricted area.)
the_post_thumbnail('$string') receives the following set params:
the_post_thumbnail( 'thumbnail' ); // Thumbnail (150 x 150 hard cropped)
the_post_thumbnail( 'medium' ); // Medium resolution (300 x
300 max height 300px)
the_post_thumbnail( 'medium_large' ); // Medium Large (added in WP
4.4) resolution (768 x 0 infinite height)
the_post_thumbnail( 'large' ); // Large resolution (1024 x
1024 max height 1024px)
the_post_thumbnail( 'full' ); // Full resolution (original
size uploaded)
There is no 100% for the_post_thumbnail('$string') yet i'm just guessing that it could be hardcoded into the function itself as a param.
My solution was either using $string = thumbnail or changing the grid to col-sm-6 for both columns.
Place the url of the image in a img tag with the img-responsive class.
I'm having a little bit of a problem. My page.php seems to be overriding WooCommerce's cart page. The page is already created (generated by WooCommerce with the shortcode intact) named Cart.
I know that my page.php is overriding it, but I don't know how to stop that. Here is the code for my page.php page:
<?php
get_header();
if ( have_posts() ) {
//Work with us page
$workwithuspage = "work with us";
$pitch = "pitch an idea";
$cart = "cart";
if($workwithuspage == strtolower(get_the_title()))
{
//Page stuff here!
$image = wpse_get_images();
?>
</div>
<div class="hero">
<div class="container heroImage" style="background-image:url('<?php echo $image->guid;?>');">
<div class="col-md-7"></div>
<div class="col-md-5">
<div class="pageText">
Work with Us
</div>
<div class="subText">
<?php echo $image->post_content; ?>
</div>
</div>
</div>
</div>
<div class="bodyBg">
<div class="container">
<div class="col-md-6">
<div class="box-style">
<div class="box-header">
Got a comic idea and want it published?
</div>
<div class="box-text">
Tell us your desires, so we can slap it on a comic book and sell it for millions. Ya dig?
</div>
<div class="box-button-container">
<?php
$pitch = get_page_by_title('pitch an idea');
?>
<div class="button large">Pitch an Idea</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="box-style">
<div class="box-header">
Want to work on one of our great titles?
</div>
<div class="box-text">
Tell us your desires, so we can slap it on a comic book and sell it for millions. Ya dig?
</div>
<div class="box-button-container">
<div class="button large">Find Jobs</div>
</div>
</div>
</div>
</div>
</div>
<div id="ourstandards">
<div class="coloroverlay">
<div class="container">
<div class="col-md-6">
<div class="pageHeaderText">
Our Standards
</div>
<div class="bodyTxt">
<p>
At On Target Network, we strive to promote consistency,
communication and passion in all areas of work and we expect the same of our artists.
</p>
<p>
We understand the nature of creators and seek to raise ourselves to higher and higher standards. To do that, we vet and
review series pitches with a carefully selected panel of writers and artists.
</p>
<br /><br />
<p>
Got questions? We'll be happy to help.
</p>
<div id="sendUsQ" class="secondaryBtn">
Send us your questions
</div>
</div>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
<div class="container">
<?php
}
else if($pitch == strtolower(get_the_title()))
{
?>
</div>
<div id="pitchImg" class="hero">
<div class="container">
<div class="col-md-7"></div>
<div class="col-md-5">
<div class="pageText">
Pitch an Idea
</div>
<div class="subText">
<?php echo $image->post_content; ?>
</div>
</div>
</div>
</div>
<div class="bodyBg">
<div class="container">
<div class="col-md-12">
<div class="pageHeaderText dark">
Start your pitch here
</div>
</div>
<div class="col-md-9">
<?php
if ( isset($si_contact_form) ) {
echo $si_contact_form->si_contact_form_short_code( array( 'form' => '1' ) );
}
?>
</div>
</div>
</div>
<?php
}
}
get_footer();
?>
I have conditional ifs for pages I wanted to customize, but I fear in doing that, it has overridden (somehow) the cart page.
WooCommerce adds the cart using shortcodes; shortcodes get displayed as part of the page content. WP uses the the_content() function to display the content for a particular page or post. You've removed the_content() from your page template, therefore the cart doesn't display.
Looking at your page template, you've removed the_content() and inlined all your content directly into the template rather than fetching it from the database. This is atypical of a WP site in general, but I understand that sometimes a site starts off static and you just want to get it 'into' WP.
You're also using a bunch conditionals to display different chunks of content, which runs against the idea of using templates. My suggestion would be to create separate page templates for your 'pitch' and 'work with us' pages, and make page.php just a default page template that has the_content(). This way you have a generic template you can use for any page, including the cart page.
Check the codex for more info on creating custom page templates, but in a nutshell, you add a comment to the top of the file:
<?php
/*
Template Name: My Custom Page
*/
Then save your file in your theme folder. Common practice is to name it along the line of page-pitch.php so you can easily identify it. Then in the admin area you can assign the template to any page you want simply by selecting it from the drop down menu.
Splitting your different content into separate templates has a couple of benefits; namely you no longer have to use conditionals for checking the page titles (which can vary from install to install) and makes it much easier for you to debug things.
I am working on a social media network, and in my posts, I am trying to add the glyphicons found in Bootstrap 3 to the posts. Now, I have managed to the the icons on the same line as the username, but I can't work out how to get the username first, and then the glyphicons. Below is my code:
<div class="media well single-post" id="post-<?php echo $post['post_id'];?>">
<div class="avatar large pull-left">
<?php if ($this->profile_type === 'page' || $post['post_wall_profile_type'] === 'page'):?>
<a href="<?php echo $this->baseUrl()?>/<?php echo $post['post_wall_name'];?>">
<img src="<?php echo $this->GetStorageUrl('avatar') . $post['post_wall_avatar'];?>">
</a>
<?php elseif ($this->profile_type === 'feed' && $post['post_wall_profile_type'] === 'group'):?>
<a href="<?php echo $this->baseUrl()?>/<?php echo $post['post_wall_name'];?>">
<img src="<?php echo $this->GetStorageUrl('avatar') . $post['post_wall_avatar'];?>">
</a>
<?php else:?>
<div class="pull-right"><?php if (isset($post['author_meta']['badges'])):?>
<div class="network-badges vertical">
<?php echo $this->partial('/partial/badges.phtml', array('badges' => $post['author_meta']['badges']));?>
</div>
<?php endif;?><div class="pull-left"><a href="<?php echo $this->baseUrl()?>/<?php echo $post['user_name'];?>"></div></div>
<div class="pull-left"><img src="<?php echo $this->GetStorageUrl('avatar') . $post['user_avatar'];?>">
</a></div>
<?php endif;?>
</div>
Here is what it currently looks like: http://www.startrekrisa.com/Picture1.png
I know it's gonna be a simple fix, but I cannot work out how to do it.
Thanks in advance
[Edit] See this jsfiddle based on the fixed markup below and the /partial/badges.phtml code you gave in a comment; obviously your global css is not there, but you can see it properly puts the avatar left and the glyphicons to the right of it [/Edit]
The HTML you generate with that piece of code doesn't seem quite right, and considering your question only relates to html/css, it would have been better to strip your code sample down to a piece of html+css, without the php logic.
From what I can see, your question directlly concern the else part of your main logic, when the inner if is true. In that case I believe your code will generate
<div class="media well single-post" id="post-1234">
<div class="avatar large pull-left">
<div class="pull-right">
<div class="network-badges vertical">
<!-- content of /partial/badges.phtml with the user bages -->
</div>
<div class="pull-left"><a href="http://example.org/users/username"></div>
</div>
<div class="pull-left"><img src="http://example.org/avatars/username">
</a>
</div>
</div>
You can see here you have html problems:
your pull-left div is closed before the link inside is closed; the link inside is closed further on
you have a mismatch between open and close tags for your div
I believe the html you'd want would be more like
<div class="media well single-post" id="post-1234">
<div class="avatar large pull-left">
<div class="pull-right">
<div class="network-badges vertical">
<!-- content of /partial/badges.phtml with the user bages -->
</div>
</div>
<div class="pull-left">
<a href="http://example.org/users/username">
<img src="http://example.org/avatars/username">
</a>
</div>
</div>
</div>
Mixing php logic with your html like that is not terrific and will lead you to more similar problems where you end up not generating the markup you imagined.
P.S. It usually a good practice when working on the interface to first work without any logic behind and just static data, to ensure you get the markup you want and need, and then only merge this with your logic (but it's still better to have your logic separated from the ui though)
While I was creating my custom template for node, I found out that Drupal adds extra html.
so I changed page.tpl.php like below to test
<div style='height:300px'>
<?php print render($page['content']); ?>
</div>
and then changed node.tpl.php to
hello
the output is:
<div style='height:300px'>
<div class="region region-content">
<div id="block-system-main" class="block block-system">
<div class="content">
hello </div>
</div>
</div>
</div>
where do all those extra tags come from?
I actually expected <div style='height:300px'>hello</div>
drupal_render() can be used to render so called renderable arrays. These are self-contained, they tell render() which theme function/template to use.
Try dpm($page['content']), that should then have a '#theme' key that contains that information.
Nice one with the dpm.
To print the h2 and body you could write something like this in the page.tpl.php.
<?php print render($page['content']['system_main']['nodes'][1]); ?></div> ?>