Portfolio – Various Bugs/Issues

Homepage Forums Pro Support Forum Blackoot Pro Blackoot Pro Support Portfolio – Various Bugs/Issues

Note about WordPress 5.0:
Our themes are compatible with WordPress 5.0. However not all functionality are guaranteed to work as expected with the new editor (Gutenberg) that comes with 5.0.

We highly recommend installing the Classic Editor plugin, which will bring back the usual editor if you run into any issue or just do not like the new editor.

An update to bring full compatibility with Gutenberg is being worked on, but has been postponed because of the recent fast-paced evolution of the Gutenberg project until WP 5.0 release. More info about the release of WordPress 5.0 announced on a short 2-days notice can be found here: New 5.0 Target Date.

Portfolio – Various Bugs/Issues

This topic contains 4 replies, has 2 voices, and was last updated by  Cheyenne 2 weeks, 2 days ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #23888
    Portfolio – Various Bugs/Issues

    Cheyenne
    Participant

    Hi Iceable,

    Hope all is well. Today I started using the portfolio feature but unfortunately have run into a couple of bugs/problems.

    1. Please visit https://incyanity.net/ I’m using a static welcome page (the slug is ‘welcome’) with a full-width portfolio embedded in it under the “Incyanity Yarn Bases” header. When the portfolio is set to ‘carousel’, the overlay for the #2 thumbnail is not wide enough by 1 pixel in Firefox (68.0.1). This happens to be pretty noticeable in my case because the underlying image is bright orange. The other three thumbnails appear to be okay. This bug occurs on the live demo of this theme on the #2 thumbnail too. If I change to the ‘grid’ layout, the issue goes away. (I would leave the embed set to ‘grid’ except that the thumbnail spacing for the ‘carousel’ setting is more aesthetically pleasing.)

    This pixel issue also occurs on my site and your live demo in Firefox on the #2 “Related projects” thumbnail when the “Related projects” section mode under Theme Options is set to ‘carousel’.

    2. If I change the “Related projects” section mode under Theme Options to ‘grid’, the hover overlay for the related projects thumbnails no longer works properly in Firefox. There’s no darkened layer and the entry title text ends up crammed into the lower left corner with all the letters stacked on top of one another.

    I’ve put screenshots of issues 1 and 2 on the attached thumbnails.jpg.

    3. Please click on the #2 thumbnail (Fearless) in my portfolio. This takes you to https://incyanity.net/portfolio/fearless/ Toward the bottom of the page—yikes! For some reason, Jetpack’s “Related Posts” feature is showing here above the entry’s “Related Projects” area. This is only happening on this entry—the other three display correctly. I can see this in Firefox and Edge.

    To troubleshoot this, I have tried:

    • Deleting the Fearless entry in its entirety, then creating it again from scratch.
    • Changing the slug to something else (like ‘fear’).
    • Replacing the Fearless content with the content from one of the other portfolio entries.
    • Saving the Fearless entry with no content in the body.
    • Reordering the portfolio entries so that ‘Fearless’ was not the #2 thumbnail, to see if the issue would move to whichever entry ended up in the #2 spot.

    Fearless is assigned to the same category as the other three entries. All four entries do not have the “Portfolio Item Information” fields filled out. As far as I can tell, all four are set up identically in every way. There are no other posts or pages on my website that use the slug ‘fearless’ or ‘fear’. The ‘portfolio’ slug doesn’t appear anywhere on my website except under Theme Options for the portfolio settings.

    I’m baffled why this one entry is doing this but the other three aren’t. Do you have any ideas what the problem is?

    Thanks!

    Attachments:
    You must be logged in to view attached files.
    #23892
    Reply to: Portfolio – Various Bugs/Issues

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Hi Cheyenne,

    #1 seems to be a “simple” sub-pixel rounding issue. The thumbnail is automatically sized to 255.25px width; and the overlay’s width is rounded to 255px.
    This should be easily sorted by adding the following to Custom CSS:

    .portfolio-desc { width: 100% !important; }

    By the way, while tweaking the overlay, you might also want to round the edges so it aligns even better with your thumbnails:

    .portfolio-desc {
        width: 100% !important;
        border-radius: 8px;
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
    }

    #2 was already observed in some cases that was hard to reproduce, but seemed to go away after making sure to clear the cache. Can you please give this a try?

    #3 looks like this is controlled Jetpack – not the theme’s or entries’ settings. By the way on my end it seems to appears on both “journey” and “dream”.
    Jetpacks settings seems to be limited so I’m not sure one can turn it off for portfolio entries without turning it off entirely.
    Instead of going too far in custom coding, an (imperfect but) easy way would be to simply hide it with Custom CSS. It will still technically be there, but won’t be visible:

    .single-portfolio .jp-relatedposts {
        display: none !important;
    }

    (As to why it shows on some but not all entries, my guess would be that not all entries are synced yet. Jetpack’s “related posts” are processed from jetpack’s servers and only show when processed and synced. They just don’t show up for entries that are not processed yet on their end, which might explain why they don’t always appear right away on all new entries)

    #23893
    Reply to: Portfolio – Various Bugs/Issues

    Cheyenne
    Participant

    Ugh! Jetpack’s settings for the related posts feature says “Show related content after posts” which I took literally to mean it would only ever apply to post types since it doesn’t show up on the other non-post type pages I have. Since the portfolio stuff isn’t a “post”, I had no expectations it would show there either… This morning when I checked, it was now showing up on all the portfolio entries which is super annoying. I’ve used the CSS to hide it. Thanks!

    Regarding #2, the cache had been forcibly cleared several times during troubleshooting with no effect on anything. After adding your suggested portfolio-desc CSS (the second version) and then changing to ‘grid’, the issue changes so that the link highlight bar appears across the bottom as expected, but the darkened overlay still doesn’t appear, and while the text for the page title is no longer stacked up in the lower left corner, it’s only half-visible because it’s still aligned to the bottom and hanging off the bottom edge by about 50%. I’ve attached a cap. If I take your suggested CSS out, the problem goes back to the way I reported it originally. Pretty strange. 🙂

    Thanks for your quick reply! Greatly appreciated.

    Attachments:
    You must be logged in to view attached files.
    #23895
    Reply to: Portfolio – Various Bugs/Issues

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Hi, sorry for the delayed response as I was determined to find a way to reproduce this issue in order to troubleshoot it… But so far this was in vain.

    I believe Jetpack means “posts” in the sense of “not pages”, as opposed to “regular posts”. In this sense, every entry in custom post types (like portfolio entries) is technically a post. Too bad there is no option to selectively enable it for each post type.

    As for the odd display issue ; this is a tough one as I cannot get to reproduce it on my end (tried with several computers with all browsers and it just works fine).
    My suggested solution below is really a shot in the dark as I could not test it:

    .portfolio-item:hover .portfolio-desc {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
    }

    From your screenshot and the similar issue I saw a few months ago, there seems to be an odd glitch that makes the overlay 0px in height. This should force it to be the correct height and center the text in the middle.

    Please let me know if it helps!

    #23898
    Reply to: Portfolio – Various Bugs/Issues

    Cheyenne
    Participant

    That CSS seems to have fixed the issue I was seeing. 🙂 I won’t be using the grid layout myself but hopefully this will help somebody else in the future!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.


PayPal Verified
Secured by PayPal
Secure Credit Card payments powered by Stripe