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.
That’s a great tip! Thanks…!!
I’m showing an image repeat?
Would this work better?
background-repeat:no-repeat;
gs
@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!
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!!
@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.
Thanks!
I’m not sure what that means, but I will try and figure it out : )
@Shala
Reply back with one of the shortcodes you’re using and I’ll reply back with the change you need to make.
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]
@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.
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. : (
@Shala
It looks like you go it … at least on this page:
http://playonlongisland.com/nassau-county-bike-riding-trails-long-island
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.
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!
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;
}
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;}
@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.
Oh i see, thanks Steve.. Now i dont need to tear my hair out trying to get it to work :)
Works like a charm!!!!!!!!
Thanks so much!
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)?
In last line I meant to indicate I would like to render a default logo (not icon).
@ Christian
Put the CSS in the theme’s style.css file. At the end of the file will do.
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?
@ 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.
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!
I found the answer in the forum. Thanks!
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’ ) ); ?>
Some of the code was stripped from this post, I don’t how to show you all of it in this forum?
@ 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!
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?
@ Jay
Hmmm, I never actually tried it with the Circled template. Can you share a link so I can take a look?
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.
@ 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.
Thank you so much for fixing it. It looks great.
I cannot get any logos to upload, they seem to upload to the Logo field, but when I update the entry I get nothing…
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/