Hello all Mike here,
I'm quite new to PHP, Worpress and Beans but soldiering on so please bear with me.
Please help me with the following. I have a custom homepage template with the following custom meta fields:
//Feature 1
add_action( 'admin_init', 'homepage_main_ft_1_meta', 8 );
function homepage_main_ft_1_meta() {
$fields = array(
array(
'id' => 'ft_1_icon',
'label' => 'Icon',
'type' => 'image',
'description' => 'Keep icon image size to 180x180 pixels or 1x1 ratio'
),
array(
'id' => 'ft_1_title',
'label' => 'Title',
'type' => 'text'
),
array(
'id' => 'ft_1_desc',
'label' => 'Description',
'type' => 'text'
)
);
beans_register_post_meta( $fields, array( 'post', 'template-homepage.php' ), 'main-feature-1', array( 'title' => 'Main Feature 1/3' ) );
}
//Feature 2
add_action( 'admin_init', 'homepage_main_ft_2_meta', 8 );
function homepage_main_ft_2_meta() {
$fields = array(
array(
'id' => 'ft_2_icon',
'label' => 'Icon',
'type' => 'image',
'description' => 'Keep icon image size to 180x180 pixels or 1x1 ratio'
),
array(
'id' => 'ft_2_title',
'label' => 'Title',
'type' => 'text'
),
array(
'id' => 'ft_2_desc',
'label' => 'Description',
'type' => 'text'
)
);
beans_register_post_meta( $fields, array( 'post', 'template-homepage.php' ), 'main-feature-2', array( 'title' => 'Main Feature 2/3' ) );
}
//Feature 3
add_action( 'admin_init', 'homepage_main_ft_3_meta', 8 );
function homepage_main_ft_3_meta() {
$fields = array(
array(
'id' => 'ft_3_icon',
'label' => 'Icon',
'type' => 'image',
'description' => 'Keep icon image size to 180x180 pixels or 1x1 ratio'
),
array(
'id' => 'ft_3_title',
'label' => 'Title',
'type' => 'text'
),
array(
'id' => 'ft_3_desc',
'label' => 'Description',
'type' => 'text'
)
);
beans_register_post_meta( $fields, array( 'post', 'template-homepage.php' ), 'main-feature-3', array( 'title' => 'Main Feature 3/3' ) );
}and have the content pulling through to the front-end like so:
function features() {
?>
<div class="uk-grid" data-uk-grid-margin="">
<div class="uk-width-medium-1-3 uk-text-center">
<div class="uk-thumbnail uk-overlay-hover uk-border-circle">
<img src="" alt="" height="180" width="180">
</div>
<h2 class="uk-margin-bottom-remove"><?php echo esc_html( beans_get_post_meta( 'ft_1_title' ) ) ?></h2>
<p class="uk-text-large uk-margin-top-remove uk-text-muted"><?php echo esc_html( beans_get_post_meta( 'ft_1_desc' ) ) ?></p>
</div>
<div class="uk-width-medium-1-3 uk-text-center">
<div class="uk-thumbnail uk-overlay-hover uk-border-circle">
<img src="" alt="" height="180" width="180">
</div>
<h2 class="uk-margin-bottom-remove"><?php echo esc_html( beans_get_post_meta( 'ft_2_title' ) ) ?></h2>
<p class="uk-text-large uk-margin-top-remove uk-text-muted"><?php echo esc_html( beans_get_post_meta( 'ft_2_desc' ) ) ?></p>
</div>
<div class="uk-width-medium-1-3 uk-text-center">
<div class="uk-thumbnail uk-overlay-hover uk-border-circle">
<img src="" alt="" height="180" width="180">
</div>
<h2 class="uk-margin-bottom-remove"><?php echo esc_html( beans_get_post_meta( 'ft_3_title' ) ) ?></h2>
<p class="uk-text-large uk-margin-top-remove uk-text-muted"><?php echo esc_html( beans_get_post_meta( 'ft_3_desc' ) ) ?></p>
</div>
</div>
<?php
}Now for the Q's:
- How do i pull the image src URL in?
- What is the best way to have placeholder text/images if the user hasn't filled out the fields in the admin - maybe an if/else statement?
- Can the custom meta fields code be condensed into a single function?
Thanks in advance and thanks Thierry for introducing me to Beans! Looking forward to getting my first Beans site out.
m
Hey Mike and welcome to the forum 🙂
Yes all the post meta could be in the same admin_init action callback function. In fact, it would be better to put it in a loop since you are repeating codes. See the example below:
add_action( 'admin_init', 'example_post_meta', 8 );
function example_post_meta() {
$total = 3;
for ( $i = 1; $i <= $total; $i++ ) {
$fields = array(
array(
'id' => "ft_{$i}_icon",
'label' => 'Icon',
'type' => 'image',
'description' => 'Keep icon image size to 180x180 pixels or 1x1 ratio'
),
array(
'id' => "ft_{$i}_title",
'label' => 'Title',
'type' => 'text'
),
array(
'id' => "ft_{$i}_desc",
'label' => 'Description',
'type' => 'text'
)
);
beans_register_post_meta( $fields, array( 'post', 'template-homepage.php' ), "main-feature-{$i}", array( 'title' => "Main Feature {$i}/{$total}" ) );
}
}See we set the $total to 3 and then use it to register your 3 groups for fields using the $i variable which increements everytime. So if you needed and extra one you can just adjust the $total to 4 and let the magic happen.
We can apply the same logic to displaying it. Here is what it looks like:
function features() {
?>
<div class="uk-grid" data-uk-grid-margin="">
<?php $total = 3; for ( $i = 1; $i <= $total; $i++ ) :
$src = wp_get_attachment_url( beans_get_post_meta( "ft_{$i}_icon" ) );
if ( !$src ) {
$src = '/your/placeholder/path/to/image';
}
?>
<div class="uk-width-medium-1-3 uk-text-center">
<div class="uk-thumbnail uk-overlay-hover uk-border-circle">
<img src="<?php echo esc_url( $src ); ?>" height="180" width="180">
</div>
<h2 class="uk-margin-bottom-remove"><?php echo esc_html( beans_get_post_meta( "ft_{$i}_title" ) ) ?></h2>
<p class="uk-text-large uk-margin-top-remove uk-text-muted"><?php echo esc_html( beans_get_post_meta( "ft_{$i}_desc" ) ) ?></p>
</div>
<?php endfor; ?>
</div>
<?php
}Regarding the image, Beans return the image id to avoid having URL in the DB which could be subject to change and cause issue. So there you can simply get the url with the image id using the wp_get_attachment_url() function.
For your placeholder, I would suggest to add a placeholder image on your site and then add its path in the code above (instead of /your/placeholder/path/to/image).
Repeatable fields will be added to Beans 1.4 so it will be much easier and more dynamic 🙂
Happy coding,
Thanks so much Thierry, let me digest this.
Safe Travels!
Thanks Thierry that worked like a charm. Just one more question that i'm having trouble with and thats outputing the multiple image array...
add_action( 'admin_init', 'logo_strip', 8 );
function logo_strip() {
$fields = array(
array(
'id' => 'logo_strip_img',
'label' => 'Logo Strip Images',
'type' => 'image',
'multiple' => true
)
);
beans_register_post_meta( $fields, array( 'post', 'template-homepage.php' ), "logo-strip", array( 'title' => "Logo Strip" ) );
}
I've tried a couple for loops methods but just can't get it right
Cheers,
Hey Mike,
The value returned is any array with the images ids, so you can do a simple foreach loop through all ids and set your HTML in the loop. Here is a very basic example which should get you going:
foreach ( beans_get_post_meta( 'logo_strip_img', array() ) as $id ) {
$src = wp_get_attachment_url( $id );
?><img src="<?php echo esc_url( $src ); ?>" alt="" height="" width=""><?php
}Note how beans_get_post_meta second argument (default) is an empty array to prevent a PHP warning of nothing is set.
Happy coding,
Perfect! Works like a charm! I was close 😉