Using different image backgrounds in different sections

Resolved tryspecials
(@tryspecials)

10 years, 10 months ago
Hi,

Customizr is an amazing theme and I just loved this sections feature. Hats off to you Nicolas.

I am trying to use multiple backgrounds for different sections that I have. I have changed
thumb_src from lorempixel url to my image url and now randimages picks up the image that I have provided. How do I use different images rather than just randimages.

I also tried doing something like this but it still didn’t work. I still get the image on page-id 158 from randimages.
```
'background' 	=> array( 155 => 'randimages' , 161 => '#fcfcfc', 24 => '#ffffff' , 158 => 'image_url' )
```
```
$my_sections_args = array(
	'ids' 			=> array(155 , 161, 24, 158), // here are the pages I need there (dontjusteat, ourstory, options, social)
	'blur' 			=> 0,
	'background' 	=> array( 155 => 'randimages' , 161 => '#fcfcfc', 24 => '#ffffff' , 158 => 'randimages' ),//'randcolors'
	'context'		=> 153,
	'hook' 			=> '__before_main_wrapper',
	'apply_shadow' 	=> false,
	'layout' 		=> 'boxed',
);
```
Sorry gentlemen I am not able to share the website since I am still working on local.

Thanks,
Rohit

Viewing 6 replies - 1 through 6 (of 6 total)

Thread Starter tryspecials
(@tryspecials)

10 years, 10 months ago

Hi,

I have this working dev version here http://dev.tryspecials.com/

Since it is a dev version I have it protected with the below credentials.
username: guest
pass: guest

I want to use a different image in the fourth section. How do I do that? Any help is great.

Thanks,
Rohit

Martonno
(@martonno)

10 years, 10 months ago

Hi tryspecials,

have you tried using “158 => ‘thumb'” which should show the post or page featured image?

Thread Starter tryspecials
(@tryspecials)

10 years, 10 months ago

Yeah Martonno I tried that but I can only assign one image value to the “thumb”. I am trying to give a custom image of my own using something like below. So that I can change the image to whatever I want.

“158 => url(image url)”
Martonno
(@martonno)

10 years, 10 months ago
hm, weird…
i just set it up and it seems that it correctly gets the img from the post.

You have to edit the function then.
Try the following:
```
$attachment_id 	= has_post_thumbnail($post_id) ? get_post_thumbnail_id( $post_id ) : false ;
	$thumb_src 		= 'http://lorempixel.com/g/900/500/city/' .$i ;
	$thumb_src 		= ( ! $is_rand_image && false != $attachment_id ) ? wp_get_attachment_image_src( $attachment_id, 'large', false ) : $thumb_src;
	$thumb_src 		= is_array($thumb_src) ? $thumb_src[0] : $thumb_src;
//insert
	if(isset($background[$post_id]) && false !== strpos($background[$post_id], 'http')){
		$thumb_src =  $background[$post_id];
	} else if(isset($background[$post_id]) && false !== strpos($background[$post_id], '/')){
	$thumb_src =  site_url() . $background[$post_id];
	}
//end insert
	return sprintf('.custom-section-%1$s .custom-section-background {background: url("%2$s") no-repeat center center fixed;-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }',
		$post_id,
		$thumb_src
	);
```
then use
158 => ‘/wp-content/uploads/2015/05/myimage.jpg’
or
158 => ‘http://myurl.com/wp-content/uploads/2015/05/myimage.jpg’
Martonno
(@martonno)

10 years, 10 months ago
Ups, better insert
```
if(isset($background[$post_id]) && 0 === strpos($background[$post_id], 'http')){
	$thumb_src =  $background[$post_id];
} else if(isset($background[$post_id]) && 0 === strpos($background[$post_id], '/')){
	$thumb_src =  site_url() . $background[$post_id];
}
```
to check if the provided string starts with “http” or “/” and not just contains it.
Thread Starter tryspecials
(@tryspecials)

10 years, 10 months ago

Thanks Martonno, this is very helpful. It worked wonderfully, I haven’t put it online yet but it works on local just perfect.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Using different image backgrounds in different sections’ is closed to new replies.

Tags