I am new to WordPress and I wanted to create a dynamic "team-component" with ACF. For this I have created two fields for "headline" and "subline" + one "profiles" group with sub-groups "profile_1", "profile_2",...
Every sub-group has three different fields: "full_name", "job_titel", "image".
Now, with first sub-field "profile_1" everything is fine.
With second I am able to pull "full_name" and "job_titel" but not "image" from back-end.
If I type print_r("profiles"), all I can see is that within array "image" is not present for "profile_2" and it is for "profile_1", although I have previously uploaded through wp-admin.
<?php
$profiles = get_field('profiles_team_component');
if ($profiles): ?>
<!-- Profile 1 -->
<div class="profile-wrapper">
<div class="image-wrapper">
<div class="image" style="background-image: url(<?php echo $profiles['profile_1']['image']['sizes']['profile-pic'] ?>) "></div>
</div>
<h4 class="ourteam"><?php echo $profiles['profile_1']['full_name'] ?></h4>
<p class="ourteam"><?php echo $profiles['profile_1']['job_titel'] ?></p>
</div>
<!-- Profile 2 -->
<div class="profile-wrapper">
<div class="image-wrapper">
<div class="image" style="background-image: url(<?php echo $profiles['profile_2']['image']['sizes']['profile-pic'] ?>) "></div>
</div>
<h4 class="ourteam"><?php echo $profiles['profile_2']['full_name'] ?></h4>
<p class="ourteam"><?php echo $profiles['profile_2']['job_titel'] ?></p>
</div>
<?php endif; ?>
Thanks for your help!
If you want to generate dynamic 'team-component' from ACF, for that you would need to install ACF Repeater field so you can easily generate dynamically team-component and show each of the filed using PHP loops. For more details, you should follow below link: ACF
Related
These are the custom fields composition:
1 Group Footer
1.1 Group Col2
1.1.1 bbcimg (this is the image ID)
1.1.2 bbc-rss (this is the RSS feed ID)
I have the following code displaying the bbc-rss:
<div class="col-md-3">
<?php
$footer = get_field('footer'); // 'footer' is your parent group
$col2 = $footer['col2']; // 'col2' is your child group
?>
<div class="widget_item widget_latest sm-m-top-50">
<h4 id="white" class="text-white">Latest News</h4>
<div class="widget_latst_item m-top-30">
<div class="item_icon"><img src="<?php bloginfo('template_directory');?>/img/rss/bbc_rss.png" alt="" /></div>
<div id="gris" class="widget_latst_item_text">
<p><?php echo $col2['bbc-rss'];?></p>
</div>
</div>
<div class="widget_latst_item m-top-30">
<div class="item_icon"><img src="<?php bloginfo('template_directory');?>/img/rss/reuters_rss.png" alt="" /></div>
<div id="gris" class="widget_latst_item_text">
<p><?php echo $col2['reuters-rss'];?></p>
</div>
</div>
<div class="widget_latst_item m-top-30">
<div class="item_icon"><img src="<?php bloginfo('template_directory');?>/img/rss/cnbc.jpg" alt="" /></div>
<div id="gris" class="widget_latst_item_text">
<p><?php echo $col2['cnbc-rss'];?></p>
</div>
</div>
</div><!-- End off widget item -->
</div><!-- End off col-md-3 -->
I have created the image field bbcimg with the following properties:
Field label: bbcimg
Field Name: bbcimg
Field Type: image
Instructions: -
Required: No
Return Format: Image Array
Preview Size: Medium(300x300)
Library: All
Minimum: Width 40px, Height px 40 File size - MB
Minimum: Width - px, Height px - File size - MB
Allowed file types: -
Conditional Logic: -
Wrapper Attributes: -
And the image is already uploaded in the custom field. See picture:
Question:
How to write the logic to display the picture on the website?
Thank you very much in advance!
been trying to use
First you need to find out what is getting returned inside the custom field.
Add a good old print_r to your code somewhere:
<?php print_r($col2['bbcimg']) ?>
That will print out an array of values like Array( 'url' => 'http....something.jpg', 'size'=>'full', ..etc)
Then you can identify which array value gives you the full URL to the image. Say in this case it would be a field called url, then you can use that value as follows:
<div id="gris" class="widget_latst_item_text">
<img src="<?php echo $col2['bbcimg']['url']; ?>" alt=""/>
<p><?php echo $col2['bbc-rss'];?></p>
</div>
I returning my data to build a list group. All is fine but when the data contains <pre> tag it messes my display.
My list group as follows.
if (isset($BS_array)){
//Create a list group to show results
echo '<div class="list-group">';
foreach($BS_array as $result){
?>
<!-- Build list group -->
<div class="list-group-item list-group-item-action" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<!-- Incident number goes here -->
<h5 style="cursor: pointer;" id="<?php echo $result['number']; ?>" onclick="getINCDetails(this.id)" class="mb-1"><?php echo $result['number']; ?></h5>
</div>
<!-- Description goes here -->
<p class="mb-1"><?php echo $result['description']; ?></p>
<small>
<?php
//List BS in INC card
echo $result['state'];
?>
</small>
</div>
<?php
}
echo '</div>';
}
?>
The way when all goes ok should be like this.
But at times, $result['description'], contains the word <pre>, which messes things up.
It will look like this.
How do I fix/circumvent this problem?
If you dont require html tags to actually work on the description just use htmlentities():
<?php echo htmlentities($result['description']); ?>
That will actually show instead of the browser considering it html tag.
I have a custom theme I am working on in wordpress, and I want to display the last 3 blog posts made onto my home page. I also want to style certain information regarding each post differently, like have the month and year be a certain font, and the day be much bolder and different font as well, along with displaying like a sentence or less of the article, followed by a "..." and "read more" type of thing.
How do I pull data from the blog? I know there are certain wordpress functions that can get me this data but I haven't been able to quite figure out how to do it, I'm not really well versed in the wordpress php functions. Right now I just have it hard coded but it's annoying to have to retype everything when I make a new post. I know you can set to show however many blog posts on the settings->reading but I want to be able to fully customize how it looks.
Let me know any suggestions on how I should go about doing this!
<div class="bottom">
<div class="wrap-2">
<h2>Blog</h2>
<div class="content-div">
<div class="bottom_box">
<div class="btm-img"><h4>April <span>25</span><br />2014</h4></div>
<div class="right_block">
<p class="highlight2">blog title 1</p>
<p class="highlight3">lksj sldkf jsl lsdkfj sdklf sd</p>
Read More >
</div>
</div>
<div class="bottom_box">
<div class="btm-img"><h4>April <span>24</span><br />2014</h4></div>
<div class="right_block">
<p class="highlight2">blog title 2</p>
<p class="highlight3">lsdkjf lsdk fjsl dkkddk lsdkfjpaskldfj;</p>
Read More >
</div>
</div>
<div class="bottom_box">
<div class="btm-img"><h4>April <span>23</span><br />2014</h4></div>
<div class="right_block">
<p class="highlight2">blog title 3</p>
<p class="highlight3">lksdjf slkdfjsldkfj;as dfklsd;j fsld;kfj</p>
Read More >
</div>
</div>
</div>
</div>
</div>
Try the snippet below. Use your custom HTML block (the one with botom_box class) instead of this used below.
<?php $posts = get_posts("numberposts=3"); ?>
<?php if($posts) : ?>
<?php foreach( $posts as $post ) : setup_postdata( $post ); ?>
<!-- your HTML block goes here --->
<div class="post">
<h3><a href="<?php echo get_permalink($post->ID); ?>" ><?php echo $post->post_title; ?></a></h3>
<?php the_excerpt(); ?>" rel="bookmark">read more</a>
</div>
<!-- end of the HTML block -->
<?php endforeach; ?>
<?php endif; ?>
I'm using the echo do_shortcode function to include an events calendar within a WP template. I need to display a custom field within the shortcode area, but can't get it to work. Below is my code. I need the custom field "tickets" to show in the a href="#" section (replacing the #).
The post is a custom post type called "event".
<?php echo do_shortcode('[eo_events]
<div class="date">
<div class="month">%start{M}%</div>
<div class="day">%start{j}%</div>
</div>
<div class="venue">
<h2 style="margin-bottom:-40px!important; padding-bottom:0;">%event_venue%</h2>
<br/>%event_venue_address%<br/>%event_venue_country%, %event_venue_postcode%
</div>
<div class="city"><h2>%event_venue_city%</h2></div>
<div class="tickets">
<h2>Tickets</h2>
</div>
[/eo_events]');
?>
get the custom field first and save it in a variable. You can use the variable later in the string.
<?php
$url = get_post_meta($post_id, 'tickets', true);
echo do_shortcode('[eo_events]
<div class="date"><div class="month">%start{M}%</div> <div class="day">%start{j}%</div></div> <div class="venue"><h2 style="margin-bottom:-40px!important; padding-bottom:0;">%event_venue%</h2> < br/> %event_venue_address%<br/>%event_venue_country%, %event_venue_postcode%</div> <div class="city" ><h2 >%event_venue_city%</h2></div> <div class="tickets">
<h2>Tickets</h2>
</div>
[/eo_events]');
?>
I am doing some WordPress theming. I have a #novelsslider div. Inside of #novels, I used this code to get the latest three posts in the "novels" category, inside of the html divs, I used some php functions to get the latest 3 posts and load the html 3 times floated to the left to build a slider:
<!-- slider -->
<div id="novelsslider" class="slider">
<? $novels = get_option('of_novels') ?>
<?php query_posts('category_name=$novels&posts_per_page=3'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="sliderunit">
<?php the_post_thumbnail(); ?>
<div class="novelsslidertitle">
<div class="arrow-left"></div>
<a href="<?php the_permalink(); ?>">
<img class="cross" src="<?php bloginfo('stylesheet_directory'); ?>/images/cross.png"/>
</a>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</div>
</div>
<?php endwhile;?>
<div id="novelsslidebars">
<input type="submit" value="" class="slidebars" id="novelsslidebtnleft">
<input type="submit" value="" class="slidebars" id="novelsslidebtnmiddle">
<input type="submit" value="" class="slidebars" id="novelsslidebtnright">
</div>
</div>
<!-- End novelsslider -->
ow I have some arrows.. I want them when clicked to get a set of previous 3 posts and load them, how can I do such a loop?
To achieve this you can adopt any of these methods :
1- If your posts are not in large number then you can preload them and store in some container which is hidden by default and will appear when you click the next / previous button, like a content slider, but this is a bad approach and not recommended.
2- Use AJAX to load the rest of the posts, this is a good method and will be purely dynamic. Look on the following links to have the idea:
http://wp.tutsplus.com/tutorials/getting-loopy-ajax-powered-loops-with-jquery-and-wordpress/
Wordpress - how can I fetch more posts via AJAX?