1

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>
frednikgohar
  • 340
  • 1
  • 3
  • 14

2 Answers2

5

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.

Community
  • 1
  • 1
Ivar Reukers
  • 7,560
  • 9
  • 56
  • 99
  • Thank you for the thorough answer. I should have mentioned I'm familiar enough with HTML/CSS to attempt this. As regards to your response, neither work (hence my question). 1 - when I remove class="round-image" no image renders 2 - I have looked at scss and there are no mentions of round-image in fact, I looked at my entire ionic folder library and I can't find any references to "round-image"... which made me wonder if its a default ionic2 class, akin to item-right Any ideas? – frednikgohar Dec 02 '16 at 20:10
  • Ok in chrome, right click the image and 'inspect element' there you can see what styles are being applied to the image. Then it's a matter of finding the right style and removing/editing it – Ivar Reukers Dec 02 '16 at 20:15
  • It appears that the styles come from a file called main.css. The problem is that main.css is a file that gets built after i run "ionic serve" in terminal. Is there a way to trace what files go into building main.css? – frednikgohar Dec 02 '16 at 20:30
  • Nope all scss files are converted into main.css you will need to check scss files for a class called round-image, or you could copy the styles from your developers console and rewrite those into a class called square-image and just let out the border-radius – Ivar Reukers Dec 02 '16 at 20:33
  • That was it @Ivaro18 - thank you so much for your help – frednikgohar Dec 02 '16 at 21:34
0

It looks like you should remove class="round-image"

<ion-thumbnail class="round-image" item-right>

should be

<ion-thumbnail item-right>
Matt
  • 33,328
  • 25
  • 83
  • 97
  • This doesn't answer his "What is class=round_image in Ionic2" and "where does round-image come from" – Ivar Reukers Dec 02 '16 at 15:43
  • Yes, please see my comment to Ivaro's above. I tried removing, but the image simply disappears and doesn't show up. This made me think that image-round is maybe an ionic class! – frednikgohar Dec 02 '16 at 20:14
  • Yes. You need to inspect in chrome like @Ivaro18 suggests. – Matt Dec 02 '16 at 20:25