I am trying to create a custom post for listing a school. I know how to create custom fields. I would like to enter the custom field for uploading an image. I want this image to be the header image for that post. For example, when the school image is loaded in the custom field, I want the content template to take the image and display this image as header.
Check this listing below
hidden link
When each listing is clicked, the image in the listing converts as header for that post. Is this possible using types, without php coding?
Thank You in Advance.
Dear indianplayschools,
I tried below steps, please correct me if there is anythin missuing:
1) open URL:
hidden link
2) Click the link "Hotel Nakshatra Inn", it redirect me to:
hidden link
Here I can see a header image, which is background of the post title "Hotel Nakshatra Inn"
If it is, I think it is possible within Types plugin, I suggest you setup a HTML div tag with image background, for example:
<div style="background-image:url('[types field="image-background" output="raw"][/types]')">
...
</div>
I will try this and get back to you. Thank you
OK, please update this thread if you need more assistance.
Sorry, I am not able to implement this.
I have done the following.
Created Custom Post type, created custom fields including image custom field, created a layout. The result is shown here
hidden link
I have created a row nd added visual editor for craeting header. But I am unable to call the custom field image. Please help.
you can put the HTML codes into the content of visual editor:
<div style="background-image:url('[types field="image-background" output="raw"][/types]')">
...
</div>
Please replace the "image-background" with your custom image field slug.
Sorry. I did the same. But, I am not able to achieve the result.
Could you provide a test site with same problem, I can setup a demo for you
Sorry the username is indianplayschools. Thank you for the prompt response
Thanks for the details, checking in your website, will feedback if there is anything found
I did below modifications in your website:
1) Edit the layout "Template for Play Schools", replace the visual editor cell with a content template cell "Content Template for Template for Play Schools Layout"
hidden link
2) Edit above content template, add below codes:
hidden link
<div style="background-image:url('[types field="image" output="raw"][/types]'); height: 200px;">
</div>
3) Create a post and test
hidden link
See the result:
hidden link
Thank You. I have seen that this worked.
I am unable to understand why the same code doesn't work when the code is called without using content template for the post and directly pasted into visual editor. Please make me understand. My issue is resolved. But, just need to understand.
It is very strange in your website, the codes in visual editor cell will be changed to something else after save it, so I have to use content template to replace the visual editor cell.
Is that so? Anyway thank you for resolving out a way to get the required output. Thank you for the support.
