Hiya,
Just want to say thank you for the help in my previous threads.
I'm after some instructions on how I can display the amount of images on the a main website.
For example to have it saying:
"We have over *insert number* photos in our gallery"
Thank ya
Bumping this. Hopefully someone can help!
You can use jquery load function to load anything you want from a page in another page.
Is not a coppermine way,but is the only way I know.
1.add this in the head of the page (the page where you want to show the stats):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready( function() {
$( "#showStats" ).load( "http://your_gallery_link/index.php .statlink" );
});
</script>
2.add an empty p tag on the page at the location you want to show the stats <p id="showStats"></p>
this way jquery load will load in p id showStats index.php page just the div statlink.
10 files in 2 albums and 2 categories with 10 comments viewed 4 times
If you already have jquery loding on your website page then you can delete from the code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
ABOUT JQUERY LOAD: https://api.jquery.com/load/ (https://api.jquery.com/load/)
If the page you want to display counts on is PHP... And you already have a connection to the database used by Cooperative, a simple SQL statement:
SELECT COUNT ( * ) FROM cpg_pictures
(where cpg_ is replaced by your table prefix) is all you need to get the count...)
If you need more detailed code or to connect to DB, easy to provide... If not on same site, or page isn't PHP - then a different solution is needed.
Quote from: allvip on February 28, 2014, 11:14:50 AM
You can use jquery load function to load anything you want from a page in another page.
Is not a coppermine way,but is the only way I know.
1.add this in the head of the page (the page where you want to show the stats):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready( function() {
$( "#showStats" ).load( "http://your_gallery_link/index.php .statlink" );
});
</script>
2.add an empty p tag on the page at the location you want to show the stats <p id="showStats"></p>
this way jquery load will load in p id showStats index.php page just the div statlink.
10 files in 2 albums and 2 categories with 10 comments viewed 4 times
If you already have jquery loding on your website page then you can delete from the code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
ABOUT JQUERY LOAD: https://api.jquery.com/load/ (https://api.jquery.com/load/)
I tried this, and got it to show but as mentioned in your post it shows the complete stats. I just need the number of photos as the full stats expands out of the text field and messed up my layout.
Quote from: gmc on February 28, 2014, 01:22:42 PM
If the page you want to display counts on is PHP... And you already have a connection to the database used by Cooperative, a simple SQL statement:
SELECT COUNT ( * ) FROM cpg_pictures
(where cpg_ is replaced by your table prefix) is all you need to get the count...)
If you need more detailed code or to connect to DB, easy to provide... If not on same site, or page isn't PHP - then a different solution is needed.
It's on a wordpress page in the header.php file. So the DB connects to wordpress and not CPMG. Not sure exactly where to put that code either!
gmc solution is better but I will post how to hide with css the words:files in 2 albums and 2 categories with 10 comments viewed 4 times and show only 10
I will work on it now.check after 15 minutes.
Quote from: allvip on February 28, 2014, 04:32:49 PM
gmc solution is better but I will post how to hide with css the words:files in 2 albums and 2 categories with 10 comments viewed 4 times and show only 10
I will work on it now.check after 15 minutes.
Thank ya! Can't wait for it. Can you please possibly add a bold colour for the number in the CSS that I can edit as well as it comes up bold black which make it look awful on my site.
QuoteIt's on a wordpress page in the header.php file. So the DB connects to wordpress and not CPMG. Not sure exactly where to put that code either!
If wordpress and CPG are in the same database - just different tables - you can use the Wordpress DB connection (just need their variable that contains the db resource link id...
Or you can connect to the CPG database yourself if it is at least on the same server (or remotely available).
Your CPG file include/config.inc.php has all the info you need to pass to MySQL to connect - and your table prefix for the SQL call.
I haven't worked with Wordpress to know what they do... Does the header code already make database calls?
If you attach the code to a post - I can point you in right direction at least...
(I need to fix my spelling checker on my tablet that keeps changing Coppermine to Cooperative... sigh... thought I caught them all...)
Greg
This is the html structure of your tag p id showStats (you can see it with firefox inspect element or firebug firefox addon)
<p id="showStats">
<span class="statlink">
<strong>980</strong>
files in
<strong>88</strong>
albums and
<strong>60</strong>
categories with
<strong>17</strong>
comments viewed
<strong>488</strong>
times
</span>
</p>
So you can add to your .css file :
#showStats .statlink strong{display:none;} to hide all the strong tags.
#showStats .statlink strong:first-child{display:block;color:#5A7E9F;font-weight:bold;font-size:100%;line-height:100%;} to show only the first strong tag.
but the words files in,albums and...are not a p tag or any other html tag so you can not give it display:none.
the only think you can do is overflow:hidden; and color transparent to the text:
#showStats {width:5%;height:20px;overflow:hidden;border:1px solid #900;} to give a size to the p tag.this way you can hide with overflow hidden all the content that does not fits in showStats.
#showStats .statlink{color:transparent;}
I added a border to showStats so you can see how much space it takes on the page.Delete it when you done.
This is what you shoud add to your .css file Above I explained to you every ccs rule I used and why.
#showStats {width:5%;height:20px;overflow:hidden;border:1px solid #900;}
#showStats .statlink{color:transparent;}#showStats .statlink strong{display:none;}#showStats .statlink strong:first-child{display:block;color:#5A7E9F;font-weight:bold;font-size:100%;line-height:100%;}
see the attachment to view my result (I have 980 images in my test gallery)
before p id ShowStats you can add We have over and after photos in our gallery
edit the width and height values with the numbers that fits (same for other values:edit them to fit your page).I used very small values that are fine for my page but maybe to small for you.
use %,em,rem or px (WHATEVER YOU LIKE) for width,fontsize etc. % and rem are responsive.you can use even 150% or 80%.
Go with gmc solution if it works for you.is much better.
Here you can find all the css rules to add background color,font family etc to your pages.
http://www.w3schools.com/css/ (http://www.w3schools.com/css/)
or type css background color in google to find how to write it in your css
Sorry for the late response.I had a visit.
If you want me to help you style it the way you want to look and add the words you have in your gallery...just say exaxty how and what you want.
A link to your page to see the structure of your divs is even better if is ok for you.
You can use jquery load to load any div or other tags from a coppermine page in to your wordpress pages and with css you can change the way it looks to look diffrent(not like on the gallery but smaller or with diffrent colors etc).
Quote from: allvip on February 28, 2014, 06:00:05 PM
This is the html structure of your tag p id showStats (you can see it with firefox inspect element or firebug firefox addon)
<p id="showStats">
<span class="statlink">
<strong>980</strong>
files in
<strong>88</strong>
albums and
<strong>60</strong>
categories with
<strong>17</strong>
comments viewed
<strong>488</strong>
times
</span>
</p>
So you can add to your .css file :
#showStats .statlink strong{display:none;} to hide all the strong tags.
#showStats .statlink strong:first-child{display:block;color:#5A7E9F;font-weight:bold;font-size:100%;line-height:100%;} to show only the first strong tag.
but the words files in,albums and...are not a p tag or any other html tag so you can not give it display:none.
the only think you can do is overflow:hidden; and color transparent to the text:
#showStats {width:5%;height:20px;overflow:hidden;border:1px solid #900;} to give a size to the p tag.this way you can hide with overflow hidden all the content that does not fits in showStats.
#showStats .statlink{color:transparent;}
I added a border to showStats so you can see how much space it takes on the page.Delete it when you done.
This is what you shoud add to your .css file Above I explained to you every ccs rule I used and why.
#showStats {width:5%;height:20px;overflow:hidden;border:1px solid #900;}
#showStats .statlink{color:transparent;}#showStats .statlink strong{display:none;}#showStats .statlink strong:first-child{display:block;color:#5A7E9F;font-weight:bold;font-size:100%;line-height:100%;}
see the attachment to view my result (I have 980 images in my test gallery)
before p id ShowStats you can add We have over and after photos in our gallery
Hey man. I tried adding the CSS and updating the p code, however it literally just shows nothing different. Still the same bunch of text and numbers.
Quote from: gmc on February 28, 2014, 05:34:30 PM
If wordpress and CPG are in the same database - just different tables - you can use the Wordpress DB connection (just need their variable that contains the db resource link id...
Or you can connect to the CPG database yourself if it is at least on the same server (or remotely available).
Your CPG file include/config.inc.php has all the info you need to pass to MySQL to connect - and your table prefix for the SQL call.
I haven't worked with Wordpress to know what they do... Does the header code already make database calls?
If you attach the code to a post - I can point you in right direction at least...
(I need to fix my spelling checker on my tablet that keeps changing Coppermine to Cooperative... sigh... thought I caught them all...)
Greg
They run off two different databases with different usernames and passwords, both on localhost as the host though. As for the header.php as far as I can see it doesn't call any SQL connection. WP runs off a config.php file, not sure what .php file pulls it though.
If either if you have an E-Mail I can send you my sites link and are willing to help out, I'd be much appreciative!
You only have to add :
#showStats {width:5%;height:20px;overflow:hidden;border:1px solid #900;}
#showStats .statlink{color:transparent;}#showStats .statlink strong{display:none;}#showStats .statlink strong:first-child{display:block;color:#5A7E9F;font-weight:bold;font-size:100%;line-height:100%;}
forget about what I wrote above-is just an explanation
do not update the p code.let it like I sayd in reply#2.
Quote from: allvip on February 28, 2014, 07:44:04 PM
do not update the p code.let it like I sayd in reply#2.
Ok so my code is:
We are home to a gallery with over <p id="showStats"></p> just for you!
with this in the .css:
#showStats {width:5%;height:20px;overflow:hidden;border:1px solid #900;}
#showStats .statlink{color:transparent;}#showStats .statlink strong{display:none;}#showStats .statlink strong:first-child{display:block;color:#5A7E9F;font-weight:bold;font-size:100%;line-height:100%;}
It still shows this though :S:
We are home to a gallery with over
2,401 files in 186 albums and 26 categories with 0 comments viewed 66,790 times
just for you!
:(
Please can I see your website?
Quote from: allvip on February 28, 2014, 07:55:38 PM
Please can I see your website?
I can't PM you. Do you have an E-Mail I can link it to you? I'd rather not post on here.
allvip.us@gmail.com
I think you see a old version of your page because I see that it worked.
it only needs to be in the right position (without all that space around it.I will help you to do that),more width to #showStats maybe 10% and if the number will be bigger then like 10.000 even 30%
thanks for allowing me to see your website.is easier to help you this way.
Quote from: allvip on February 28, 2014, 08:35:10 PM
I think you see a old version of your page because I see that it worked.
it only needs to be in the right position (without all that space around it.I will help you to do that),more width to #showStats maybe 10% and if the number will be bigger then like 10.000 even 30%
thanks for allowing me to see your website.is easier to help you this way.
I've set it to 8% (will update as I get to double figures). Any way to get it as the same colour, text and size as the other text in the box where it is? Also there's a huge gap above and below the numbers. How do we fix that? :D
Yes.I am going to do all now.please wait 10 minutes to make the code for you.
Quote from: allvip on February 28, 2014, 08:44:25 PM
Yes.I am going to do all now.please wait 10 minutes to make the code for you.
Alright. Thank you :)
I just realised that you don't need to load all the .statlink div but just the strong tag.
replace my code from reply#2 with:
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script>
$(document).ready( function() {
$( "#showStats" ).load( "http://allvip.us/cpg/test/index.php .statlink strong" );
});
</script>
replace my code from reply#14 with:
#showStats{display:inline;padding:0 0.5rem 0 0.5rem;}
#showStats strong{display:none;}#showStats strong:first-child{display:inline;font-weight:normal;font-family:Arial,sans-serif;font-size:11px;color:#666;line-height:18px;}
I think you can delete:
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
from the code.I see your website already has jquery 1.7.1 and 1.6 loding on the page so my code should work with out that line from the code.
please try:
<script>
$(document).ready( function() {
$( "#showStats" ).load( "http://allvip.us/cpg/test/index.php .statlink strong" );
});
</script>
Quote from: allvip on February 28, 2014, 09:18:38 PM
I just realised that you don't need to load all the .statlink div but just the strong tag.
replace my code from reply#2 with:
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script>
$(document).ready( function() {
$( "#showStats" ).load( "http://allvip.us/cpg/test/index.php .statlink strong" );
});
</script>
replace my code from reply#14 with:
#showStats{display:inline;padding:0 0.5rem 0 0.5rem;}
#showStats strong{display:none;}#showStats strong:first-child{display:inline;font-weight:normal;font-family:Arial,sans-serif;font-size:11px;color:#666;line-height:18px;}
Just one thing, there'a bit of a gap to the side of it. Is there any way to fix that? I'm happy with how it is though now anyways.
Thank you SO MUCH. I really do appreciate your help!
With this code you don't need to update if the number will be 10 000
Do you want the number to stand out from the text:change font-weight:normal; to font-weight:bold;
you can change even font-size:11px; to font-size:20px; if you want the number to be bigger.
you can underline it or add a border dotted under it,or a background color.
If you want anything diffrent you can always ask.is no trouble.
I like how your website and gallery looks.nice work.
QuoteJust one thing, there'a bit of a gap to the side of it. Is there any way to fix that?
change padding:0 0.5rem 0 0.5rem; to padding:0 0.2rem 0 0.2rem;
you can use even pixels:padding:0 5px 0 5px;
or just delete padding:0 0.5rem 0 0.5rem; from the code.I think is ok even without.
Quote from: allvip on February 28, 2014, 09:46:02 PM
change padding:0 0.5rem 0 0.5rem; to padding:0 0.2rem 0 0.2rem;
you can use even pixels:padding:0 5px 0 5px;
or just delete padding:0 0.5rem 0 0.5rem; from the code.I think is ok even without.
I changed it to 0.0.1 and it looks much neater. Thank you again for all your help!
You can even change padding:0 0.5rem 0 0.5rem; to padding:0px;This way will have 0px padding for all 4 values(top,right,bottom,left.).
padding:0 0.5rem 0 0.5rem; means 0 gap to top,0.5 gap to right 0 gap to bottom and 0.5 gap to left.
You can add even margin:0px; to the code.
Please keep in mind that allvip's solution just works if your users have JavaScript enabled.
hello
Thank you for your informations.
but i have questions about the function <p id="showStats"></p>
I put on my index page the different elements and it's ok but the informations is on a line.
Can you explaine-me where i can find the element in order to change it.
My goal is show the informations like that:
- 12,611 photos
- 805 albums
- 45 catégories...
=> http://ddstv.fr/ on my index i write the informations manually.
I'm sorry i y do mistakes in english, i'm french.
I can see jquery 1.4.2 is loding on your page.
1.add in the head of your page (<head></head> tags):
<script>
$(document).ready( function() {
$( "#showStats" ).load( "http://ddstv.fr/galerie/index.php .statlink" );
});
</script>
2.add to your_page_style.css:
.statlink p {
display: block;
margin: 0px;
padding: 0px;
}
.statlink p strong {
display: inline;
}
.statlink strong {
display: none;
}
3.add: <p id="showStats"></p> where you want the stats to show on your page.
4.Open http://ddstv.fr/galerie/lang/english.php find:
$lang_list_categories['stat1'] = '[pictures] files in [albums] albums and [cat] categories with [comments] comments viewed [views] times'; // do not translate the stuff in square brackets
and replace with:
$lang_list_categories['stat1'] = '<p>[pictures] files </p><strong>in</strong> <p>[albums] albums </p><strong>and</strong> <p>[cat] categories </p><strong>with</strong> <p>[comments] comments</p><p> viewed [views] times</p>'; // do not translate the stuff in square brackets
5.add to themes/curve/style.css :
.statlink p,.statlink strong {
display: inline;
}
If your users can view your gallery in their own language (Autodetect language is ON in Config) then you need to edit all the language files.
I don't know any other way.
If you don't want to edit english.php then follow step1,step2 and step 3 and replace step 3 with:
.statlink strong {
display: block;
}
and you will have: see the image I attached.
Hello!
Thank you for your help it's working on mys page test! Now i have to do my new style.
:)