What is class=round_image in Ionic2 - ionic-framework

Question

I'm not a programmer, as my guy left, and I'm left debugging the code:
Currently in an ion-item I have an ion-avatar which has displays a circular image. As best as I can tell, it is using the class="round_image" the following code:
<ion-thumbnail class="round-image" item-right>
But where does round-image come from, and how can i get a regular rectangular image?
Please advise.
Here is the entire code:
<ion-title padding>Events</ion-title>
<!--<ion-toolbar>
</ion-toolbar> -->
</ion-header>
<ion-content>
<ion-segment [(ngModel)]="genderSegment" color="danger" padding>
<ion-segment-button value="men" (click)="updateGenderSegment(1)">
Men
</ion-segment-button>
<ion-segment-button value="women" (click)="updateGenderSegment(2)">
Women
</ion-segment-button>
<ion-segment-button value="both" (click)="updateGenderSegment(3)">
Both
</ion-segment-button>
</ion-segment>
<ion-list text-wrap>
<ion-item-group *ngFor="let group of groups">
<ion-item-divider dark><h2>{{ group.label }}</h2></ion-item-divider>
<button ion-item detail-none *ngFor="let event of group.events" [navPush]="eventDetailsPage" [navParams]="{eventId: event.$key}">
<ion-thumbnail class="my-image" item-right>
<div image-cache class="photo" [ngStyle]="{ 'background-image': 'url(' + (event.user | async)?.photoURL + ')'}"></div>
</ion-thumbnail>
<h2><strong>{{ event.title }}</strong></h2>
<p>By: <strong><i>{{ (event.user | async)?.name }}</i></strong></p>
<p>{{ event.category }}</p>
</button>
</ion-item-group>
</ion-list>
<!--<ion-fab hideWhen="ios" right bottom>
<button ion-fab color="danger" (click)="addEvent()">
<ion-icon name="create" ></ion-icon>
</button>
</ion-fab>
-->
<ion-infinite-scroll (ionInfinite)="loadMore($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>

Answer 1

I'd recommend you to learn the basics of HTML and CSS. Check out this link http://www.w3schools.com/
Now, back to your question.
2 options.
1.
Remove the class="round-image" since I believe ion-thumbnail will be squared by default, if this isn't the case, move on to 2.
2.
Your page is called 'Events' so depending on how clean your programmer was, there should be a events.scss, events.component.scss or events.css file
scss and css are used for styling your page. So if you have a round image it will be defined here.
In that file (if it exists, else it's hidden in some other scss or css file) there should be a .round-image (ctrl+f -> .round-image). There will be a property called border-radius. This is the amount your borders will 'curve'. So setting it to 0 will create a square/rectangle image.
If they are rectangle and you want it to be a square you could use this SO question How to "crop" a rectangular image into a square with CSS? The answer provided will prevent your image from 'squishing'*.
*Squishing example: if it's a profile image which is higher than wide, the person in the profile image will look fat when you force it into a square.

Answer 2

It looks like you should remove class="round-image"
<ion-thumbnail class="round-image" item-right>
should be
<ion-thumbnail item-right>