- Posts: 7
COMMUNITY FORUM
- Forum
- K2 Community Forum
- English K2 Community
- Background Image changing for every Product detailed page
Background Image changing for every Product detailed page
- Santosh
- Topic Author
- Offline
- New Member
Less
More
8 years 2 months ago #157301
by Santosh
Background Image changing for every Product detailed page was created by Santosh
Hello,
Last week I started a Website using K2. Now i want to change the background image for every product detailed page with respective image.
Can any help me out on this? Click the below link and click any one of the product, when you are in that page, i would like to change the background for that pages with different different images.
workswellindia.com/clients/projects/boxcandle/our-fragrances
Looking forward to hear your reply.
Thanks,
Santosh
Last week I started a Website using K2. Now i want to change the background image for every product detailed page with respective image.
Can any help me out on this? Click the below link and click any one of the product, when you are in that page, i would like to change the background for that pages with different different images.
workswellindia.com/clients/projects/boxcandle/our-fragrances
Looking forward to hear your reply.
Thanks,
Santosh
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
- Offline
- Platinum Member
Less
More
- Posts: 15920
8 years 2 months ago #157347
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic Background Image changing for every Product detailed page
Hello Santosh,
You can use CSS in order to apply the background image.
However the template you are using does not offer a class on the body element.
You can ask the template's developer on how to apply a bodyclass where it will help you set new CSS rules.
You can use CSS in order to apply the background image.
However the template you are using does not offer a class on the body element.
You can ask the template's developer on how to apply a bodyclass where it will help you set new CSS rules.
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Santosh
- Topic Author
- Offline
- New Member
Less
More
- Posts: 7
8 years 2 months ago #157471
by Santosh
Replied by Santosh on topic Background Image changing for every Product detailed page
Hi Krikor,
Thank you so much for your reply. Krikor my concern is when you click Our Fragrances you will some Products which is Item Detailed page.
Background image is already there for every Item which is same image, but now we need different background images for every Item detailed page. Not a same image repeating for every Item detailed page.
I hope you got it now, what I am saying?
workswellindia.com/clients/projects/boxcandle/our-fragrances/item/9-white-rose-1
workswellindia.com/clients/projects/boxcandle/our-fragrances/item/8-white-rose-2
workswellindia.com/clients/projects/boxcandle/our-fragrances/item/7-white-rose-3
Note: Need different background image, dynamic option because we will add products every time. Please help me how to do that.
Thanks,
Santosh
Thank you so much for your reply. Krikor my concern is when you click Our Fragrances you will some Products which is Item Detailed page.
Background image is already there for every Item which is same image, but now we need different background images for every Item detailed page. Not a same image repeating for every Item detailed page.
I hope you got it now, what I am saying?
workswellindia.com/clients/projects/boxcandle/our-fragrances/item/9-white-rose-1
workswellindia.com/clients/projects/boxcandle/our-fragrances/item/8-white-rose-2
workswellindia.com/clients/projects/boxcandle/our-fragrances/item/7-white-rose-3
Note: Need different background image, dynamic option because we will add products every time. Please help me how to do that.
Thanks,
Santosh
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
- Offline
- Platinum Member
Less
More
- Posts: 15920
8 years 2 months ago #157484
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic Background Image changing for every Product detailed page
In order to use dynamic backgrounds you can either use a JS solution which populates the data from the value of an extrafields, or you need a custom K2 plugin.
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Santosh
- Topic Author
- Offline
- New Member
Less
More
- Posts: 7
8 years 2 months ago #157520
by Santosh
Replied by Santosh on topic Background Image changing for every Product detailed page
Dear Krikor,
Thank you so much for your reply. Krikor can you able to suggest the exact Plugin? Because we already using Paid K2 Component and we didnt find any solution to change the Background images for every product item.
If you can suggest it whether Paid or free it will help us. And I didn't understand about JS Solution. I am not getting how it will work.
Please help me.
Thanks,
Santosh
Thank you so much for your reply. Krikor can you able to suggest the exact Plugin? Because we already using Paid K2 Component and we didnt find any solution to change the Background images for every product item.
If you can suggest it whether Paid or free it will help us. And I didn't understand about JS Solution. I am not getting how it will work.
Please help me.
Thanks,
Santosh
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
- Offline
- Platinum Member
Less
More
- Posts: 15920
8 years 2 months ago #157542
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic Background Image changing for every Product detailed page
K2 is free, has been and will be free.
What did you pay exactly?
The plugin unfortunately has to be a custom K2 plugin.
You can find an example here getk2.org/extend/extensions/90-example-k2-plugin-for-developers
Alternatively you can use jQuery's data() function api.jquery.com/data/ in order to populate the data of an extrafield - github.com/kricore/Advanced-templating-with-K2/blob/master/_inc/cheatsheet.php#L104-L109 in order to grab the image's URL and use it to create an inline CSS rule.
What did you pay exactly?
The plugin unfortunately has to be a custom K2 plugin.
You can find an example here getk2.org/extend/extensions/90-example-k2-plugin-for-developers
Alternatively you can use jQuery's data() function api.jquery.com/data/ in order to populate the data of an extrafield - github.com/kricore/Advanced-templating-with-K2/blob/master/_inc/cheatsheet.php#L104-L109 in order to grab the image's URL and use it to create an inline CSS rule.
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Santosh
- Topic Author
- Offline
- New Member
Less
More
- Posts: 7
8 years 2 months ago #157615
by Santosh
Replied by Santosh on topic Background Image changing for every Product detailed page
Hi Kirkor,
Thank you so much for your reply. As per your suggestion, we tried it but we are looking for whole background image not just image. We added extra field but we need whole website background image for the product item, similar way we can able to change the whole page background image not inserting image.
Check the below link once, we added one image on leftside above the description but it is not coming along as we are thinking.
Please help me.
workswellindia.com/clients/projects/boxcandle/our-fragrances/item/8-white-rose-2
Awaiting for your reply.
Thanks,
Santosh
Thank you so much for your reply. As per your suggestion, we tried it but we are looking for whole background image not just image. We added extra field but we need whole website background image for the product item, similar way we can able to change the whole page background image not inserting image.
Check the below link once, we added one image on leftside above the description but it is not coming along as we are thinking.
Please help me.
workswellindia.com/clients/projects/boxcandle/our-fragrances/item/8-white-rose-2
Awaiting for your reply.
Thanks,
Santosh
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
- Offline
- Platinum Member
Less
More
- Posts: 15920
8 years 2 months ago #157641
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic Background Image changing for every Product detailed page
Use this code as a starting point.
The PHP part in the item.php file:
The JavaScript part:
If you are using an image extrafield then you should probably read this post:
getk2.org/documentation/tips-a-tricks/1129-extra-field-image-type-as-link
The PHP part in the item.php file:
<?php
// Render a specific extrafield
if( isset( $this->item->extraFields->EXTRAFIELDALIASHERE->value ) && ( $this->item->extraFields->EXTRAFIELDALIASHERE->value !== '') )
{ ?>
<div id="ID_WHICH_EF_IS_RENDERED" data-bgimage="<?php echo $this->item->extraFields->EXTRAFIELDALIASHERE->value; ?>"></div>
<?php } ?>
The JavaScript part:
<script>
(function($)){
$(document).ready(function(){
if( $('#ID_WHICH_EF_IS_RENDERED').length ) {
// add the data-image="EXTRAFIELD_VALUE" on the template.
var bgImage = $('#ID_WHICH_EF_IS_RENDERED').data('bgimage');
// Set the desired element's css style
$('ELEMENT_YOU_NEED_TO_SET_BG').css('background-image', bgImage);
}
});
})(jQuery);
</script>
If you are using an image extrafield then you should probably read this post:
getk2.org/documentation/tips-a-tricks/1129-extra-field-image-type-as-link
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Santosh
- Topic Author
- Offline
- New Member
Less
More
- Posts: 7
8 years 2 months ago #157649
by Santosh
Replied by Santosh on topic Background Image changing for every Product detailed page
Hi Krikor,
Thank you so much, I will try with this and Krikor I need another help. Below is the link for design and can we get the image functionality same as the screenshot for K2 with dynamic?
imgur.com/a/OiWNK
Looking forward to hear your reply.
Thanks,
Santosh
Thank you so much, I will try with this and Krikor I need another help. Below is the link for design and can we get the image functionality same as the screenshot for K2 with dynamic?
imgur.com/a/OiWNK
Looking forward to hear your reply.
Thanks,
Santosh
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
- Offline
- Platinum Member
Less
More
- Posts: 15920
8 years 2 months ago #157652
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic Background Image changing for every Product detailed page
You can get this design with K2, but you have to use an extrafield which stores a gallery or you need the Simple Image Gallery Pro extension and some template tweaks.
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Forum
- K2 Community Forum
- English K2 Community
- Background Image changing for every Product detailed page