It would be great if there was multiple image sizes available to specify. My scenario use that Ineed one image size for the block (eg, 48x36px) and one for main node content (original size 16x12). I've attached screenshots.

Obviously if the smaller images are upscaled they become pixelated at moment so a simple option to specify image size for each particular image use case would be great.

At the moment i'm having to strip out the img height & width attributes and replace is with css code, which isn't ideal.

Would this be any good or is there a better way to solve this?

CommentFileSizeAuthor
#1 hacked-block-icons.png2.57 KBkingfisher64
node-icons.png2.21 KBkingfisher64
block-icons.png1.69 KBkingfisher64

Comments

kingfisher64’s picture

kingfisher64 commented
StatusFileSize
new hacked-block-icons.png2.57 KB

I've achieved what i'm after but in a far from best way (screenshot attached).

$('.language-switcher-locale-url li a img').removeAttr('width').removeAttr('height').removeAttr('src').removeAttr('alt').removeAttr('title');

The alt and title are removed as they display instead of img once src attribute is removed - far from a proper way of doing things.

        .language-switcher-locale-url li {
		margin: 0 0 15px 0;
		list-style: none;
		line-height: 36px;
	}
	.language-switcher-locale-url li a {
		margin-left: 10px;
		color: #fff;
	}	
	.language-switcher-locale-url li a img {
		float: left;
		width: 48px;
		height: 36px;
	}		
	.language-switcher-locale-url li a {
		opacity: 0.5;
	}
	.language-switcher-locale-url li.active a {
		opacity: 1;
	}	
	.language-switcher-locale-url li a:hover {
		opacity: 1;
	}
	.language-switcher-locale-url li.en a img.language-icon {
		background:url("../images/languages/uk.png") no-repeat;
	}
	.language-switcher-locale-url li.it a img.language-icon {
		background:url("../images/languages/italy.png") no-repeat;
	}

Could anybody recommend a better way to achieve this look without these hacks.

Many thanks

Freso’s picture

Freso commented

My suggestion would be to make a custom set of icons in the highest resolution you want/need, upload those to the server and go to admin/config/regional/language/icons and make the "Icons file path" point to their location. Then you can use CSS to "shrink" the images where you want them to be smaller, which generally has less artifacts than "blowing them up".

kingfisher64’s picture

kingfisher64 commented

Yep, that sounds better than what i've done - i'll implement that.

This does highlight a need for multiple image size support. I think people are going to want different size icons for block content than for the button link.

It would add to the usability of the mod.

Freso’s picture

Freso commented
Status: Active » Closed (won't fix)

Can be done using the larger size image and down-scaling through CSS for now. I want to keep the module relatively simple and compact, and there is a decent work-around already (better than what could be done by module code, when we can't tell node links and switcher block links apart), so closing for now. Might be up for reconsidering in the not-so-near future.

Freso’s picture

Freso commented

#1343422: use svg format for the flags might also prove to fix this request all on its own.