-
Posts
-
Hi there,
I am currently playing around with portfolio items – combined with the content element “portfolio grid”. This item does allow to filter in the frontend by portfolio category. But the filter does show just the “name” of the portfolio category. Is there a possibility to show also the “description” of the chosen portfolio? E.g. below the filter with the portfolio names?
Thank you!
Hi mai,
Unfortunately, there’s no option to show the Portfolio Category Description only the Portfolio names.
You would need to tweak the Portfolio Grid’s code in order to add this, unfortunately, tweaking it is outside the scope of our support.
If you are interested with tweaking it, please read our documentation: https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-albBest regards,
NikkoHi Nikko,
Thanks for the documentation. But I am not a programmer. Can you offer pricing if you do this for me?
Thanks!Hi mai,
Can you give us FTP access? just post the credentials in private content.
Best regards,
NikkoHi Nikko,
Sorry, but I am not allowed to provide login data. But I can provide any screenshot of settings you need so see.
Thanks for your understanding!Hi mai,
I understand, please make sure you have added the code instructed in https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb in your child theme’s functions.php.
Then in the shortcodes folder of your child theme, add another folder and name it portfolio then inside it add a new file and call it portfolio.php inside it paste this code: https://pastebin.com/QBaiqcYM
Then at the bottom of the child theme’s functions.php file, add this code:
function category_description_toggle(){ ?> <script> (function () { jQuery(document).ready(function ($) { let desc = $('#portfolio-category-description'); $('#js_sort_items a').on('click', function() { let filter = $(this).data("filter"); desc.find('div').hide(); desc.find(.${filter}).show(); }); }); })(); </script> <?php } add_action('wp_footer', 'category_description_toggle');And finally in the WordPress Dashboard, go to Enfold > General Styling > Quick CSS, then add this CSS Code:
#portfolio-category-description > div { display: none; }Best regards,
NikkoHi Nikko,
Thanks for your detailed description which I followed step by step. But anyhow it does not work (and both files give a syntax error).
In the private content please find both files which are included on my page here:
wp-content/themes/enfold-child/shortcodes/portfolio/portfolio.php
wp-content/themes/enfold-child/functions.php
Plus the code in Quick CSS on the dashboard.
Any idea which I might have done wrong?
I am really willing to pay for this. Just need your price…
Thank you!!!Hi mai,
Can you tell us what’s the error and which line it points to?
I have actually tested this on my end and didn’t have any issues.
I checked the link you gave however I can only see something like functions.php in a black bar on top and then just white space below, if it’s the content of those files, try to upload it here: https://pastebin.com/
Also tell us the PHP version of your site.Best regards,
NikkoHi Nikko,
If you click on “Alle Dateien herunterladen” in the top right corner you can download both files.
In functions.php it says “There is a syntax error on line 26. Code hinting may not work until you fix this error”. In my file this is this line: “let desc = $(‘#portfolio-category-description’);”
In portfolio.php it says “There is a syntax error on line 1103. Code hinting may not work until you fix this error”. In my file this is this line: “$post_type_paginate = array_map( function( $value ) { return ‘pagination-‘ . $value; }, $post_type_paginate );”
This error is given in Dreamweaver when opening these files.
My page runs on PHP 7.4.14Thanks!
Hi mai,
The single quotes seem to be a bit different.
Can you try to manually change the single quotes? just erase it then type manually.Best regards,
NikkoHi Nikko,
I have added them here just to show where the syntax begins. In the files they do look like this as you can see when donloading the files I provided…
let desc = $(‘#portfolio-category-description’);
resp.
$post_type_paginate = array_map( function( $value ) { return ‘pagination-‘ . $value; }, $post_type_paginate );
Hi mai,
Thanks, I could see them properly now, I just noticed the difference in single quotes for example you posted this:
let desc = $(‘#portfolio-category-description’);which cause issues, it should be replaced with this (noticed everything is almost similar except for the single quotes):
let desc = $('#portfolio-category-description');Also in line 19 of functions.php you have this (backticks are removed):
desc.find(.${filter}).show();it should be:
desc.find(.${filter}).show();Best regards,
NikkoHave you checked the files I provided or just the text I posted above? As far as I can see the files are correct??? I do not see any discrapancy in the files??? And especially your second example – what is the difference of the both by you posted texts?
Thank you!Hi mai,
I apologize this is the code for category_description_toggle: https://pastebin.com/zFsQgcxr
The backticks are removed when posted here.Best regards,
NikkoHi Nikko,
I still can neither see where the text posted by you here and published at pastebin differs (what are backticks??? – sorry – I am not a native, du not know this term and my translation program says someting about “links” – but in a code???).
Anyhow I have copied the new version and replaced it in my functions.php. But still the same: No description text appears in the frontent.
Any other ideas?
THank you!Hi mai,
The backtick is this key: https://i.stack.imgur.com/ETTnT.jpg (the one in the bottom, the one on top is called tilde).
I have already tested the solution I gave to you so I’m not really sure what went wrong except for the things I pointed out, I know you have already mentioned that you’re not allowed to give us access, however, we really needed to have access in order to troubleshoot the issue.Best regards,
NikkoHi Nikko,
Thanks for the explanation. And if this is a “backtick” – what is a “single quote”?
There is not one “backtick” in neither of these files included. I have reread the whole thread. But no other instructions on how to solve this. Are you sure that the code in my files is correct?
How about the code for quick CSS:#portfolio-category-description > div { display: none; }Is “display none” really correct? I am not a programmer and I have absolutely no clue about coding. But from the translation shouldn’t this be something like “true” or “all” instead of “none”?
Thanks!Hi mai,
This one is the single quote: https://forums.macrumors.com/proxy.php?image=http%3A%2F%2Fi.imgur.com%2FZ06YS1D.jpg&hash=1afbf31cdff26025d7b6230d3194d3cc
As for the CSS code, it basically is the initial state of the description, when you first load it, it is using All the category therefore all descriptions should be hidden, this will be shown when you click on a filter/category, the javascript code is triggered when clicking it and displays the correct description.
And yes, I’m sure that it’s correct since I have applied it on my local server that’s why I think there might be some conflict that’s causing the code not to work properly but I’m unable to reproduce this on my end.Best regards,
NikkoHi Nikko,
Thanks for your explanations!
I might have found what went wrong: The description does show up, but only on the category page. But my intention had been to show the category descriptions on the landing page. Between the grid and the filter. And just the description for the currently chosen category should show up. In case “all” is selected no description should show up.
Sorry for this misunderstanding. But can you help me on this one more time?
Thank you for your patience!!!!
Hi mai,
Sure, I have inspected the links and the only thing missing is this code: https://pastebin.com/zFsQgcxr
I used chrome’s web inspector to search for it but I could not find it on your site.Best regards,
NikkoHi mai,
Thanks, I checked the code and it’s missing the backticks (see screenshot in private content).
You can compare it in line 10 of https://pastebin.com/zFsQgcxrBest regards,
NikkoHi mai,
Thanks, I could see the code now however it does not execute because of this error in the web console:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-zWGZVAE8J0Y9v9mF2p14YLhzpEs9CiudCGA5k82OQlg='), or a nonce ('nonce-...') is required to enable inline execution.You can see this by right-clicking any part of your site > Inspect > Console.
Best regards,
NikkoHi Nikko,
Thank you so much – you are my hero! It does work now…
Nevertheless I unfortunately still have a problem: The design: The category description does not accept HTML code. ANd on the other hand in the frontend font/textsize differ from the rest of my page. Can I influence this somehow? E.g. Use the same format as for any other body text. Centered instead of left-justified…
Thank you!!!!!Hi mai,
We’re happy to hear that :)
Yes, that’s actually the limitation of using the category description, unless you’ll use some plugins like Advanced Custom Fields which will allow you to create an additional field which you can work on.
As for styling, try adding this CSS code in Enfold > General Styling > Quick CSS:#portfolio-category-description > div { text-align: center; padding: 0 20px 20px; color: #999; }Hope this helps :)
Best regards,
NikkoHi mai,
I could not see the code being fetched.
Most likely due to cache, please flush out the cache.Best regards,
Nikko
- You must be logged in to reply to this topic.