customizing image src of each post in a WordPress loop - wordpress

So I have a WP_Query looping through my custom post types and I'm looking to customize the src of my image tags based on which post in the loop it is. What is the cleanest way to achieve this.
consider this as what my loop is spitting out on each iteration:
<div class="partnerships p-section">
<div class="-display-inlineBlock partnerships icon">
<img style="min-width:71px;" src="<?php bloginfo('template_url')?>/images/icons/trainingAndDevelopment.svg">
</div>
<div class="-display-inlineBlock" style="width:70%">
<h1><?php the_title();?></h1>
<hr>
<p><?php the_content(); ?>
</p>
</div>
</div>

Why you don't use post thumbnail?
<div class="partnerships p-section">
<div class="-display-inlineBlock partnerships icon">
<img style="min-width:71px;" src="<?php the_post_thumbnail_url(); ?>">
</div>
<div class="-display-inlineBlock" style="width:70%">
<h1><?php the_title();?></h1>
<hr>
<p><?php the_content(); ?>
</p>
</div>
</div>
EDIT:
Then you need to allow upload SVG.
But BE WARNING: Allow upload SVG is not good for security
(take a look: https://secupress.me/blog/add-svg-support-in-wordpress-medias-yes-but-no/)
So DO NOT USE THE FOLLOWING CODE, which one can see everywhere.
function custom_mtypes( $m ){
$m['svg'] = 'image/svg+xml';
$m['svgz'] = 'image/svg+xml';
return $m;
}
add_filter( 'upload_mimes', 'custom_mtypes' )
FIRST SOLUTION
I don't know how to clean SVG on upload, luckily a plugin that does all that exists. This plugin also fixes some others issues with svg.
https://wordpress.org/plugins/scalable-vector-graphics-svg/
SECOND SOLUTION
If only admin need to upload svg
You can use following code:
function custom_mtypes( $m ){
if(get_current_user_id()==1){
$m['svg'] = 'image/svg+xml';
$m['svgz'] = 'image/svg+xml';
return $m;
}
}
add_filter( 'upload_mimes', 'custom_mtypes' );
If you speak French here is an interesting discussion on this subject
https://wpchannel.com/autoriser-envoi-fichiers-svg-wordpress/ (read comments, DON'T USE THE CODE on the top of this article)

Related

Bootstrap collapse stops working when switching field type to WYSIWYG

I'm creating a FAQ page on my wordpress site. I am using bootstrap 4.0's collapse component and ACF Pro to build the page.
On the back end, an admin can add questions and answers. The answers are to be hidden on the front end until a user clicks on the question to toggle the answer. Originally the answer field was a text area. All was working great! But when I changed the answer field type to be a WYSIWYG editor, the collapse functionality stopped working altoghether and the answers are not hidden or collapsible. Does anyone know how to solve this issue?
Thanks in advance, code snippet below.
<?php while( have_rows('topic_information') ): the_row();
$question = get_sub_field('question');
$answer = get_sub_field('answer');
$counter++;
?>
<div class="question-btn collapsed" data-toggle="collapse" data-target="#<?php echo $counter; ?>" aria-expanded="false" aria-controls="<?php echo $counter; ?>">
<div class="question">
<p class="question-text">
<?php echo $question; ?>
</p>
<div class="toggle-status"></div>
</div>
<div class="answer">
<p id="<?php echo $counter; ?>" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"><?php echo $answer; ?>
</p>
</div> <!--.answer-->
</div> <!--.question-btn-->
<?php endwhile; ?> <!-- WHILE ( have_rows('topic_information') -->
I've experienced this with bootstrap when the bootstrap.js, bootstrapcdn or bootstrap.min.js is referenced more than once on a page. For me the plugin I was using was also importing or referencing its own bootstrap.js or bootstrap.min.js file which it why it was happening to me.
I would try removing the bootstrap.js or bootstrap.min.js reference from the ACF Pro plugin if possible or try removing it from your project (since your plugin is already referencing it) to see if works.
If that doesn't work you might want to try doing it from javascript since it sounds like the faq is dynamically generated:
bootstrap collapse not working when creating dyanmically
Good luck

Get post title from ACF - select post

I have beginner with ACF and WordPress as developer.
So, I want to select which title post has to be displayed in div from WordPress panel. I have got some ACF file called "hot_news" which is post object. Returned content is post object, not ID.
I have got also "Show if post is equal to (some post title)".
This is my code:
<div class="bp1-col-1-1 news-line">
<a class="button button-hot-news" href="#">Aktualności</a>
<img class="hot-icon hot-icon-left" src="<?php echo get_bloginfo('template_url') ?>/images/warning-icon.png" alt="Hot news!">
<div class="morquee-efect">
<a class="hot-news-title" href="#"><?php the_field('hot_news'); ?></a>
</div>
<img class="hot-icon hot-icon-right" src="<?php echo get_bloginfo('template_url') ?>/images/warning-icon.png" alt="Hot news!">
</div>
When I make it is displayed, but does not display post title. What is wrong?
to retrieve a field from ACF you should use get_field so
<?php echo get_field('hot_news'); ?>
prints the current post custom field named "hot_news".
If you want you can specify a post ID :
<?php echo get_field('hot_news'[,post_ID]); ?>
You said in your question that hot_news is a post object. Therefore, if you try to echo an object, you're not going to get what you want.
Instead, you'll have to do something like:
<div class="bp1-col-1-1 news-line">
<a class="button button-hot-news" href="#">Aktualności</a>
<img class="hot-icon hot-icon-left" src="<?php echo get_bloginfo('template_url') ?>/images/warning-icon.png" alt="Hot news!">
<div class="morquee-efect">
<a class="hot-news-title" href="#"><?php
$hotnews = get_field('hot_news');
if($hotnews) echo $hotnews->post_title;
?></a>
</div>
<img class="hot-icon hot-icon-right" src="<?php echo get_bloginfo('template_url') ?>/images/warning-icon.png" alt="Hot news!">
</div>
You can get more info on how to work with an ACF post object here: https://www.advancedcustomfields.com/resources/post-object/
My method should work if you just need the simple post title, but if you start needing permalinks to the post and stuff like that, it may make sense to use the setup_postdata($post) code that the ACF docs use.

How do I filter out certain results based on the value of a faceted Attribute with Algolia Search for Wordpress?

I'm trying to filter out some results in an Algolia faceted search within Wordpress. I want to show only certain results to a user logged in with a specific WP user role. Here is what I have in my results now and it's not returning any result, but the pagination for the search does show up, so I know the script is running without errors. I also do not have any console errors.
This is my current script from instantsearch.php:
<script type="text/html" id="tmpl-instantsearch-hit">
<article itemtype="http://schema.org/Article">
<?php
// Get data
$post_title = '{{{ data._highlightResult.post_title.value }}}';
$aim_of_work = '{{{ data._snippetResult.aim_of_organisations_work.value }}}';
$organisation_region = '{{{ data._highlightResult.organisation_region.value }}}';
?>
<?php
// If user is limited to Americas and the Carribbean
if( in_array('americas', $user_info->roles) ) {
if($organisation_region == 'Americas and the Caribbean') { ?>
<!-- Print Americas Results -->
<div class="ais-hits--content">
<h3 itemprop="name headline"><?php echo $post_title; ?></h3>
<div class="ais-hits--tags">
<# for (var index in data.taxonomies.post_tag) { #>
<span class="ais-hits--tag">{{{ data._highlightResult.taxonomies.post_tag[index].value }}}</span>
<# } #>
</div>
<div class="excerpt">
<p>
<?php echo $aim_of_work; ?>...
</p>
<p class="text-small">Region: <?php echo $organisation_region; ?></p>
</div>
</div>
<div class="ais-clearfix"></div>
<?php } //END if
} else { ?>
<!-- Print All Results -->
<div class="ais-hits--content">
<h3 itemprop="name headline"><?php echo $post_title; ?></h3>
<div class="ais-hits--tags">
<# for (var index in data.taxonomies.post_tag) { #>
<span class="ais-hits--tag">{{{ data._highlightResult.taxonomies.post_tag[index].value }}}</span>
<# } #>
</div>
<div class="excerpt">
<p>
<?php echo $aim_of_work; ?>...
</p>
<p class="text-small">Region: <?php echo $organisation_region; ?></p>
</div>
</div>
<div class="ais-clearfix"></div>
<?php } // END if ?>
</article>
</script>
My concern is that my conditional is not working: if($organisation_region == 'Americas and the Caribbean')
I feel like there is a better way to do this, but I would take any way that works right now.
/**-- UPDATE --*/
Here is my facet widget:
/* Region refinement widget */
search.addWidget(
instantsearch.widgets.menu({
container: '#facet-org-region',
attributeName: 'organisation_region',
sortBy: ['isRefined:desc', 'count:desc', 'name:asc'],
limit: 10,
templates: {
header: '<h3 class="widgettitle">Region</h3>'
}
})
);
Your solution seems to mix JavaScript code with PHP.
PHP code gets parsed and executed on the server side and JavaScript on the client side in the browser.
In your example, $organisation_region will always equal the string '{{{ data._highlightResult.organisation_region.value }}}'.
You probably want to add organisation_region as a facet and then refine on that.
To achieve that, you can take a look how other facets are implemented here https://community.algolia.com/wordpress/customize-search-page.html
Also, here is how to register your custom facet: https://community.algolia.com/wordpress/indexing-settings.html#register-custom-facet

Div Class order Problems

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)

WORDPRESS: Slider with Image, Caption & Excerpt from custom fields, of the same post

Good Morning and Seasons Greetings! I am looking for help. I am trying to create a custom post, single page template where I want to embed a slider that fetches images, title and excerpt from the data of the same post. Let me describe the problem I seek help for.
The BACKGROUND Info
1) I have created a custom Post Type called "HPC Products"
2) It is linked with Custom Taxonomy called "HPC Product Categories"
3) The custom fields group for HPC Product includes Key Highlight 1, Key Highlight 2, Key Highlight 3 (all 3 as Single text fields) it also has fields called Product Image 1, Product Image 2, Product Image 3 (All 3 Image fields) , there are some other fields too such as title, features etc,
4) I have made a Custom Content Template for the Single-HPC-Product.
THE GOAL (Which I am not able to achieve)
Within the single-hpc-product page, I have the title and tagline followed by product description.Under that I want to have a slider with 3 slides.
Slide 1 – Should fetch Prod Image 1, The title of Key Highlight 1 and the Details of Highlight 1
Slide 2 – Should fetch Prod Image 2, The title of Key Highlight 2 and the details of Highlight 2
Slide 3 – Should fetch Prod Image 3, The title of Key Highlight 3 and the details of Highlight 3.
I have searched a lot of the forum strings, I have tried more than 25 different attempts at views and templates with different options such as Post is Parent, Post is Child, – Template is slider, template is custom display etc etc, But for some reason I am not getting success.
I really would be grateful if you could help me out by guiding me with simple steps to do this, I am a newbie with no knowledge or experience in php or coding.
I think you are using Advanced Custom Fields plugin to create your custom fields. If not use get_post_meta() instead of get_field()
First you need to find a slider that match with your requirements. After you found one look at it's markup. Imagin it's look like following code ,
<div id="slider-main">
<div class="slide">
<img src="images/img1.png" />
<span class="caption-1">Key Highlight</span>
<p class="caption-2">Key highlight details</p>
</div>
<div class="slide">
<img src="images/img2.png" />
<span class="caption-1">Key Highlight</span>
<p class="caption-2">Key highlight details</p>
</div>
<div class="slide">
<img src="images/img3.png" />
<span class="caption-1">Key Highlight</span>
<p class="caption-2">Key highlight details</p>
</div>
</div>
your template file look like this,
<?php get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id="main">
<div id="slider-main">
<div class="slide">
<img src="<?php echo get_field('product_img1'); ?>" />
<span class="caption-1"><?php echo get_field('key_highlight1'); ?></span>
<p class="caption-2"><?php echo get_field('highlight_details1'); ?></p>
</div>
<div class="slide">
<img src="<?php echo get_field('product_img2'); ?>" />
<span class="caption-1"><?php echo get_field('key_highlight2'); ?></span>
<p class="caption-2"><?php echo get_field('highlight_details2'); ?></p>
</div>
<div class="slide">
<img src="<?php echo get_field('product_img3'); ?>" />
<span class="caption-1"><?php echo get_field('key_highlight3'); ?></span>
<p class="caption-2"><?php echo get_field('highlight_details3'); ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
<?php get_footer(); ?>

Resources