QuickTip: Default Image

Although Connections does not support having a default image, this can easily be accomplished if the theme you’re using has a custom CSS area, which is a very common feature in themes now-a-days. And if your theme does not have a custom CSS area, you can use the Custom CSS Manager plugin. If you use the Custom CSS Manager plugin make sure to check out their video tutorial on adding custom CSS.

Here’s the CSS you’ll want to use:

div.cn-list span.cn-image-none {
	background-image: url("http://your-website.com/wp-content/uploads/path/to/the/image.jpg") !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: cover;
	/*border-radius: 50%; uncomment this line if you are using the Circled template */
}
 
div.cn-list span.cn-image-none span {
	display: none !important;
}

Of course you’ll want to change the URL in the above example to an image on your site.

Here’s a bonus tip…

You can use this trick to set a default image per category with this CSS:

div.category-slug span.cn-image-none {
	background-image: url("http://your-website.com/wp-content/uploads/path/to/the/image.jpg") !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: cover;
	/*border-radius: 50%; uncomment this line if you are using the Circled template */
}
 
div.cn-list span.cn-image-none span {
	display: none !important;
}

As before, you’ll want to change the URL to an image on your site. You will also have to change the category-slug to the category slug you want to set the default image. You can find the category slug on the Connections : Categories admin page.

And here’s a bonus, bonus tip! (double bonus on purpose)…

You can use use both of the examples above together. The first example would set the overall default image while the second would be used as a per category default image.

35 Responses to QuickTip: Default Image

Gary Smith 07/18/2012

That’s a great tip! Thanks…!!
- Gary Smith 07/18/2012
  
  I’m showing an image repeat?
  
  Would this work better?
  background-repeat:no-repeat;
  
  gs
  - Steven Zahm 07/18/2012
    
    @Gary Smith
    
    Yep, you’re right! when I was testing the tip I was using that … I forgot to copy it into the post. I’ve updated the code above.
    
    Thanks!
Shala 08/02/2012

Hmm…thanks for the response & the codes, but it’s not working for me. I’m very new to CSS (but I can follow directions! lol). I inserted and made the changes appropriate to my own url & slugs, but I don’t see an image. Any thing I can check that I might be doing wrong?

Thanks much!!
- Steven Zahm 08/02/2012
  
  @Shala
  
  Cool site!
  
  This tip probably isn’t working because you have disabled the output of the place holding image block. That needs to be on for this tip to work.
Shala 08/02/2012

Thanks!

I’m not sure what that means, but I will try and figure it out : )
- Steven Zahm 08/02/2012
  
  @Shala
  
  Reply back with one of the shortcodes you’re using and I’ll reply back with the change you need to make.

Shala 08/02/2012

Thanks for the awesome/quick responses–I’m working on the site as we speak, so this is a big help!!

Here’s the code to one of the pages:

[connections template=cmap width=500 show_empty_categories=false image_fallback=none page_limit=7 str_home_phone=Phone str_home_addr=Address: str_note_hide=Close str_note_head='More Info:' str_note_show=More Info category=56 category_in=76 category_in=57 enable_category_by_root_parent=true]

Steven Zahm 08/02/2012

@Shala

Just one change … remove the image_fallback=none option. Without the place hold block, the CSS in this tip will not work. Hope that make sense now.

[connections template=cmap width=500 show_empty_categories=false page_limit=7 str_home_phone=Phone str_home_addr=Address: str_note_hide=Close str_note_head='More Info:' str_note_show=More Info category=56 category_in=76 category_in=57 enable_category_by_root_parent=true]

Shala 08/02/2012

Thanks Steve, appreciate the help, but for whatever reason (I can’t figure it out–I checked the settings and fixed the code) it just does not want to work. : (
- Steven Zahm 08/02/2012
  
  @Shala
  
  It looks like you go it … at least on this page:
  http://playonlongisland.com/nassau-county-bike-riding-trails-long-island
Shala 08/02/2012

lol. That’s because I actually uploaded those pics individually before I got tired of doing that and decided to ask if there was a better/more efficient way.
Travis 08/24/2012

Here’s the CSS I used with the Slim template. There was no span around the text so I had to make the color transparent and adjust a few other CSS styles to get it to work.

.cn-left {
width: 140px !important;
}
div.cn-list div.cn-image-none {
text-shadow: none !important;
color: transparent !important;
width: 120px !important;
height: 150px !important;
padding: 10px !important;
margin: 0 !important;
border: none !important;
background-image: url(“/wp-content/images/default_directory_image.jpg”) !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}

Hope it helps!
- Travis 08/24/2012
  
  I’m back :) The above works perfectly for the default, but if I add an image it gets cropped way to small. I went into the Settings and adjusted the Thumb size to 120 x 150, and it seems to be cropping it at the 54px default.
  
  The site url is http://mypowhatan.idtestsite.com/directory/. It will be password protected within a couple days.
  
  The CSS I’ve added thus far is:
  
  .cn-left {
  width: 140px !important;
  height: 170px !important;
  }
  .cn-left .photo {
  padding: 10px !important;
  }
  .cn-right {
  padding-top: 10px !important;
  }
  div.cn-list div.cn-image-none {
  text-shadow: none !important;
  color: transparent !important;
  width: 120px !important;
  height: 150px !important;
  padding: 10px !important;
  margin: 0 !important;
  border: none !important;
  background-image: url(“/wp-content/images/default_directory_image.jpg”) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  }
