How to make Sensei course images square?

[Anonymous]

Hello @vapvarun,

Another issue in this context: I have now added so many courses on a site where the code from yesterday is still working. It now turns out that on page two there are no images displayed and the mask is not square but default.

See public course archive page:
http://nicole-schaller.de/course/
http://nicole-schaller.de/course/page/2/?action=newcourses

[Anonymous]

That goes for the public course archive and the personal active courses under BuddyPress profile.

I personally have resolved this for me for the moment: I set the no. of displayed courses to 20 in the Sensei settings. As I do not plan to work on any more courses in the near future, that should do it.

But maybe you can resolve this in an update.

[Varun Dubey]

Hi @nmschaller, in that code. “ture” is used for hard crop, if you do not want to use hard crop you can keep it like
add_image_size( ‘course-archive-thumb’, 360, 360);

Images do not saved in database, they will be saved in folder.

Multiple image sizes are defined to use correct size of image at desired location. like if you have 600*600 , you can re size it in HTML or CSS from 600*600 to 150*150 to display as thumbnail. Serving a scaled image reduce site size.

Regards
Varun Dubey

[Anonymous]

O.k., and do you think the code from today will work without “true”?

[Anonymous]

Is this code correct:

function child_theme_setup() {
    add_image_size( 'course-archive-thumb', 360, 360 );
}
add_action( 'after_setup_theme', 'child_theme_setup', 11 );

function child_theme_setup() {
    add_image_size( 'course-single-thumb', 450, 450 );
}
add_action( 'after_setup_theme', 'child_theme_setup', 11 );

I have separated the two so that they do not disturb each other. And I have deleted the hard crop command with the comma before it.

[Anonymous]

There is something else:

When the code worked yesterday, and still today on my French and Italian site, I finally got rid of the red inner border masking the image. Now, that I have deleted the “True” on my German site in the functions code (without adding the additional line that seems to break the code), the red border is there again ?!

How do I get rid of the red border? Does that have something to do with hard crop or not?

[Anonymous]

@vapvarun

The more I think of it, the more I want the list view back and get rid of the cards altogether.

See the image, how ugly this is. And the long (necessary) German course titles do not fit at all into the forseen space. And that although the titles are way smaller than a normal H1 title.

Is there a possibility to use the original Sensei list view without losing other functions that come with your two plugins?

And have square course images so that I do not need to create the same image in completely different formats?

[Anonymous]

@vapvarun

O.k., I just deactivated the “Boss. Sensei” (make Sensei look beautiful in Boss theme – now that is subjective!). Without that there is no formatting at all.

So, I dare say need to work on the cards. I suggest:

1. Max. 2 cards in desktop view, one in mobile view.

2. Larger titles (24px would be good)

3. Variable title space allowing for longer titles, no overflow into the next section

4. Square image to avoid double creation of images for product and course.

5. Now red border, and hover color white.

[Anonymous]

@vapvarun

Square images working! Thanks a lot.

I nailed it: The custom functions.php was deactivated due to a fatal error. After putting in the code again exactly as you provided it, except for the size and no hard-cropping, and reactivating the functions.php, and regenerating the thumbnails once again – it now works.

Now I only have to remove the red border.

[Varun Dubey]

Hi @nmschaller, there is no red border, it have a red mask you . Do you want to remove it ? please attach and screenshot and mark that position.
Regards
Varun Dubey

[Anonymous]

@vapvarun

Please see the image I provided above. There is a thin red frame/border within the image. I would like to remove that.

[Varun Dubey]

Hey @nmschaller , i am not getting any border on images on your site, i have tested on chrome and mozilla both.
Regards

[Anonymous]

@vapvarun
Please see image. Red “border” showing up on personal profile / Active courses in Chrome and Safari.

[Varun Dubey]

Hi @nmschaller, I was checking on your archive page earlier, for active course i can view it now

Please add following css codes to remove them

.course-border {
  opacity: 0 !important;
}

Regards
Varun Dubey

[Anonymous]

@vapvarun,

Now that looks nice.

Thanks a lot, also to your developers, for the extra effort this week.

I will now wait for the overall fonts and course cards being fixed in a future update or extra code you send me.

Have a nice weekend

Nicole