Hi all.
I'm using K2 v2.6.8 and Joomla 3.2.4
I want to change the extra field names to an image somehow.
I am creating a house site and have set up extra fields for number of bedrooms, bathrooms garages etc, but instead of showing Bathrooms: 4 I want to have a bathroom icon then the umber of bathrooms. I tried copying in some image code into the Name and Alias fields but it stripped it out.
I thought I could do it with css somehow (I'm no expert on that) but I couldn't find how to add individual style names to each field and so, I am stuck. Can anyone help?
Also, once that' done I am planning on using K2 filter to search the extra fields so I guess I'd need to keep the field names intact? I dunno.
I have searched all over but can't find a solution.
Thanks in advance
Andrew

You will need some custom coding for this.
The best way to achieve this is to render each extrafield separately or use an image extrafield alternatively.

If you want to render them seperately you need to make a check for the value and print the matching result. On the other hand uploading an image is easier but not that versatile.

Thanks for your help Krikor.

I have found a way to do it with css that you actually commented on as well, so thanks for that.

Original post is at getk2.org/community/English-K2-Community/159379-How-to-style-every-single-extra-field (don't know why I couldn't find it before.

Basically for anyone else, what I did was first set up an override template, then in item.php change line 261 to <span class="itemExtraFieldsLabel<?php echo $extraField->alias; ?>"><?php echo $extraField->name; ?>:</span>
which adds <?php echo $extraField->alias; ?> to the class name. Then whatever is in the alias of the field name becomes the class name, so in my case, one alias was bedrooms, so the class became .itemExtraFieldsLabelbedrooms
Then I just had to add a style that put in the image and hid the text, so mine is:

.itemExtraFieldsLabelbedrooms {
float: left;
width: 34px;
background-image: url(../../../images/template_images/bedrooms-icon.png);
background-repeat: no-repeat;
background-position: right top;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

Also, if you have the extra fields showing on a category page, which I do, do the same to category_item.php line 145. The class was called catItemExtraFieldsLabel but I changed it to the same as the items one, so I ended up with
<span class="itemExtraFieldsLabel<?php echo $extraField->alias; ?>"><?php echo $extraField->name; ?>:</span>

Also, if you want any info on k2 overide templates I found this helpful www.youtube.com/watch?v=vprpuc5pLHI

Anyway, glad to get that sorted.

Andrew

I tried that but unfortunately it did not work

my previous developer used the following format
.itemExtraFields li.id3 a {
background: url("../images/facebook.png") no-repeat scroll 0 0 transparent;
color: transparent;
display: block;
height: 64px;
text-indent: -999em;
width: 64px;
}
.itemExtraFields li.id4 a {
background: url("../images/twitter.png") no-repeat scroll 0 0 transparent;
color: transparent;
display: block;
height: 64px;
text-indent: -999em;
width: 64px;
}
.itemExtraFields li.id5 a {
background: url("../images/website.png") no-repeat scroll 0 0 transparent;
color: transparent;
display: block;
height: 64px;
text-indent: -999em;
width: 64px;
}

div.itemExtraFields li.id3, .itemExtraFields li.id4, .itemExtraFields li.id5 {
float: left;
}
div.itemExtraFields li.id3 .itemExtraFieldsLabel, .itemExtraFields li.id4 .itemExtraFieldsLabel, .itemExtraFields li.id5 .itemExtraFieldsLabel {
display: none;
What additional changes in item.php are needed to make it work ?

Thank you

Hi Sanjiv
If you have a look through my post above it tells you what lines in items.php to change, but if you do that you'll have to change your style names from .itemExtraFields li.id5 a to .itemExtraFieldsLabelwhatever (the whatever is the name of your field alias.
Andrew

Thanks - enclosed are the changes made in the item k2 file - I attempted to make the changes to my item.php file but unfortunately still not working



198.252.68.98/~fashionistas123/index.php/toronto/item/316-golnazashtiani


<?php if($params->get('itemExtraFields') && count($this->item->extra_fields)): ?>
<div class="itemExtraFields">
<h3><?php echo JText::_('K2_ADDITIONAL_INFO'); ?></h3>
<ul>
<?php foreach ($this->item->extra_fields as $key=>$extraField): ?>
<?php if($extraField->value): ?>
<?php if($extraField->id == 3) : ?>
<li class="odd"><span class="itemExtraFieldsLabel">Links</span></li>
<?php endif; ?>
<li class="<?php echo ($key%2) ? "odd" : "even"; ?> type<?php echo ucfirst($extraField->type); ?> group<?php echo $extraField->group; ?> id<?php echo $extraField->id; ?>">
<span class="itemExtraFieldsLabel"><?php echo $extraField->name; ?>:</span>
<span class="itemExtraFieldsValue"><?php echo $extraField->value; ?></span>
</li>
<?php if($extraField->id == 5) : ?>
<div style="clear:both;"></div>
<?php endif; ?>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>

you have
<span class="itemExtraFieldsLabel"><?php echo $extraField->name; ?>:</span>
Should be
<span class="itemExtraFieldsLabel<?php echo $extraField->alias; ?>"><?php echo $extraField->name; ?>:</span>

No offense but it's all in that post above.

Just updated the <?php echo $extraField->alias; ?>" in item.php and no change

I changed the class to div.itemExtraFieldsfacebook

Are you sure you set up the overides correctly? Because the page is showing the div as itemExtraFields still.
It should be in templates/yourtemplate/html/com_k2/templates/default(or your k2 template)/item.php

To see if its working put some text in the item.php page and see if it shows up on the site. Otherwise, I don't know what's up. Maybe run over that video about overrides above. Sorry, I don't know enough to tell you more.

Andrew

I was changing the code in the component item.php not override - copied the code to the template-item.php file

code should be working now but still not showing images for extra fields facebook, twitter and web

Looks like you're close, but it's not finding the style. Your style should look something like this:
.itemExtraFieldsLabelFacebook {
float: left;
width: 34px;
background-image: url(../../../images/template_images/facebook-icon.png);
background-repeat: no-repeat;
background-position: right top;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Put it in one of your template style sheets and change the width and file path etc.
Andrew

Thanks

almost there

198.252.68.98/~fashionistas123/index.php/toronto/item/372-christopher-bates

facebook is showing up - changed the css for twitter and web but still not showing up

and urls are still showing up

any suggestions :)

You must have just named the styles wrong. If you don't want to show the urls (the values). You do it the same way. Check out that top post again.

the styles are consistent with facebook
.itemExtraFieldsLabeltwitter
.itemExtraFieldsLabelsweb

.itemExtraFieldsValue {
display: none;
}
gets rid of all of the values for every extra field including ones i would like to display

to remove specific values with the code below does not work

.itemExtraFieldsValueFacebook {
display: none;
}

except it should be .itemExtraFieldsLabelTwitter (capital 'T')

Thanks - i tried that as well and did not work

Any suggestions would be appreciated - I have managed to publish facebook icons in place of the facebook extra field but unable to do the same for twitter and web icons

198.252.68.98/~fashionistas123/index.php...72-christopher-bates

Cheers

You have div.itemExtraFieldsLabelTwitter where it should be .itemExtraFieldsLabelTwitter

another approach would be this: gist.github.com/kricore/3ab3d73856417edf3689
You would have to be familiar with icon fonts.

Images are now displayed!!!

Unfortunately they do not link to the appropriate urls

198.252.68.98/~fashionistas123/index.php...72-christopher-bates

You need to change the way the fields are set up.
You need to consult your template developer about this.