Modifying Post Template in Upfront Builder

I have read the tutorial 'Modifying Post Template' in the Upfront Builder documentation, but there is no description in HOW to do the modifications described.
I started from scratch with a new theme (Bergen Hjemmekennel). I used the Custom Content plugin to create a custom post type 'Vertsfamilie' - and now I am trying to create a post template for that type. I did the 'Select a New Layout to Create', and selected 'Single Vertsfamilie'. I added the global sections for header and footer, and now I am ready to add the 'Featured image'.
Using the toolbox I did find the elements for 'Date posted', 'Title' and 'Content' - but no 'Featured image'..
I did find the 'Featured Image' in the 'Data' section of the 'Draggable Elements' but there was no way to drag this into the post section - only to a separate section..

So now I need a more detailed 'howto' for bringing this further..

Yf
Espen Sjursæter

  • Adam Czajczyk

    Hello Espen,

    I hope you're well today and thank you for your question!

    From what you wrote I understand that you are creating a post template for a "single post view" of your custom post. The "Featured Image" element from "Draggable Elements" is a way to add the featured image to such a template. It doesn't come into the "Post data" area but you can resize/move both "Post data" and "Featured Image".

    I suppose though that you are trying to achieve some specific result so could you please describe it for me? I would then be able to give you a more accurate advice.

    Best regards,
    Adam

  • espsjurs

    Hi Adam,

    What I try to do is the exact thing described in the documentation; add the featured image after the title, before the text.. like this: https://premium.wpmudev.org/wp-content/uploads/2016/06/panino-single-post.jpg.

    And as you say, this is not possible thus the documentation state so..(https://premium.wpmudev.org/manuals/posts-and-pages/ section for 'Altering the Look of the Post Template'.

    I know this can be done with an single post, but the doc says template...

    Espen

  • Dimitris

    Hey there espsjurs,

    hope you're doing good and don't mind chiming in! :slight_smile:

    I did find the 'Featured Image' in the 'Data' section of the 'Draggable Elements' but there was no way to drag this into the post section - only to a separate section..

    I must say that I'm slightly confused here... these should be separate sections (elements), they are meant to be this way. The manual post you shared is using these elements this way, so after deleting the old featured image, it adds title, image, date and author elements on top of the post content. I hope that clarifies things better, please do correct me if it doesn't! :slight_smile:

    Another point that I'd like to make is the difference between UF Builder (the plugin which you choose as related plugin in this thread) and the built-in UF Editor (all current manual pages are based on it).
    The main difference here is that Builder saves all of its data into files, so that you can build themes that can be installed in different installations, while Editor is storing everything in database making site-related changes.

    If this keeps you struggling feel free to grant us with support access in order to try to make work this for you. Detailed information on how to do so (if you don't know already) can be found here https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Warm regards,
    Dimitris

  • espsjurs

    Hi again,

    The thing I was trying to do was to build a new theme with a page template where the featured image (or a gallery or slider) within the page below the title.

    As I now understand, there is no way to do that in the builder.. so why do I need it?? What I really need is a list of what kind of changes can be done within the builder, and what have to be done in code editor after exporting?

    The themes in your Theme gallery should be made of examples of what actually can be done with the builder..

    If I am wrong, and this actually is possible to do within the builder - then I guess this is a secret you guys are not ready to share..

  • espsjurs

    Hi again,

    Still a bit in the dark, but I checked out the Gillie theme in the builder, looking at the layout for single-post. This makes things a bit more understanding.

    In the single-post there is multiple sections for the post header, where the right one has a background with the featured image - and the left has a small block where two element for author and title is grouped. I can see how the setup is for the elements (author and postdata:title), and I can 'edit elements' or 'ungroup' and remove elements, but there is now way I can figure out how to add an element to the same group..

    Anyone??

  • Adam Czajczyk

    Hello espsjurs!

    That's not a secret and you are not wrong. I apologize for not being clear enough from the beginning. The Upfront Builder is still "young" and we are constantly developing it by adding new features. Some parts of it that may currently be relatively "simple" (for example not giving you all the possibilities that you would wan't to use) are still - and will be - extended in future.

    I believe that may be one of them though I'm not able to give you any "roadmap" or "ETA". I will however 1) move that to our "Features and Feedback" forum so it would be marked as feature suggestion and 2) raise that with Upfront developers so they checked that and consider implementing proper functions.

    Best regards,
    Adam

  • Adam Czajczyk

    Hello espsjurs!

    I'd like to follow-up on your question and my last post. I consulted that with Upfront developer and there is a simple way to achieve what you wish. It may not be quite intuitive (so I'm keeping your question marked as a "Feature Request") but it works and is actually fairly easy. Let me then explain :slight_smile:

    The part that includes title and post content where you would like to put the Featured Image into is the "Post Data" module (from "Draggable Elements -> Data" tab"). You can place as many of these modules on the same page as you wish. On the "single post" layout they'll all work the same way - fetching the current post data. Therefore the solution is to:

    1. Edit an existing "Post data" element on the page and remove anything except the Post Title from it.
    2. Put the "Featured" module right below that "Post data" module
    3. Put another "Post data" module below the "Featured" module and remove the 'Post Title" from it.

    For the steps 1 and 3 you will want to make sure that you created a "preset" for the module to be able to edit it.

    I created a little video for you to show you the entire process. Take a look here please:

    http://screencast.com/t/dJqnokj65u

    Best regards,
    Adam

  • Milan

    Hello Espen,

    Hope you are well today and won't mind me chiming here. :slight_smile:

    I can see your issue in action and to assist you better on it, I'll need staff access to your site. You can grant me staff access to your site via WPMU DEV > Support > Support Access > Grant Access. To know more about it, please see this article,
    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Look forward to hearing back. :slight_smile:
    Best Regards,
    Milan

  • Dimitris

    Hey there espsjurs,

    thank you for providing us with support access.
    I just went ahead and managed to replicate this issue, gettings couple of warnings and errors in dev tools.

    About the first warnings, please create and insert a Google Map API key under Upfront -> General -> API keys

    About the errors (red ones in first screenshot).
    The first one is pretty generic
    jquery.js?ver=1.12.4:4 POST http://xxxxx.yyyyyy.zz/wp-admin/admin-ajax.php 500 (Internal Server Error)
    while the second one triggers whenever the "Featured Image" element is dragged & dropped in editor
    VM1587:110 Uncaught TypeError: Upfront.Views.PostDataEditor.post.meta.getValue is not a function

    Could you please try to deactivate all other plugins, clear all caches and try this one more time?

    If this continues, we should use some debug information. Could you please access your server through FTP, edit the wp-config.php file, find a line like
    define('WP_DEBUG', false);
    and replace it with the following (if the above line doesn’t exist, simply insert next snippet just above the /*That’s it! Stop editing… *? comment)

    // Enable WP_DEBUG mode
    define('WP_DEBUG', true);
    // Enable Debug logging to the /wp-content/debug.log file
    define('WP_DEBUG_LOG', true);
    // Disable display of errors and warnings
    define('WP_DEBUG_DISPLAY', false);
    @ini_set('display_errors', 0);

    Then go ahead and try to replicate the error (open up the UF editor and try to insert a "featured image" element). By doing so, a /wp-content/debug.log file should be created. Simply download it, rename it to debug.txt and attach it here in your next reply.

    Warm regards,
    Dimitris

  • Adam Czajczyk

    Hello espsjurs!

    Thank you for sharing debug.log with us.

    I checked it and I also accessed your site and reviewed it once again and I noticed another error that's often caused by insufficient memory amount assigned to WordPress.

    After checking that I found out that even though PHP is allowed to use up to 512M of memory on your server, your WordPress install is granted only 40M which is actually quite a low value.

    That being said, please add following line to the "wp-config.php" file of your site:

    define('WP_MEMORY_LIMIT','512M');

    Make sure that this line is placed above the "/* That's all, stop editing! */ line.

    Once this is done, clear your browser's cache and give Builder another try. Let me know please how it went. It would be also great if you could keep support access active (it's time valid) until we get it fixed.

    Best regards,
    Adam

  • Adam Czajczyk

    Hello espsjurs!

    Thank you for getting back to me.

    I checked the site again and I can see that it didn't improve anything. I must admit that's a bit strange issue as the amount of memory is more than enough now, plugin conflict test didn't reveal anything and that's rather not a "mod_security" issue as you are actually able to use Builder and Upfront itself (after all, you created quite a part of the theme already).

    I'm slightly confused with this. Have you by any chance made any - even the "tiniest" - changes to Upfront files directly? If so, can you tell me what they were?

    Also, when you tried to add the "Featured" module previously (before getting to that "split post-data" stage) did it work for you or did it also "dissappear"? Were there any changes made to the site since then?

    Please advise!

    Best regards,
    Adam

  • espsjurs

    Hi Adam,

    I have not made any changes directly to any of the files. First time I added featured image I did it in a seperate region, but as background image - the same way I now have done this in this theme. So I do not know if this ever worked in my setup..
    Just for the fun I tried to do the same in the UF Piano theme, with the same result..

    I guess I have to figure out how to do this directly in the template file, and wait for a more robust Builder :slight_smile:

    Espen

  • Dimitris

    Hey there espsjurs,

    I trust you're well today and don't mind me jumping in here! :slight_smile:

    I just went ahead and tried to replicate this issue on my test machine. I exported your CustomPress CPT, imported it and created a dummy post. I then downloaded your theme, activated and used the UF Builder to insert the featured image. Everything seem to work as should be in my end without having any special settings in it (just a simple VVV install).

    Having said that, this issue seems to be related to your specific installation.
    Have you tried to erase this CPT (Custom Post Type) layout file and try to recreate it again?
    This should be /wp-content/themes/bergen-hjemmekennel-/layouts/single-vertsfamilier.php

    As the debug log just contain some notices (that don't interrupt any scripts) considering the "comments" elements, give this new try a go without any short of comments section, just to test if this 500 error can be suppressed. :wink:

    Kind regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.