I'm fairly new to WordPress and using both the ACF plugin and the REST API for the first time. I've created a custom post type with custom fields, one of which is a file field. I have the REST API enabled for the post type and am able to retrieve data, but the file field only includes the file ID. Is there any way to get the file URL without having to make an additional call for each post of that type?
The return value for that custom field is currently set to file array, although I also tried file URL, but that doesn't appear to impact the REST API.
An example of the formatted JSON returned for a test post:
[
{
"id":282,
"date":"2022-08-10T16:52:58",
"date_gmt":"2022-08-10T16:52:58",
"guid":{
"rendered":"https:\/\/[domain]\/?post_type=resourcelibrary_file&p=282"
},
"modified":"2022-08-10T16:52:58",
"modified_gmt":"2022-08-10T16:52:58",
"slug":"auto-draft",
"status":"publish",
"type":"resourcelibrary_file",
"link":"https:\/\/[domain]\/resourcelibrary_file\/auto-draft\/",
"template":"",
"meta":[
],
"vl_bok_primary_cat":[
],
"vl_cat":[
],
"acf":{
"title":"PR Test",
"author":"Test Person",
"year":2022,
"keywords":"test keyword list",
"category":[
21
],
"bok_cats":[
22,
40
],
"file":283
},
"_links":{
"self":[
{
"href":"https:\/\/[domain]\/wp-json\/wp\/v2\/resource_library_files\/282"
}
],
"collection":[
{
"href":"https:\/\/[domain]\/wp-json\/wp\/v2\/resource_library_files"
}
],
"about":[
{
"href":"https:\/\/[domain]\/wp-json\/wp\/v2\/types\/resourcelibrary_file"
}
],
"acf:term":[
{
"embeddable":true,
"taxonomy":"vl_bok_primary_cat",
"href":"https:\/\/[domain]\/wp-json\/wp\/v2\/vl_bok_primary_cat\/40"
},
{
"embeddable":true,
"taxonomy":"vl_bok_primary_cat",
"href":"https:\/\/[domain]\/wp-json\/wp\/v2\/vl_bok_primary_cat\/22"
},
{
"embeddable":true,
"taxonomy":"vl_cat",
"href":"https:\/\/[domain]\/wp-json\/wp\/v2\/vl_cat\/21"
}
],
"wp:attachment":[
{
"href":"https:\/\/[domain]\/wp-json\/wp\/v2\/media?parent=282"
}
],
"wp:term":[
{
"taxonomy":"vl_bok_primary_cat",
"embeddable":true,
"href":"https:\/\/[domain]\/wp-json\/wp\/v2\/vl_bok_primary_cat?post=282"
},
{
"taxonomy":"vl_cat",
"embeddable":true,
"href":"https:\/\/[domain]\/wp-json\/wp\/v2\/vl_cat?post=282"
}
],
"curies":[
{
"name":"wp",
"href":"https:\/\/api.w.org\/{rel}",
"templated":true
}
]
}
}
]
Thank you!
I was able to find an answer in this post: https://support.advancedcustomfields.com/forums/topic/acf-rest-api-image-only-shows-attachment-id/
Adding ?acf_format=standard to the end of my request did the trick, and that added an additional array of info beyond the ID for each file that included the URL.
Related
I'm trying to build a custom set of column blocks using InnerBlocks and am having trouble passing attributes to block templates. To start, I scaffolded a new plugin using Create-Guten-Block. I then created two blocks, one to serve as a row container, and one for individual columns.
Here is a simplified version of how I'm creating the main container (with two columns hard-coded for testing):
registerBlockType( 'wabe/multi-column-block', {
title: __( 'Multi-Column' ),
icon: 'columns',
category: 'common',
keywords: [
__( 'columns' ),
__( 'grid' ),
],
attributes: {
layout: {
type: 'string',
},
},
edit: () => {
return (
<div>
{ /* inspector controls for choosing a layout will go here */ }
<InnerBlocks
template={ [
[ 'wabe/multi-column-column', { columnwidth: '6' }, [
[ 'core/paragraph', { content: 'Insert column content here.' } ],
],
],
[ 'wabe/multi-column-column', { columnwidth: '6' }, [
[ 'core/paragraph', { content: 'Insert column content here.' } ],
],
],
] }
/>
</div>
);
},
save: () => {
// This is a dynamic block
return (
<InnerBlocks.Content />
);
},
} );
... and how I'm creating the individual column block:
registerBlockType( 'wabe/multi-column-column', {
title: __( 'Multi-Column Column' ),
icon: 'columns',
category: 'common',
keywords: [
__( 'columns' ),
__( 'grid' ),
],
attributes: {
columnwidth: {
type: 'string',
default: '',
},
},
edit: ( props ) => {
return (
<div>
<p>Width: { props.attributes.columnwidth }</p>
<InnerBlocks />
</div>
);
},
save: () => {
return (
<InnerBlocks.Content />
);
},
} );
I'll have a custom select for users to choose a column layout, and using that, will determine how many columns to include, and pass the "columnwidth" attribute to each column block. This will tell each column what CSS class to use.
The problem is no matter what I try, that "columnwidth" attribute just will not be passed to the column block. In fact, I can't get it to pass anything, even "className".
I've looked at the code for core columns/column blocks, and can't see what I'm doing wrong. Everything has gone great up until this giant roadblock. Any tips are appreciated.
The block code example you have provided shows you are setting up the InnerBlocks fine. The issue may be a simple oversight that you have missed importing the required dependancy of <InnerBlocks>.
I was able to build your block code successfully once I added the required imports:
import { registerBlockType } from '#wordpress/blocks';
import { __ } from '#wordpress/i18n';
import { InnerBlocks} from '#wordpress/block-editor';
Here is the result:
The code editor shows that your attributes are being passed and being saved.
If you are still encountering an issue, double check that you are clearing your browser cache before retesting and also check the browser console to see if any errors are present.
As you mentioned you have already reviewed the Gutenberg code for Columns/Column, a tip would be to look at how they do variations for creating the options in your Inspector Control. Hope this gets you back on track with creating your block.
I have been trying to change the language from English to others,
$t('bascketball')
↑this works inside the template, however I am looking the way that I can change the language of elements inside of export Default.
If you know how to solve it, please advice me.
export default {
name: "Home",
components: {},
data() {
return {
Games: [
keyword: '',
games: [
{
heading: $t('Basketball'),
text:
"Hello Basketball players, want to know about team members. Click Below.",
img:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQt0Sh97iYcu0kTguhcsW_szWfzolqu1ynGeQ&usqp=CAU",
},
You can do it with one of these:
this.$t('Basketball')
this.$i18n.tc('Basketball')
But because you're calling the API, you cannot do it in data, you can rewrite it to a computed method, like that:
computed: {
games() {
return [
{
heading: this.$t('Basketball'),
text:
"Hello Basketball players, want to know about team members. Click Below.",
img:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQt0Sh97iYcu0kTguhcsW_szWfzolqu1ynGeQ&usqp=CAU",
}
]
}
}
My current .prettierc file is :
{
"proseWrap": "preserve",
"overrides" :
[
{
"files": "*.vue",
"options": {
"semi": true,
"printWidth": 200
}
}
]
}
The thing is I want 200 printWidth for html (<template>) and 80 printWidth for Js (<script>).
Is there a workaround ?
Unfortunately, this is not supported at the moment. #5378 is the issue tracking this feature.
I am trying to build an array of data returned from a third party API, and display it using the Highcharts map module.
I've done so with the charts module, using line and pie charts both with not much difficulty. Now that I've moved onto maps, I seem to be running into a bit of difficulty. It was quite clear from the examples provided how the data should be structured to be properly read by Highcharts.
When it comes to the maps module, the data structure is not clear at all. How would I structure my data to pass into my Highcharts map???
[ 'US' , 'United States' , 32 ] , [ 'CA' , 'Canada' , 100 ]
If I use the provided :
jQuery.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {
console.log(data);
// Initiate the chart
jQuery('#geo_map').highcharts('Map', {
title : {
text : 'Campaign Link Clicks Around The World'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
color: '#BADA55'
}
},
tooltip: {
valueSuffix: '/km²'
},
}],
credits: {
enabled: false
},
});
});
});
It works. But I can't seem to figure out how to pass in my data. I thought it was as simple as
[ 'Abbreviation' , 'Name' , Value ] , [ 'Abbreviation' , 'Name' , Value ]
but clearly not. The documentation isn't very clear on data structure.
Thanks.
If I were to change user/site dashboard preset(s), is it possible to effect the change(s) to already created users in alfresco?
See this Share webscript : /components/dashboard/customise-dashboard
I use this script a long time ago, so I don't remind very well the parameters needed... but there is a property in the object parameter you must avoid...
EDIT : execute script /components/dashboard/customise-dashboard with POST method
Here an example of the request body :
{
"dashboardPage": "site/site1/dashboard",
"templateId": "dashboard-2-columns-wide-right",
"dashlets": [
{
"url": "/components/dashlets/site-links",
"regionId": "component-1-1",
"originalRegionId": "component-1-1"
},
{
"url": "/components/dashlets/calendar",
"regionId": "component-1-2",
"originalRegionId": "component-1-2"
},
{
"url": "/components/dashlets/wiki",
"regionId": "component-1-3",
"originalRegionId": "component-2-3"
},
{
"url": "/components/dashlets/docsummary",
"regionId": "component-2-1",
"originalRegionId": "component-2-1"
},
{
"url": "/components/dashlets/activityfeed",
"regionId": "component-2-2",
"originalRegionId": "component-2-2"
}
]
}
This I have only tried out in 4.2.c.
I navigated to the surf-config/components directory in the explorer (Very well hidden so use the left explorer pane) and manually deleted the xml configs for users. (Or run a javascript script from javascript console which does the same thing), afterwards I used the surf console tool to refresh all components and it worked.