I tried to use a Button with some Images next to it. All these should be within one row in a GridLayout. My html:
<GridLayout colums="4*,*,*,*,*,*" rows="*">
<Button text="send rating" (onTap)="rateIt()" col="0" row="0" class="send-rating-button"></Button>
<Image src="{{ user_rating_imageurls[0] }}" col="1" row="0" class="star-image" (onTap)="rateFromUser('1')"></Image>
<Image src="{{ user_rating_imageurls[1] }}" col="2" row="0" class="star-image" (onTap)="rateFromUser('2')"></Image>
<Image src="{{ user_rating_imageurls[2] }}" col="3" row="0" class="star-image" (onTap)="rateFromUser('3')"></Image>
<Image src="{{ user_rating_imageurls[3] }}" col="4" row="0" class="star-image" (onTap)="rateFromUser('4')"></Image>
<Image src="{{ user_rating_imageurls[4] }}" col="5" row="0" class="star-image" (onTap)="rateFromUser('5')"></Image>
</GridLayout>
Sadly it is placing the Button over the complete row and the images. Did I miss something when defining the rows/columns?
The Button and Image css:
.star-image {
width: 30;
margin: 10;
}
.send-rating-button {
margin-left: 30;
margin-right: 10;
background-color: yellow;
border-color:black;
border-width: 1;
max-width: 100;
}
Edit: I should perhaps clarify what he does. Instead of inserting each element into one cell of the GridLayout, all of the elements are shown in the center of the line above each other.
Edit2: I have no idea why it did not work before. The working code.
<GridLayout columns="*4,*,*,*,*,*" rows="*">
<Button col="0" row="0" [text]="'RATING_AVG'|translate" class="send-rating-button" (onTap)="rateIt()"></Button>
<Image src="{{ user_rating_imageurls[0] }}" col="1" row="0" class="star-image" (onTap)="rateFromUser('1')"></Image>
<Image src="{{ user_rating_imageurls[1] }}" col="2" row="0" class="star-image" (onTap)="rateFromUser('2')"></Image>
<Image src="{{ user_rating_imageurls[2] }}" col="3" row="0" class="star-image" (onTap)="rateFromUser('3')"></Image>
<Image src="{{ user_rating_imageurls[3] }}" col="4" row="0" class="star-image" (onTap)="rateFromUser('4')"></Image>
<Image src="{{ user_rating_imageurls[4] }}" col="5" row="0" class="star-image" (onTap)="rateFromUser('5')"></Image>
</GridLayout>
As Marek mentioned in his comment the issue is because you are setting the first column to have a width of 4 DP (device independent pixels) due to syntax error. You can either assign greater DP value for your first row or assign relative width using 4* (means this column will be 4 times wider than column set with *)
<GridLayout colums="4*,*,*,*,*,*" rows="*">
I tried around a bit and I have no idea why the "new" code works and the older did not. I posted the working code as update into the question.
Related
I am currently working on a django blog. However, I am experiencing some difficulties with the size of the post thumbnails. Here's a picture:
What I marked in yellow is how the image should be filling the space. The width is fine, but the heigh isn't working well as you can see.
Here's the code:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<style>
img {
height: 100%;
width: 100%;
}
</style>
<!-- Post-->
{% for obj in object_list %}
<div class="row d-flex align-items-stretch">
{% if not forloop.first and not forloop.last %}
<div class="image col-lg-5"><img src="{{ obj.thumbnail.url }}" alt="..."></div> #Here's the image
{% endif %}
<div class="text col-lg-7">
<div class="text-inner d-flex align-items-center">
<div class="content">
<header class="post-header">
<div class="category">
{% for cat in obj.categories.all %}
{{ cat }}
{% endfor %}
</div>
<a href="{{ obj.get_absolute_url }}">
<h2 class="h4">{{ obj.title }}</h2>
</a>
</header>
<p>{{ obj.overview|linebreaks|truncatechars:200 }}</p>
<footer class="post-footer d-flex align-items-center"><a href="#" class="author d-flex align-items-center flex-wrap">
<div class="avatar"><img src="{{ obj.author.profile_picture.url }}" alt="..." class="img-fluid"></div>
<div class="title"><span>{{ obj.author }}</span></div></a>
<div class="date"><i class="icon-clock"></i> {{ obj.timestamp|timesince }} ago</div>
<div class="comments"><i class="icon-comment"></i>{{ obj.comment_count }}</div>
</footer>
</div>
</div>
</div>
{% if forloop.first or forloop.last %}
<div class="image col-lg-5"><img src="{{ obj.thumbnail.url }}" alt="..."></div> #Here's the image
{% endif %}
</div>
{% endfor %}
</div>
</section>
I have no idea where the error is. I've tried to debug the problem but I haven been able to debug it
The way I see it, it's doing exactly what it's supposed to.
You put the image inside a column, then the image has 100% of the width, and because this is just an image inside a div (no display flex on the column or tricks involved), 100% height is just not gonna work and the default height of the image is used.
And even if it did work, and the images where 100% both on height and width, they'll probably end up all stretched and deformed in different resolutions, because the ratio of width:height probably changes.
I usually skip this dilemma by avoiding the use of the img tag altogether, and setting the images as background-images in the column with the 'image' class. Then set the background-size to "cover", and background-position to "center". You probably also need to set a minimum height for this column, so the images don't completely disappear when the columns stack on top of each other on smaller screens.
You can add a class like
<style>
.image {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 200px; // this size is arbitrary, choose what suits best
}
</style>
And then add the image on the iteration like so
<div class="image col-lg-5" style="background-image: url('{{ obj.thumbnail.url }}');"></div>
first you install it using pip install easy-thumbnails
INSTALLED_APPS = [
# ...
'easy_thumbnails',
]
then you do your migrations,and use it in your templates, this is from a project of mine:
{% load thumbnail %}
{% for image in images %}
<div class="image">
<a href="{{ image.get_absolute_url }}">
{% thumbnail image.image 300x300 crop="smart" as im %}
<a href="{{ image.get_absolute_url }}">
<img src="{{ im.url }}">
</a>
</a>
</div>
{% endfor %}
you can play with the details 300x300 as you wish, also the crop is optional but very useful
if you have trouble showing images add : THUMBNAIL_DEBUG = True to your settings
here is the docs https://easy-thumbnails.readthedocs.io/en/
I am trying to set equal height for every single item in the list. Here as you can see in the picture some channels have companion channels(e.g CNN & HLN, BNN & CP24), they are having a different height setting as compared to the channels without any companion channels. How do I make it the same height? The second thing I am trying is to not have any channels get in the line of the alphabets(e.g the Cottage Life channel gets more to the left which gets in the line of the alphabets). Also how do I put a space between rows, I tried putting in which didn't work(e.g after the A head and its channels row i need to put a blank space).
<div class="container col-lg-8" style="float:Left">
<ul class="w3-ul w3-card-4" *ngFor="let head of channelDisplayHeads" style="clear:both">
<h1 align="center" style="background-color:#0083BC;">
<font color="white">{{ head }}</font>
</h1>
<ul *ngFor="let channel of channelList">
<li class="list-group-item logoDisplay" *ngIf="channel.channel.substr(0, 1) === head">
<div *ngIf="channel.compChannel.compChannelLogo.length !== 0; else noCompChannel">
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}">
<img class="img-rounded" src="{{ channel.compChannel.compChannelLogo }}" alt="{{ channel.channel.compChannelName }}">
</div>
<ng-template #noCompChannel>
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}">
</ng-template>
<br>
<span class="w3-left">
<mark>
<font size="1">{{ channel.cbsCode }}</font>
</mark>
</span>
<span class="w3-right">
<font size="2">{{ channel.pickCode }}</font>
</span>
</li>
</ul>
</ul>
</div>
I am trying to group some img's with a border.
As you see in the picture below the BNN & CP24 are combo channels and I used div element to create that border. The only issue I have here is when I use div element it changes the size of the combo channels. Here the BNN & CP24 combo channel is slightly taller than the individual channels. I dont have any CSS attached to the div element. Code with the div element below.
<div *ngIf="channel.compChannel[0].compChannelLogo.length !== 0; else noCompChannel">
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
<img class="img-rounded" src="{{ channel.compChannel[0].compChannelLogo }}" alt="{{ channel.compChannel[0].compChannelName }}"
width="100" height="100">
</div>
<div #noCompChannel>
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
</div>
But when i use ng-container I get actual size but I am not able to create a border on the combo channels. code with ng-container below.
<ng-container *ngIf="channel.compChannel[0].compChannelLogo.length !== 0; else noCompChannel">
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
<img class="img-rounded" src="{{ channel.compChannel[0].compChannelLogo }}" alt="{{ channel.compChannel[0].compChannelName }}"
width="100" height="100">
</ng-container>
<ng-template #noCompChannel>
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
</ng-template>
I am trying to make a GridLayout with a label and 5 images. The 5 images should have (approx) the same size as the label. My code (currently):
<GridLayout columns="*,*,*,*,*,*" rows="*,*">
<Label col="0" row="0" class="segment-rating-label" [text]="'RATING_AVG'|translate">
</Label>
<!-- The images are starting here -->
<Image src="{{ avg_rating_imageurls[0] }}" col="1" row="0" class="star-image" (onTap)="logTap()">
</Image>
<Image src="{{ avg_rating_imageurls[1] }}" col="2" row="0" class="star-image">
</Image>
<Image src="{{ avg_rating_imageurls[2] }}" col="3" row="0" class="star-image">
</Image>
<Image src="{{ avg_rating_imageurls[3] }}" col="4" row="0" class="star-image">
</Image>
<Image src="{{ avg_rating_imageurls[4] }}" col="5" row="0" class="star-image">
</Image>
<!-- and end here -->
<Label col="0" row="1" class="text-details segment-content" [text]="'RATING_USER'|translate">
</Label>
<!-- and here is another stack of images -->
<Image src="{{ user_rating_imageurls[0] }}" col="1" row="1" class="star-image" (onTap)="rateFromUser('1')">
</Image>
<Image src="{{ user_rating_imageurls[1] }}" col="2" row="1" class="star-image" (onTap)="rateFromUser('2')">
</Image>
<Image src="{{ user_rating_imageurls[2] }}" col="3" row="1" class="star-image" (onTap)="rateFromUser('3')">
</Image>
<Image src="{{ user_rating_imageurls[3] }}" col="4" row="1" class="star-image" (onTap)="rateFromUser('4')">
</Image>
<Image src="{{ user_rating_imageurls[4] }}" col="5" row="1" class="star-image" (onTap)="rateFromUser('5')">
</Image>
<!-- ending here -->
</GridLayout>
My css classes for these:
.star-image {
width: 20;
margin: 10;
}
.segment-rating-label {
min-width: 100;
margin-left: 10;
margin-right: 20;
}
Sadly the GridLayout has for every column the same size. How can I influence these?
Change *,*,*,*,*,* to *5,*,*,*,*,* and see the magic happen!
Those stars have a relative size, compared to other stars - so *5 means "take up 5 times the space of a regular *".
i was looking to find out how i can add a different image when i hover over a particular image in Shopify. I currently have the following code in my theme.liquid file, but i am not sure how i can add some mouseover code to show a different image.
<div class="site-header__phone">
{{ 'phone-icon.png' | asset_url | img_tag }}
</div>
Mostafa,
The following is what i have wrote as it is a hover on an icon that i am adding and not a product, but the page shows " /> " /> which is incorrect..
<div class="site-header__phone">
<a href="tel:123456789">
<img class="phone" src="{{ 'phone-icon.png' | asset_url | img_tag }}" />
<img class="phone_hover" src="{{ 'phone-icon-h.png' | asset_url | img_tag }}" />
</a>
</div>
and the css being:
.site-header__phone {
margin-top:6px;
margin-left:15px;
}
.site-header__phone a img.phone_hover { display: none; }
.site-header__phone a:hover img.phone { display: none; }
.site-header__phone a:hover img.phone_hover { display: block; }
any ideas where i have gone wrong?
try this hope it will work for you. Give the Html part like this
<div class="image">
<a href="{{ url }}">
<img class="first" src="{{ product.images[0] | product_img_url: 'large' }}" alt="{{ product.title | escape }}" />
<img class="second" src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.title | escape }}" />
</a>
</div>
And styles.css stylesheet like this
.product .image a img.second { display: none; }
.product .image a:hover img.first { display: none; }
.product .image a:hover img.second { display: block; }