Category-based conditional If statement to display ACF field

Posted in: Newspaper
Post count: 38

Hi,

I am using ACF to create custom fields and want to add a conditional If statement to td_module_9 where it only displays my Media Outlet custom field if the Block 10 filter is set to the “News” category.

When inserted in the td_module_9.php file, this works – <?php the_field(‘media_outlet’, $this->post->ID); ?>

However, I have tried a number of options for the conditional If statement such as –

<?php if (in_category( ‘news’ )) : ?><?php the_field(‘media_outlet’, $this->post->ID); ?><?php endif;?>

Am I missing something as this is a module and not a page?

Thanks.

Regards

Gary

Post count: 20688

Hi,

You could try something like this – http://prntscr.com/ojaqga seems to work fine for me
<?php if (in_category('Gadgets', $this->post->ID)) {
the_field('test', $this->post->ID);
}?>

So for example if my post is in the Gadgets category the field appears
http://prntscr.com/ojar9r -> http://prntscr.com/ojarep
If it’s not in the Gadgets category it won’t appear
http://prntscr.com/ojas1m -> http://prntscr.com/ojas6g

You could give it a try, should work correctly.
Thanks

Post count: 38

Fantastic! Thank you very much!

Post count: 38

Hi Simion,

Obviously I would like to apply formatting to this. Is it better to add a new Div Class to the main CSS style sheet or use the Newspaper custom CSS options?

If the latter could you provide me with an example that formats your Gadget field as an OpenSans font, 600 weight, bold etc?

I am not clear whether I create a new class in the CSS options box or overwrite a class using .TD_module_X {}

Thanks

G

Post count: 38

Hi Simion,

I have taken what you did and extended the functionality.

When added to a module it displays a list of relevant posts, with one set of ACF custom fields, if the block directory category filter is set to either ‘News’,’Features’ or’Tech’ – or it displays posts, featuring other custom fields, if the block directory category filter is set to ‘Research’ and the relevant posts are tagged with any of ‘aged care’, ‘anxiety/stress’, ‘autism’, ‘cognitive’, ‘Dementia’, “Parkinson’s”, ‘sleep’ or ‘well-being’.

******

<?php

$hb1 = in_category(
array(‘News’,’Features’,’Tech’),
$this->post->ID
);
$hb2 = in_category( array(‘Research’), $this->post->ID );
$hb3 = has_tag(
array( ‘aged care’, ‘anxiety/stress’, ‘autism’, ‘cognitive’, ‘Dementia’, “Parkinson’s”, ‘sleep’ , ‘well-being’ ),
$this->post->ID
);

if ( $hb1 )
{
the_field(‘media_outlet’, $this->post->ID);
the_field(‘media_outlet_url’, $this->post->ID);
the_field(‘published_date’, $this->post->ID);
}
else if ( $hb2 && $hb3 )
{
the_field(‘media_outlet’, $this->post->ID);
the_field(‘published_date’, $this->post->ID);
the_field(‘country’, $this->post->ID);
}
?>

******
I thought it might be worth sharing it with the community (btw, I have spent quite a lot of time today going through the support forum. A code snippet section would be useful).

In the TagDiv block editor I added the Class name “editorial_listing_block and tried to use this to apply different a different font family, font size, font weight and colour to each of the custom fields but it didn’t work. My CCS skills are very limited.

Could you give some advice as to how I achieve my desired CSS styling for the displayed field content?

Many Thanks.

Best

G

Post count: 20688

Thank you for the example and the details you provided, other users will most likely find this very helpful.

Wrapping the fields in a div container shouldn’t cause any problems, you can set a class to the div in order to apply CSS to it.

In my example I did something like this, I wrapped the whole code in a div with a class
http://prntscr.com/ojrxr0
Now the field can be customized with CSS, depending on what you need
http://prntscr.com/ojryay
If you need help with it, provide a link to where the fields appear, after you wrap the code with a div with class, and mention how you want them to look. Let me know.

Post count: 38

Thanks Simion

Leave it with me and I will see if I can crack it.

Post count: 38

Hi Simeon

I trust you are well. I’ve done some more work.

