16 replies [Last post]
Jone77
Offline
newbie
Last seen: 10 years 36 weeks ago
Timezone: GMT+1
Joined: 2010-02-10
Posts: 9
Points: 10

Hello,

I have a site where the users could upload images at a predefined maximum size (height and width). I have two looks for the site using the same database (one for the web and other for mobile) both using different CSS stylesheets. Now for the mobile CSS I would like to set a new maximum image size (height and width) which would automatically resize any of the uploaded images if it turns out they're bigger than what I've specified in the mobile CSS.

So what I'm wondering is this: Would it be possible to specify a maximum size (height and width) with CSS for all images on a site and having them automatically resized if they are bigger than the CSS maximum size allowed?

Thanks very much for taking your time and helping me!

Best regards,
Jonas

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 6 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

yes. img {width: 100px;

yes.

img {width: 100px; height: 100px;}

You'll need to get more precise with this to target just the images you want re-sized.

#container #gravitar img {width: 100px; height: 100px;}

Jone77
Offline
newbie
Last seen: 10 years 36 weeks ago
Timezone: GMT+1
Joined: 2010-02-10
Posts: 9
Points: 10

CupidsToejam, thank you very

CupidsToejam, thank you very much for the swift reply.

The thing is that I wouldn't know in advance what the names for the images would be as they would be uploaded by the users of the site. Would it be possible to use any of the above code to automatically resize all images without knowing their precise names?

Thanks again!

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 6 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

My code above is just an

My code above is just an example. You will need to specify container names to use specificity to target the img tags you want to resize.

Jone77
Offline
newbie
Last seen: 10 years 36 weeks ago
Timezone: GMT+1
Joined: 2010-02-10
Posts: 9
Points: 10

Thanks again for your

Thanks again for your reply!

I'm sorry but I still don't understand if I could use CSS to automatically resize images without knowing the names for the images in advance. Just to clarify, I'm not looking to resize images that I have to specify individually in the CSS but all images at once with the CSS.

Here is an example:
Lets say a user uploads an image to my site with width: 80px and height: 80px. Then if I have specified in the CSS that the maximum allowed for images is width: 20px and height: 20px, in that case that image should be resized when displayed in a browser from 80x80 to 20x20.
I wouldn't want to after the image have been uploaded go into the CSS and specifically target the name of the uploaded image to have it resized. It should happen automatically per my CSS settings.

Could I do this with CSS?

Please don't hesistate to ask me to clarify my question if I'm being unclear in any way.

Thanks once again, I appreciate it!

Jone77
Offline
newbie
Last seen: 10 years 36 weeks ago
Timezone: GMT+1
Joined: 2010-02-10
Posts: 9
Points: 10

I mean in the same way as all

I mean in the same way as all images on the site could be removed with inserting in the CSS:
img { display:none ! important }

Is there something similar I could insert to instead of removing the images completely, just resize them to a by me specified size?

Thanks again!

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 6 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

why dont you provide a

why dont you provide a snippet of code, where the image will appear, and ill give you a better example.

Jone77
Offline
newbie
Last seen: 10 years 36 weeks ago
Timezone: GMT+1
Joined: 2010-02-10
Posts: 9
Points: 10

Thanks once again! When I

Thanks once again! Smile

When I added the img { display:none ! important } to remove all images, I just added it near the top. Like this (the added code is at the bottom):

body {
margin: 0px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
 
ul {margin:0; padding:0;}
ol {margin:0; padding:0;}
 
fieldset {border:none;}
legend {margin-top:10px;font-size:12px;font-weight:bold;color:#063E3F;}
label {font-weight:bold;}
 
 
/* added to remove all images */
img { display:none ! important }

But, I believe uploaded images are part of a Storycontent function for the site, so possible it would be here the images sizes should be specified. In that case, the code snippet would be this Smile :

.storycontent {
padding: 0px;
font-size:11px;
}
.storycontent p {
margin:0 0 -1px 0;
}
.storycontent ol {
margin-left:1px;
padding:0;
}
.storycontent ol li {
line-height:14px;
margin:0 0 -1px 0;
padding:0;
}
.storycontent ul {
margin:0 0 0px 0;
padding:0;
}
.storycontent ul li {
line-height:13px;
margin:0 0 -1px 0;
padding:0;
}

Thanks very much for taking your time and helping me, I really appreciate it.

Best regards,
Jonas

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 6 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

I need to see the html

I need to see the html snippet where the images will load.

Jone77
Offline
newbie
Last seen: 10 years 36 weeks ago
Timezone: GMT+1
Joined: 2010-02-10
Posts: 9
Points: 10

Here is a code snippet with

Here is a code snippet with the html (and its where it says <a href="/pligg/modules/upload/attachments/king.jpg">

Here is the code:

<a href="/pligg/story.php?title=imageuploadtest">imageuploadtest</a>
													</h2>
 
	<div class="storycontent">
 
 
 
 
    						<a href="/pligg/modules/upload/attachments/king.jpg">
						<img src="/pligg/modules/upload/attachments/thumbs/king200x200.jpg">
		</a>
 
 
			<span class="news-body-text">
			<span id="ls_contents-0">
									<p>imageuploadtest</p>
 
				<br style="clear: both;"> 
			</span>
		</span>
 
				</div>
 
	<div class="storyfooter">
		<div class="floatleft subtext">
				 <a href="/pligg/story.php?title=imageuploadtest"> Read More</a> |		<span id="ls_comments_url-0">
							<span id="linksummaryDiscuss"><a href="/pligg/story.php?title=imageuploadtest#discuss" class="comments">Discuss</a>&nbsp;</span>
											</span> 
 
 
					|&nbsp;
 
			<span id="xreport-0"><span id="linksummaryBury"><a href="javascript:vote(0,26,0,'d736f6dd6ceb5cb92435b7b29feeb142',-10)">Bury</a></span></span>
 
 
 
 
									|&nbsp;
				<span id="emailto-0" style="display: none;"></span>
 
				</div>
 
		<div class="floatright subtext">
		<a href="/pligg/upcoming.php?category=News">News</a>
					                | 
															<a href="/pligg/search.php?search=imageuploadtest&amp;tag=true">imageuploadtest</a>
 
																				<a href="/pligg/search.php?search=imageuploadtest&amp;tag=true">All</a>
 
 
		 </div>
	</div>
 
 
 
	</div>
	<br>
 
				<span class="subtext">
				Posted by 
 
				<a href="/pligg/user.php?login=ad23g54">ad23g54</a>  2 days ago
 
									(Editorial)
 
 
 
 
				<span id="ls_adminlinks-0" style="display: none;">
 
																				</span>
			</span>

Its from the following url: http://www.nicer.info/pligg/upcoming.php

Thanks once again Smile

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 6 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

so, try this .storycontent

so, try this

.storycontent img {width: 20px; height: 20px;}

Jone77
Offline
newbie
Last seen: 10 years 36 weeks ago
Timezone: GMT+1
Joined: 2010-02-10
Posts: 9
Points: 10

That was exactly what I was

That was exactly what I was looking for, adding that css code is resizing all the images perfectly! Thank you very much, I'm extremely grateful Smile

Best regards,
Jonas

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 6 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

glad I could help!

glad I could help!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi Jone77, Although Cupids

Hi Jone77,
Although Cupids code gives you exactly what you asked for, you should be aware that the image file size is not effected. For example if you have a 5MB image that is normally 1024px x 1024px and you use css to resize, it will still be the 5MB image with the same actual dimensions. You should really look at resizing the image before or as it is uploaded with something like GD.

Jone77
Offline
newbie
Last seen: 10 years 36 weeks ago
Timezone: GMT+1
Joined: 2010-02-10
Posts: 9
Points: 10

Tony, thank you also very

Tony, thank you also very much for your reply.
I'm still happy with that the images could be resized by CSS, but its not optimal that the image file size isn't affected since its for a mobile template where filesize should be kept down for mobile devices. Is it the same for this code img { display:none ! important } that the image sizes is not affected even though they're not displayed?
By GD, do you mean Grids CSS? And could GD be used for a specific CSS and a template? (Since I have another template for the same site but using another CSS that I wouldn't want affected by the same size limits as the mobile template)

Thanks again!

Best regards,
Jonas

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

GD is a library of scripts

GD is a library of scripts that manipulate images, usually used with PHP, another popular one is ImageMagik.
I'm pretty sure display:none; wont load the image, but don't rely on my memory, look it up or test it out.

Jone77
Offline
newbie
Last seen: 10 years 36 weeks ago
Timezone: GMT+1
Joined: 2010-02-10
Posts: 9
Points: 10

Ok, thank you once again for

Ok, thank you once again for your reply.

Best regards, Jonas