Directory: Featured Image Button & Indicating "Required"

Hello!

The screen shot at the bottom illustrates these questions.

1. On the Directory "Add Listing" page for a user, the "Set Featured Image" seems odd that it is not a button. Can this be made into a button? If not, I'd recommend a button for a future version.

2. While it's possible to setup Directory Listings so that a user *must* include a featured image, they are not alerted to this until *after* they have already attempted to submit the form without a featured image. This is potentially confusing because the user clicks "Save" and the alert for the missing image is subtle and well above the portion of the screen that is visible when the user clicks "Save." Can we somehow make it apparent that the Featured Image is required *before* the user clicks "Save?" I experimented with the Find and Replace plugin to change the wording for "Set Featured Image," but it was a clumsy solution.

Thanks for any help or insight!

James

  • Tyler Postle

    Hey again James!

    We meet again :slight_smile:

    1. On the Directory "Add Listing" page for a user, the "Set Featured Image" seems odd that it is not a button. Can this be made into a button? If not, I'd recommend a button for a future version.

    This will likely be due to your theme. For me, using the default 2014 theme it is showing as a button. There will be a "button" class on it and depending on your theme it may or may not have styles for it.

    You can add a background like this:

    .upload-button .button {
    background-color: #333;
    padding: 5px;
    }

    May need to adjust it a bit more :slight_smile:

    As for making it look more required, your idea wasn't a bad one at all! You could use our Ultimate Branding plugin and the network wide text change. To add in (required) or something like that.

    Alternatively, you could add a background-image that adds an asterisk or something like that. You can do that via CSS:

    .upload-button {
    background-image: url("http://imageurl");
    }

    Make it transparent except for the asterisk :slight_smile:

    Hope this helps! Let me know if you have an further questions on this.

    Cheers,
    Tyler

  • James Wolfensberger

    Hi Tyler -

    Your ideas are perfect, but I haven't gotten them to work yet.

    I disabled all plugins (except Directory) and switched to the Twenty Fourteen theme, but I still didn't have a button (image attached).

    In my normal theme (BuddyBoss Child Theme) I tried the following code and it did not make an impact:

    .upload-button .button {
    	background-color: #333 !important;
    	padding: 5px !important;
    }

    Ideas for more troubleshooting? Thanks so much for your help.

    James

  • Michelle Shull

    Thanks for allowing access, James, but it looks like I missed my window.

    We've been seeing a lot of new members with lots of questions, we just brought on a whole team of newbies to help us keep up with demand.

    You should see a bit faster response, you're at the top of our backfeed now.

    As to doing changes - no worries if we overlap! I won't change anything, I'll give you the code to add, I'll do all my tweaking with dev tools.

    Thanks, James!

  • James Wolfensberger

    Hi Michelle - I should have told you (sorry!) that we were migrating from a shared host to a dedicated server, so we had to suspend all mods for 24 hours. Everything is cool now and I have support access open on quiltersbug.com. I'm not sure at all how the WPMUDev backdoor system works, so if you get any kind of weird access issue, you might have to flush dns or browser cache. quiltersbug.com is now at 192.249.121.246

    Thank you! Lookin' forward to that awesome button you're gonna make :slight_smile:

    James

  • Michelle Shull

    Okidokie! Here it is:

    #set-post-thumbnail {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(77, 87, 1);
    padding: 7px 14px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    -webkit-box-shadow: rgb(0, 0, 0) 0px 1px 0px;
    box-shadow: rgb(0, 0, 0) 0px 1px 0px;
    text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
    color: white;
    font-size: 13px;
    font-family: Helvetica, Arial, sans-serif;
    text-decoration: none;
    vertical-align: middle;
    background: -webkit-linear-gradient(top, rgb(121, 140, 0), rgb(169, 191, 0));
    }
    
    #set-post-thumbnail:hover {
       border-top-color: #eeff70;
       background: #eeff70;
       color: #000000;
       }
    
    #set-post-thumbnail:active {
       border-top-color: #798c00;
       background: #798c00;
       }

    And a screenshot of what it should look like. : )

    Take care, James!

  • James Wolfensberger

    Hi @Michelle Shull -

    I'm not sure what I'm goofing up here. The CSS you gave me works great for the Upload Featured Image button. I trimmed it down a bit to reduce some of the effects to match the site with our "flat" button look, and here is my final code:

    #set-post-thumbnail {
    	padding: 7px 14px;
    	border-top-left-radius: 3px;
    	border-top-right-radius: 3px;
    	border-bottom-right-radius: 3px;
    	border-bottom-left-radius: 3px;
    	color: white;
    	font-size: 13px;
    	text-decoration: none;
    	vertical-align: middle;
    	background: #7a8c00;
    }
    
    #set-post-thumbnail:hover {
    	border-top-color: #697801;
      background: #697801;
      color: #FFFFFF;
    }
    
    #set-post-thumbnail:active {
    	border-top-color: #798c00;
      background: #7a8c00;
    }

    Everything looks great on the page until a featured image is added, and then something gets weird. I'll show you with a screen grab attached.

    Any ideas? Thanks for any help :slight_smile:

    James

  • James Wolfensberger

    Hi Michelle, I don't see a change with the margin setting, and the button is still blank - no text on the button. Tried the !important parameter. My code:

    #set-post-thumbnail {
      margin-top: 15px !important;
    	padding: 7px 14px;
    	border-top-left-radius: 3px;
    	border-top-right-radius: 3px;
    	border-bottom-right-radius: 3px;
    	border-bottom-left-radius: 3px;
    	color: white;
    	font-size: 13px;
    	text-decoration: none;
    	vertical-align: middle;
    	background: #7a8c00;
    }
    
    #set-post-thumbnail:hover {
    	border-top-color: #697801;
            background: #697801;
            color: #FFFFFF;
    }
    
    #set-post-thumbnail:active {
    	border-top-color: #798c00;
            background: #7a8c00;
    }

    Sorry to be a pain :slight_frown:

    James

  • Michelle Shull

    Okay!

    I can get the button pushed down by adding padding to the image itself, but I think the reason the text is disappearing is b/c the text that used to be there would also disappear once the image is uploaded.

    Try this for the image:

    img.attachment-post-thumbnail {
    padding-bottom: 30px;
    }

    I'm going to ask my colleagues about a way to either drop some conditional (as in: when there's a featured image) text on that button, or a way to hide the button itself when the featured image is in place.

    Thanks, James!

  • Michelle Shull

    Okay! I think I've got it.

    We're going to need one more plugin: https://wordpress.org/plugins/custom-javascript-editor/

    And we're going to put this in that plugin, like you'd do for CSS in a CSS plugin.

    jQuery(function($){
     $('.attachment-post-thumbnail').length() > 0 &&   $('.attachment-post-thumbnail').attr('src') != null){
     $('#set-post-thumbnail').hide();
    }
    }

    We can thank our brilliant newbie @Sumit Kumar for this. : )

    Take care, James!

  • James Wolfensberger

    Hi again!

    The plugin issued some errors. The first couple were for spaces, and I easily cleared those up. But I don't know how to address the rest of them, and it looks like the plugin might have stopped analyzing the script after 40%.

    line 2 character 2
    Missing 'use strict' statement.
     $('.attachment-post-thumbnail').length() > 0 &&   $('.attachment-post-thumbnail').attr('src') != null){
    line 2 character 2
    Expected '$' at column 5, not column 2.
     $('.attachment-post-thumbnail').length() > 0 &&   $('.attachment-post-thumbnail').attr('src') != null){
    line 2 character 96
    Expected '!==' and instead saw '!='.
     $('.attachment-post-thumbnail').length() > 0 &&   $('.attachment-post-thumbnail').attr('src') != null){
    line 2 character 47
    Expected an assignment or function call and instead saw an expression.
     $('.attachment-post-thumbnail').length() > 0 &&   $('.attachment-post-thumbnail').attr('src') != null){
    line 2 character 103
    Expected ';' and instead saw ')'.
     $('.attachment-post-thumbnail').length() > 0 &&   $('.attachment-post-thumbnail').attr('src') != null){
    line 2 character 103
    Expected ')' at column 5, not column 103.
     $('.attachment-post-thumbnail').length() > 0 &&   $('.attachment-post-thumbnail').attr('src') != null){
    line 2 character 103
    Expected an identifier and instead saw ')'.
     $('.attachment-post-thumbnail').length() > 0 &&   $('.attachment-post-thumbnail').attr('src') != null){
    line 2 character 103
    Stopping. (40% scanned).

    Thanks so much to @Sumit Kumar for assistance as well!

    James

  • James Wolfensberger

    Hi @Sumit Kumar -

    Thanks so much for helping. Do these errors matter? I was able to save the script in the plugin, but it did not have an effect on the button.

    line 1 character 16
    Expected exactly one space between 'function' and '('.
    jQuery(function($){
    line 1 character 19
    Expected exactly one space between ')' and '{'.
    jQuery(function($){
    line 1 character 19
    Missing space between ')' and '{'.
    jQuery(function($){
    line 2 character 2
    Missing 'use strict' statement.
     if($('.attachment-post-thumbnail').length() > 0 &&   $('.attachment-post-thumbnail').attr('src') != null){
    line 2 character 2
    Expected 'if' at column 5, not column 2.
     if($('.attachment-post-thumbnail').length() > 0 &&   $('.attachment-post-thumbnail').attr('src') != null){
    line 2 character 4
    Expected exactly one space between 'if' and '('.
     if($('.attachment-post-thumbnail').length() > 0 &&   $('.attachment-post-thumbnail').attr('src') != null){
    line 2 character 99
    Expected '!==' and instead saw '!='.
     if($('.attachment-post-thumbnail').length() > 0 &&   $('.attachment-post-thumbnail').attr('src') != null){
    line 2 character 107
    Expected exactly one space between ')' and '{'.
     if($('.attachment-post-thumbnail').length() > 0 &&   $('.attachment-post-thumbnail').attr('src') != null){
    line 2 character 107
    Missing space between ')' and '{'.
     if($('.attachment-post-thumbnail').length() > 0 &&   $('.attachment-post-thumbnail').attr('src') != null){
    line 3 character 2
    Expected '$' at column 9, not column 2.
     $('#set-post-thumbnail').hide();
    line 4 character 1
    Expected '}' at column 5, not column 1.
    }

    I'm sorry for this difficulty!

    James

  • Sumit Kumar

    Hello again, @James Wolfensberger,

    Well, things were really messed up with our attempt there.
    It was really some incomplete codes, earlier....:wink:

    Please confirm if it works now!
    To brief you what I did is, I added a new .js file "remove-featured.js" in your child theme. (don't just move it to js folder. if you do that then you have to change the location of it in functions.php; i added a line there as well)...
    Then, the js codes are written there and yes, we did changed a bit of css codes, of previously added for this button.

    If you have any issues with this then let me know, I'll be more than happy to help you further.

    Kind Regards,
    Sumit

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.