Effectively what this does now is turn module 9 (I moved it from 8) into a kind of news, or other type, listing that is designed to feature aggregated content from other sites – so that when the headline is clicked it takes the viewer to another browser.

In the new version I have added Tags to the type where the content is driven by posts that have a certain category and tags attached (using this post) and deleting the Tag labelling from the td_module.php file.

When the content displayed is driven just by a category, I made the media outlet name a dynamic link that when cliked would also take the viewer to the main home page in a new window (as I am sure you know, this is a common feature of news aggregation services).

Whilst I have cracked the CSS a little I am still not strong enough to resolve all my needs. As an example I took the title field outside of the standard TagDiv placement to get the external URL to work. If I left it where it was it was adopting the a.link class from higher up but I couldnt see where. Obviously, this means any settings made to Block 10 style in the normal editor won’t work – which isn’t ideal.

Also, I think I over-complicated the CSS. My additions are –

/* Adds line under each story */
.td_block_10 .td_module_9 {text-align: left; border-bottom: 0.5px solid #d3d3d3; padding: 0 0 0.5em 0; margin: 0 0 0.5em 0;}

/* headline link details */
.item-details a:link {
font-family:Open Sans;
color:#000000;
font-size:13px;
font-weight:700;
}
a:hover {
color:#459fd3;
}
a:visited {
color:#336980;
}

/* Sets width of box header */
.td-pulldown-size {width: 100px;}

/*sets font style for news details */
.news_details {font-family:Open Sans;
color:#000000;
font-size:11px;
font-weight:600;
padding-bottom: 3px;
}

a:link {
font-family:Open Sans;
color:#000000;
font-size:11px;
font-weight:600;
}
a:visited {
color:#459fd3;
}

In this image you will see the two options along with the issues I can’t fix, https://prnt.sc/om3yp8,

Any help you can give with the CSS would be appreciated.

I am more than happy to then create a clean post for the community, with the code and an explanation of each ACF field etc – and reference the new post at the end of this chain.

I am just experimenting with design options across the entire site at the moment but if you go here, (p/w: he768ijKllmnhp). If you need admin access let me know.

Thanks in advance.

Best wishes

Gary

Post count: 20688

Hi,

The title line spacing can be reduced by changing the line-height, for example
https://prnt.sc/ombguv (default is 21px)

.td_block_10 .td_module_9 .item-details {
line-height: 15px;
}

The space below the tags is there because by a margin. Where tags appear usually (in the post page) there is a margin. This margin applies now in the module, but it can be removed
https://prnt.sc/ombln2

.td_block_10 .td_module_9 .td-tags {
margin: 0;
}

To make the text grey, as it is now, you could do this – https://prnt.sc/ombqyz

.td_block_10 .td_module_9 .news_details,
.td_block_10 .td_module_9 .news_details > a {
color: grey;
}

Adding a margin between the title and date is possible for some modules, the ones that have a link for the title, as then you can target the link and add the margin or padding
https://prnt.sc/ombs6l
But the ones with no link contain just text, there is no HTML to target
https://prnt.sc/ombsl0

.td_block_10 .td_module_9 .news_details > a {
margin-right: 10px;
}

For the country to be in a new line it would have to be set in the code itself, or with CSS. With CSS it cannot be targeted as it currently is – https://prnt.sc/ombtfu
There isn’t a CSS code to target specific characters from a text that aren’t part of a container, and place them in a new line.

Maybe you can add containers for the displayed data, so they can be targeted better. Let me know.

Thanks

Post count: 38

Hi Simion

This is great thank you. Your idea about containers is great but I’m not sure how to pursue this. Any direction you could give would be great.

Thanks.

Best Wishes

Gary

Post count: 38

Hi Simion

I’m playing with making the country a tag, creating a separate Country taxonomy and then filtering against this – kind of makes sense, though I thought that extra alternative to a tag would scoop up another option and that also doesn’t solve the date issue so a container maybe the only option.

I tried the container div css code with article/section underneath it but it didn’t work.

I will keep trying but any insight you could give would be helpful.

Thanks for everything you have done.

Best

G

Post count: 20688

Hi,

Are you entering the ACF date and country manually? Maybe they can be split in two ACF fields, then you can wrap each in their own container in the code, so they can be targeted individually – https://prnt.sc/omummwhttps://prnt.sc/omuom3https://prnt.sc/omup88

If that is not possible, another way you could do is to simply add a br tag between them like this
https://prnt.sc/omuk42https://prnt.sc/omukbg
It should set the country in a new line, but it still cannot be targeted with CSS.

Thanks

Post count: 38

Hi

Thanks again. Leave it with me. Hopefully, I will crack it today and put the new post up for the community.

Have a good day.

Best

G

Post count: 38

Hi Simion,

I hope you are well.

I have made some changes to the previous td_module_9 php I sent you.

Rather than hard coding the If and ElseIf statements with the category and tags as before, the If statement now calls a post_type variable. This is basically an ACF custom field, with two options, to which some of the other ACF fields are conditionally tied – I also changed the ElseIf to an Else.

In addition I have integrated the code with the module 9 default div classes and added a couple including a couple span classes. This now means each field sits within a separate CSS element I can style. The code is also now shorter as you will see –

<?php

class td_module_9 extends td_module {

function __construct($post, $module_atts = array()) {
//run the parrent constructor
parent::__construct($post, $module_atts);
}

function render() {
ob_start();
$title_length = $this->get_shortcode_att('m9_tl');
$modified_date = $this->get_shortcode_att('show_modified_date');

$hb1 = in_category(array('News','Features','Tech'), $this->post->ID );
$hb2 = in_category( array('Research'), $this->post->ID );
$hb3 = has_tag(array( 'aged care', 'anxiety/stress', 'autism', 'cognitive', 'Dementia', "Parkinson's", 'sleep' , 'well-being' ), $this->post->ID);
$hb4 = get_field (post_type, $this->post->ID);

$link = get_field('media_outlet_url', $this->post->ID);
$media = get_field ('media_outlet', $this->post->ID);
$country = get_field ('country', $this->post->ID);
$publicationdate = get_field ('publication_date', $this->post->ID);

?>

<div class="<?php echo $this->get_module_classes();?>">

<div class="item-details">
post->ID); ?>" rel="bookmark" title="<?php echo get_the_title( $this->post->ID );//$title; ?>"><?php echo get_the_title( $this->post->ID ); //$title; ?>

<div class ="news_headline">
</div>

<?php if (td_util::get_option('tds_category_module_9') == 'yes') { echo $this->get_category(); }?>

<div class="td-module-meta-info">

<div class="media_date">
<span class="td-post-author-name">
<?php if ($hb4 == "News etc"){
echo "{$media}";
}else{
echo $media;
}?>
<span>-</span> </span>
<span class="td-post-date">
<time class="entry-date updated td-module-date"><?php echo $publicationdate; ?></time></span>
</div>

<div class="td-post-content">
<?php if ($hb4 == "News etc"){
echo $country;
}else{
echo $this->get_the_tags();
}?>

</div>

</div>

</div>

<?php echo $this->get_quotes_on_blocks();?>

</div>
<?php return ob_get_clean();
}
}

I still have to work on the CSS, You will notice some of the div names don’t make sense when compared to the fields they contain and some of my previous CSS is now redundant so it needs a tidy up.

I aim to get this done in the next couple days and will then put up a revised and instructional post for the community as promised.

If you spot anything I could improve or have any comments please do let me know.

Best Wishes

Gary

Post count: 20688

Hi,

The code looks fine, I am looking forward to see the end result being used and if possible a guide that other users may find very helpful.

Thanks

Post count: 38

Hi Simion

I posted here https://forum.tagdiv.com/topic/code-share-different-content-at-the-same-time-from-block-10/#post-308876 but it didn’t accept the html for my table and I can’t edit it. Can you pull it down and I will report the table as text,

Sorry about this.

G

Post count: 20688

Hi,

No problem whatsoever, I will remove the topic, then you can post it again. You can also provide code examples by pastebin – https://pastebin.com/

Thanks

Post count: 38
Post count: 38

Hi Simion

I meant to sat I hope the final post is OK.

Best

G

Viewing 19 posts - 1 through 19 (of 19 total)
The forum ‘Newspaper’ is closed to new topics and replies.