I would like to be able to remove (,) every time a newline occurs in the labels field.
Can you help me, please?
Thank you
<h6 class="audio-tags">
<?php
$tags = get_field("etiquetas");
$tagArray = explode(",", $tags);
foreach($tagArray as $tag){
echo("<div class='tag-wrap'>".$tag."</div>");
}
?>
</h6>
I’d say, in each iteration of the foreach loop, do a str_replace where you replace the comma with an empty string before you echo it:
$tag = str_replace(',','',$tag);
And as a side note: even though I don’t know the rest of your HTML, I doubt that h6 is the semantically correct element to use. It would probably be better to use a div instead; to make it look as you like you should style it with CSS.
I think I did not explain it well!
I am introducing labels through an ACF field, these labels are separated with a midpoint, (·) I think it’s called MIDDLE DOT. The problem is that every time a new line occurs, the point is no longer necessary to separate the beginning of the word.
I think that as long as MIDDLE DOT (·) is accompanied by a space and a letter to its left and right, it should not appear.
But I don’t know how to execute this conditional!
Oh, I see. Well, technically it’s not possible to determine when a line break occurs because that depends on the viewport width, and that’s variable, depending on the user’s preference or the display size. But you can work around this with some CSS trickery:
Assuming the tags are output as list like this:
<ul>
<li>Upbeats</li>
<li>Keyboards</li>
<li>Positive</li>
<li>Useful</li>
</ul>
You can use this CSS to make it look as you want:
ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
li {
position: relative;
display: inline-block;
margin-right: .5em;
}
li:before {
content: '';
width: .25em;
height: .25em;
position: absolute;
background-color: blue;
border-radius: 100%;
left: -.5em;
top: 50%;
transform: translateY(-50%);
}
Basically what this does is add the bullet points to the list items as generated content (:before pseudo-element). By positioning them absolutely, they are taken out of the natural flow of content, so they are out of the boundaries of the list container at the start of each line. And the overflow: hidden on the list container makes them disappear, for that matter.
Thank you very much for your help. But I don’t have the tags that way. <li> </li> And thanks to you I realized that my field was not correct.
But, I changed the code in my functions.php file. It was wrong.
I changed the text field, for a taxonomies field.
I have used the example code, (Show multiple values
) but I get links instead of labels:
View all ” posts
View all ” posts
View all ” posts
Do you know what I can be doing wrong?
You have to show us your changed code if you want help, we aren’t psychic. But anyway, here is the modified code from your first example, assuming your field is now a taxonomy field with return value “Term Object”:
<div class="audio-tags">
<?php
$tags = get_field("etiquetas");
foreach($tags as $tag){
?>
<a href="<?php echo(esc_url(get_term_link($tag))); ?>"><?php echo($tag->name); ?></a>
<?php
}
?>
</div>
And the adjusted CSS for this would be:
.audio-tags {overflow: hidden;}
.audio-tags a {
position: relative;
display: inline-block;
margin-right: .5em;
}
.audio-tags a:before {
content: '';
width: .25em;
height: .25em;
position: absolute;
background-color: blue;
border-radius: 100%;
left: -.5em;
top: 50%;
transform: translateY(-50%);
}
Thank you very much. I wrote to you grateful for your work days ago. But I have problems with this form and when I try to attach data it gets stuck. Well, the important thing is that everything worked very well. Thank you.
I was very happy to see that everything worked.
Captura-de-p....png
Captura-de-p....png