Keyword

Background Image changing for every Product detailed page

  • Santosh
  • Santosh's Avatar Topic Author
  • Offline
  • New Member
More
8 years 2 months ago #157301 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

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 2 months ago #157347 by Krikor Boghossian
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.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

  • Santosh
  • Santosh's Avatar Topic Author
  • Offline
  • New Member
More
8 years 2 months ago #157471 by Santosh
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

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 2 months ago #157484 by Krikor Boghossian
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
  • Santosh's Avatar Topic Author
  • Offline
  • New Member
More
8 years 2 months ago #157520 by Santosh
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

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 2 months ago #157542 by Krikor Boghossian
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.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

  • Santosh
  • Santosh's Avatar Topic Author
  • Offline
  • New Member
More
8 years 2 months ago #157615 by Santosh
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

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 2 months ago #157641 by Krikor Boghossian
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:
<?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
  • Santosh's Avatar Topic Author
  • Offline
  • New Member
More
8 years 2 months ago #157649 by Santosh
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

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 2 months ago #157652 by Krikor Boghossian
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.


Powered by Kunena Forum