I'm pretty new to ACF. I am editing this page: http://pear.staging.wpengine.com/schizophrenia-semi-final/ which has an ACF for the intro image and another for the intro text. In the template, this is the code:
<?php $bg1 = (get_field('pear_intro_image')) ? get_field('pear_intro_image') : ''; ?>
<section id="intro" class="section" style="background-image: url('<?=$bg1[sizes][large]?>');">
<div class="container ">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 text-center">
<?= get_field('pear_intro_text') ?>
</div>
</div>
</div>
The style "background-image" sets the position of the image to 'center center'. The client wants to remove that class and instead add a radio button to the ACF with the option for aligning it to the top, center or bottom.
I am not sure how I would go about this. Can anyone point me in the right direction?
Choose radio button as a field. You're presented with the value and the label. The value is what is passed through when you do the <?php the_field()?>. The label is what the person in WP sees in the admin area when making a selection.
So if you have radio buttons that are:
left center : Left
center center : Center
right center : Right
They will see "Left, Center, Right" as choices.
<?php the_field('background_position')?> would output "left center" for instance, if they chose Left.
Related
I am creating a user interface that is to be responsive.
I have three buttons that I would like to move into a drop down when the users screen size dictates.
My issue is that the "show-on-med-and-down" helper I am using to display the drop down menu is always showing regardless of the screen size.
The materialize helper "hide-on-med-and-down" is working and the content is being hidden correctly, but I cannot get the drop down to display only when the screen is medium and down.
<div class="entry">
<div class="icon> icon for user </div>
<div class="name"> user name </div>
<ul class="hide-on-med-and-down">
<div class="button>yes</div>
<div class="button>no</div>
<div class="button>maybe</div>
</ul>
<ul class="show-on-med-and-down">
<div class="dropdown"> dropdown menu</div>
</ul>
</div>
I expect this code to show exclusivity the drop down button or the three buttons in any case. But as you can see from my attached screenshot the dropdown menu place holder always is shown.
large view
small view
Thank you for your time in advance.
"show-on-med-and-down" css class just set the display property when the screen width is > 600px.
You need to set the style of the item to be style="display: none;"
OR change the class to "hide-on-large-only" (suggested).
I am using the first basic card example from http://materializecss.com/cards.html as a starting point. The card-action div contains two links that render beautifully.
Now I want to add a new card action that doesn't just open a link but performs an action. This could probably be done using a standard link with an tag as well but since I'm using Rails my standard way is that this action becomes a button with a form around it. It looks like this now:
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
<form>
<a class="waves-effect waves-light btn">button</a>
</form>
</div>
</div>
</div>
</div>
I would have expected that the button is nicely aligned with the two existing links, in one row at the bottom of the card. But what actually happens is that the button appears in the line below.
How can I align a button with a form together with standard HTML link tags in one row?
UPDATE: here is a JSFiddle with the code above: https://jsfiddle.net/hendrikbeck/zq1pv3y6/
You just need to add display: inline to your form tag.
See the updated JSFiddle : https://jsfiddle.net/zq1pv3y6/2/
I have a page I'm making where where on small screens (ie: phones) I want the image above the text, and on larger screens I want the image to the right of the text.
I'm using offset to pull the image right on larger screens. However, it's not aligning properly on larger screens (smaller screens are just as I would expect). The text on the left doesn't start until after the image on the right. I haven't used the offset feature of bootstrap before and I'm not quite sure what I'm doing wrong...
Here is a screenshot (unwanted gap marked in yellow)
And the code...
<div class="row">
<div class="col-md-4 col-xs-12 col-md-offset-8">
<img src="<?php echo $p['main_img_landing']; ?> " class="img-responsive" alt="">
</div>
<div class="col-md-8 col-xs-12">
<?php echo nl2br($p['desc_landing']); ?>
</div>
</div>
Any help appreciated!
Heyho,
what you are doing with col-md-offset-8 is pushing the image to the right with a margin, thus filling the whole line with this column.
The math: 4+8=12
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4 col-xs-12 col-sm-push-8">
Your Picture
</div>
<div class="col-sm-8 col-xs-12 col-sm-pull-4">
Your text
</div>
You can solve this via push and pull. So on medium screens your text will show "first" on the left side with ratio 8/4. Then on smaller screens it will go to normal order where the picture is on the top and the text beneath. Hope that helps :)
Oh, for test reasons i put col-sm. Otherwise you cant see the result in the preview :)
Greetings
I am trying to have a menu bar to get stick to top when user scrolls up. It sticks fine at the top. But, it floats to left.
code: http://www.bootply.com/y801SV4HAu
How to fix menu so that if sticks to top and center (margin-left is currently set to auto to make it center)?
<div class="container" style="padding:0">
<div id="menu-header" class="affix">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<span style="color:white">Menu bar here<i class="glyphicon glyphicon-menu-right"></i></span>
</div>
</div>
</div>
</div>
The above does what you want it to do. Cassie was correct in suggesting a container div, but with the added style padding:0 for the way you want it to look. so that it aligns with page title.
When position: fixed is applied to the header upon scrolling down, the margin: auto no longer affects it, so it moves back over to the side. You'll have to find another way to center that div. There are probably a ton of ways to do this; the simplest offhand might be to put it inside a .container div.
I have expandoPane which consists of some buttons.
When I perform other operations in the project and then expand this expandoPane, its contents goes hidden and those are visble after resizing it using splitter only.
I want to solve this.
Do you have any idea why the content goes invisible?
You need to call .startup and .resize() on the content pane when it's shown.
Something like:
expandoPane.connect(this, "onClick", function() {
that.createContent();
that.startup();
that.container.resize()
});
Post your code and I'll probably be able to give you something more specific.
Adding sample code:
<div id="expandableConsole" dojoType="dojox.layout.ExpandoPane" region="bottom" showTitle='true' maxHeight="250px" maxWidth="280px" style="height:200px; width:100%;" doLayout='true' startExpanded='false' splitter="true">
<div>
<input type="button" id="btnSubmit" style="width:88px;height:20px" onclick="update()">
</div>
<div dojoType="dijit.layout.ContentPane" id="infoBar" style="height:150px">
</div>
</div>
When I expand the expandopane after few operations,button and contentpane go invisible.