Jhosie 09/22/2012

I cant seem to get this to work :-(
This is what I have on my CSS:

.cn-list span.cn-image-none {
background-image:url(“/wp-content/images/name-of-file.jpg”)!important;
background-position:center center!important;
background-repeat:no-repeat!important;}
.cn-entry span.cn-image-none p {
display:none!important;}
- Steven Zahm 09/22/2012
  
  @Jhosie
  
  That would be because none, of the supplied templates include the markup necessary for this to work. I’m working on the next release … I’ll be sure to add it to those templates.
  - Jhosie 09/24/2012
    
    Oh i see, thanks Steve.. Now i dont need to tear my hair out trying to get it to work :)
Luci Heller 04/24/2013

Works like a charm!!!!!!!!
Thanks so much!
Christian Driscoll 06/24/2013

Steve, where exactly do I insert this CSS? I am a novice here.
I am using CMAP – do I put it in the the cmap/cmap.ccs file (and if so where should I position it) or in the connections plugin – again where and in what file?
Also, what do I do to alter the code so I can render a default icon (in cmap)?
- Christian Driscoll 06/24/2013
  
  In last line I meant to indicate I would like to render a default logo (not icon).
  - Steven Zahm 06/24/2013
    
    @ Christian
    
    Put the CSS in the theme’s style.css file. At the end of the file will do.
Christian Driscoll 06/24/2013

Thanks. And as for including code to handle a default logo do would I repeat same code using “logo” instead of “image”min each occurrence?
- Steven Zahm 06/24/2013
  
  @ Christian
  
  Actually, no, sorry. The markup in the code that makes this work doesn’t distinguish between an image and logo when there is neither to display … it is just none. It never occurred to be to mark up the code so each could be targeted and no one has ever asked before … however … itr does make perfect sense. I’ve added it to my to do list. My best guess at an ETA would be sometime later this summer or so.
Alexandra Prats 07/10/2014

Hi!
I don’t have and I won’t have images. Can you tell me how to hide the photo? Is this possible?
Thank you!
Alexandra Prats 07/15/2014

I found the answer in the forum. Thanks!
Anna 12/04/2014

Hello! I’m using a custom template and I’m trying to get the image url so that I can use the image as a background image.

I have tried this:
<img src="getImageNameProfile(); ?>” alt=”Foto” />

It has worked before on another site but not any more. It gets the base url but not the image name.

I’ve also noticed that when I use the following code it only works on my localhost-computer but not on the hosting server. I’m guessing it has something to do with Imagick.

getImage( array( ‘preset’ => ‘profile’ ) ); ?>
Anna 12/04/2014

Some of the code was stripped from this post, I don’t how to show you all of it in this forum?
- Steven Zahm 12/04/2014
  
  @ Anna
  
  The getImageName… functions are actually probably broke at the moment. I didn’t refactor them after the the complete image logic overhaul that was part of the version 8.0 release. ou could use these functions instead:
  
  – https://github.com/Connections-Business-Directory/Connections/blob/8.1.5/includes/entry/class.entry-data.php#L3296
  – https://github.com/Connections-Business-Directory/Connections/blob/8.1.5/includes/entry/class.entry-data.php#L3341
  – https://github.com/Connections-Business-Directory/Connections/blob/8.1.5/includes/entry/class.entry-data.php#L3412
  
  Posting to the forums would be far better … comments really do not work for support. Thanks!
Jay Philips 04/27/2015

I added the code exactly as shown in the post (added my url of course) to the style sheet but I noticed that the image on the listing page overlaps the circle and on the profile page it still shows the text no image. If I make the image bigger to fill the circle it overlaps the circle as well on the profile page instead of being displayed behind the circle. Any ideas on how to resolve this?
- Steven Zahm 04/28/2015
  
  @ Jay
  
  Hmmm, I never actually tried it with the Circled template. Can you share a link so I can take a look?
  - Jay Philips 04/30/2015
    
    Yes, I’ll send you a message with the details as the sites not live right now but I can give you a login to see it.
    - Steven Zahm 05/02/2015
      
      @ Jay
      
      The CSS just needed a minor tweak. I made the changes to your site. I also updated the the CSS in this QuickTip to include those changes.
      
      Enjoy.
      - Jay Philips 05/02/2015
        
        Thank you so much for fixing it. It looks great.
James Savino 04/17/2018

I cannot get any logos to upload, they seem to upload to the Logo field, but when I update the entry I get nothing…
- Steven Zahm 04/18/2018
  
  Please use the support forums to post support related questions. Comments are not the best way to provide you with prompt support. Thanks!
  
  https://connections-pro.com/support/