I have a site with a 12 column layout and I'm trying to figure out to use the srcset and sizes attributes correctly for matching my design.
I have a sidebox which spans 3 columns in desktop, but in tablet and mobile sizes it spans 12 cols (100% width).
What I want is for the image used in desktop-version, also to be used in mobile (max-width 480px), and a specific tablet-sized image to be used in everything between 481px and 781px.
This is my code:
<img
src="http://placehold.it/370x150/cecece"
srcset="http://placehold.it/768x311/f67f57 768w, http://placehold.it/370x150/cecece 320w"
sizes="(max-width: 768px) 100vw, (max-width: 480px) 100vw"
>
In my example, the 768 version is always used until 780px, and then the default src is used. But how does I get it to use the 320 version up until 480px?
How about this:
<img
sizes="(min-width: 781px) 370px, 100vm"
srcset="http://placehold.it/768x311/f67f57 768w,
http://placehold.it/370x311/cecece 480w"
>
It should show the smallest image up to 480px, then the large one up to 780px and the small one >780px.
Related
How can I change the size of the displayed font to display the following entry:
al_draw_textf(font, al_map_rgb(204, 255, 255), WIDTH / 2, 50,\
ALLEGRO_ALIGN_CENTER, "%d : %d", pl1.scope, pl2.scope);
Created a standard ASCII font which I am trying to resize.
ALLEGRO_FONT* font = al_create_builtin_font();
Display of the players' score. (img)
This is the first game, I didn't do anything except console programs before.
As al_create_builtin_font() - liballeg points out:
ALLEGRO_FONT *al_create_builtin_font(void)
Creates a monochrome bitmap font (8x8 pixels per character).
This font is primarily intended to be used for displaying information
in environments or during early runtime states where no external font
data is available or loaded (e.g. for debugging).
In order to resize fonts load fonts from the local/system repo.
al_load_font() :
ALLEGRO_FONT *al_load_font(char const *filename, int size, int flags)
Package your fonts with the game, it becomes easier to load them.
I'm trying to print the entire page with graph using CTRL + P, but the graph is always cropped.
I tried to limit the width of the graph using CSS media = "print", but it seems to have no effect on the graph.
print.css
figure{
width: 100% !important;
/* width: 300px !important; //also does not work */
}
If I try to change the size of the graph in CSS media = "screen", the graph will immediately shrink / enlarge.
I know there is a function chart.print(); But it only prints the graph. I need to print the entire page, including the graph. I tried it in Chrome 73. Anychart 8.5.1
I used the (new) GUI Builder and inserted an image (by way of adding a Label). However, it appears too big. Is there anyway I can scale and control the size? (I saw something which points to cloudinary but that seems too complicated. I just want to simply scale down the image.)
There are several ways to resize images in Codename One and I will mention few below:
1.
Use MultiImages in the GUI Builder. With this multiple sizes of images are generated from one image based on the sizes you specified. In your GUI Builder, Click Images -> Add Multi Images -> Select your image -> Check Preserve Aspect Ratio -> Increase the % that represents the percentage of the screen width you want the image to occupy. Set any DPI you don't require to 0.
2.
Use ScaledImageLabel or ScaledImageButton, it will resize the image the fill available space the component is occupying.
3.
Scale the image itself in code (This is not efficient, though):
public static Image getImageFromTheme(String name) {
try {
Resources resFile = Resources.openLayered("/theme");
Image image = resFile.getImage(name);
return image;
} catch (IOException ioe) {
//Log.p("Image " + name + " not found: " + ioe);
}
return null;
}
Image resizedImage = getImageFromTheme("myImage").scaledWidth(Math.round(Display.getInstance().getDisplayWidth() / 10)); //change value as necessary
4.
Mutate the image (Create an image from another image).
There are some background images missing from my site: http://www.test.cwscambodia.org/
These include:
arrows.png (arrows on the right and left of the image slider)
sponsor_title.png (behind the the 'our supporters' text) down the bottom of the home page.
sponsor_arrows.png on each side of the 'our supporters' images at the bottom of the home page
search_bg.png which is background of the search field.
You can see how these images should look on the theme's test site: http://themes.themolitor.com/wpaid/
I have been told by the theme developer and the host that it is database problem in the wp_options table. However, I do not know which area to fix.
I have been trying to solve this issue for about 3 weeks so I would be really grateful if anyone can help me.
In the /wp-content/themes/wpaid/style.css you link to the folder /images. This folder does not exists.
example
.pxs_navigation span.pxs_prev {
left: 50%;
margin-left: -560px;
background:url(images/arrows.png) no-repeat left top;
}
.pxs_navigation span.pxs_next {
right: 50%;
margin-right: -560px;
background:url(images/arrows.png) no-repeat right top;
}
.pxs_navigation span.pxs_prev:hover {background:url(images/arrows.png) no-repeat left bottom;}
.pxs_navigation span.pxs_next:hover {background:url(images/arrows.png) no-repeat right bottom;}
In this case you will see that the arrows are linked to images/arrows.png, a folder that not exists. The good url link is /wp-content/themes/wpaid/images/arrows.png
That is the problem why you dont see all the backgrounds on your website. You can use a replace function in a text editor to change them all in one time.
I need to resize and crop to exactly 60x80px from various size and
aspect ratio. Just before i put into Datastore. Anyone already got
this issue resolved.
Currently i already succed to just transform it to exact height (80px)
with various width which nott look so good when i try to display it on
a list. e.g jcaroussel.
My db.put code is like bellow:
if users.get_current_user():
personal.personal_id = int(self.request.get('personal_id'))
personal.name = self.request.get('name')
personal.latitude = self.request.get('latitude')
personal.info = self.request.get('info')
photo = images.resize(self.request.get('img'), 0, 80)
personal.photo = db.Blob(photo)
personal.lc_id = int(self.request.get('lc_id'))
personal.put()
self.redirect('/admin/personal')
else:
self.response.out.write('I\'m sorry, you don\'t have permission to add this LP Personal Data.')
I just want to do similar result when we upload our avatar on google
talk/google chat.
Anyone solved this?
Thx
After your resize your image down to 80 pixels in height, you would have to use the crop function as defined here. For example:
img = images.Image(self.request.get('img'))
img.resize(0, 80)
resized_img = img.execute_transforms(output_encoding=images.JPEG)
left_x = (resized_img.width - 60) / 2
resized_img.crop(left_x, 0, left_x + 60, 80)
cropped_img = resized_image.execute_transforms(output_encoding=images.JPEG)
In my example it crops to the center of the image.
It assumes that the resized image is at least 60 pixels wide, but obviously you would have to add some checks to confirm this, because a user might not upload an image in the right size.
I used something else:
Resize the original image to your max height (80)
Store the resized (but complete/not cropped) image
Display it inside a <div> that has the following CSS: width: 60px; height: 80px; overflow: hidden;
That way it will show nicely in your list, but you can still display the complete resized picture on your user's profile page (looking at you code I imagine that's what you are trying to do, right?)