WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: elfinlay on December 16, 2015, 07:19:01 AM
-
Hello,
I have a question about Bs_Naturak. I have the slider up and running, the images correspond to the captions, and the links go to the correct pages.
However, I can't seem to get the linked pages to display the corresponding images. Eg: page 34 displays slide2.jpg, but its link on the slider displays slide3.jpg. Is it possible to fix this?
My code is below:
This is the code from miniheader.php:
<?php
if(!defined('WB_URL')) { header('Location: ../../../index.php'); exit(0); }
$slidenr = ($page_id % 3) + 1
?>
Here is the code from index.php (I've linked the images through the media directory so others can upload easily. They are displaying fine) :
$slider_page_ids = '28,26,34';
$slider_image_base = MEDIA_DIRECTORY.'/slide'; // added: number + .jpg
Any suggestions anyone could give me would be greatly appreciated.
Many thanks,
Emily.
-
it looks like a little error, when the script count the array $slider_page_ids or in the picture names
i've written a german description about this problem and try to translate this
the original-code count the parts of the array $slider_page_ids. your code
$slider_page_ids = '28,26,34';means, show me the pics slide28.jpg, slide26.jpg, slide34.jpg as slide1.jpg, slide2.jpg, slide3.jpg, named as slide+number + .jpg, located in the defined folder
$slider_image_base = WB_URL.MEDIA_DIRECTORY.'/slide'
why slide1.jpg, slide2.jpg, slide3.jpg?
its the number of the array-key
for more specific definition ($slider_page_ids == your wished page-links to the pages with id == 28, 26 or 34
go to the file snippets/responsive-slider.php and change the line 44 from $nr = $i; to $nr = $page_id;
and rename the pictures to the needed page_id
example
picture slide3.jpg is the wished pic for page with id == 34, so rename it to slide34.jpg
-
why slide1.jpg, slide2.jpg, slide3.jpg?
its the number of the array-key
There is a simple reason:
The Template does not know, which page you will have in $slider_page_ids
So there are some example numbers.
Of course the best would be to use picture like $page_id + ".jpg"
But in this case, the Template would have to contain masses of pictures.
See /templates/bs-naturak/snippets/responsiveslides.php
while($page = $query_pages->fetchRow()) {
$i++;
$page_id = $page['page_id'];
$nr = $i; //Use $page_id OR $i for picture numbers. $i (1, 2, 3...) is easier to handle, $page_id is mor specific.
...
simple replace $nr = $i; with $nr = $page_id;
Better replace all $page_id with $p_id to prevent from conflicts
-
Thanks both for taking the time to reply. It is greatly appreciated!
I've tried changing the slide numbers to accord with the desired page numbers and replaced $nr = $i; to $nr = $page_id; in the responsive-slider.php file.
When I do this, the slider images load in the correct order, however the static images on the pages do not correspond. Eg: page 26 displays slide34 and page 34 displays slide26.
I then tried replacing all $page_id with $p_id to prevent conflicts, as suggested by fischstäbchenbrenne r.
When I do this, though, all pages have the slider as a header, rather than static images.
Here is some more of the code from index.php:
if (!isset($p_id) OR $p_id==4 OR $p_id==4) {
include('snippets/responsiveslides.php');
include('snippets/nav.php');
include('snippets/site-headline.php');
} else {
include('snippets/miniheader.php');
include('snippets/nav.php');
}
include('snippets/playground.php');
include('snippets/2col-content.php');
Once again, I'm very grateful for your responses!
-
I've just discovered something that is probably related to the source the problem.
I have redirected the slider to the MEDIA folder, rather than the bs_naturak/img folder in the TEMPLATE_DIR.
I have changed the code as below:
$slider_page_ids = '26,28,34';
$slider_image_base = MEDIA_DIRECTORY.'/slide'; // added: number + .jpg
As I said, this makes the images display in the slider fine. However, I have just noticed that if I go back to the templates/bs_naturak/img folder and rename the slide files to correspond to the pages (slide26.jpg, slide28.jpg, slide34.jpg) they disappear altogether.
This seems to suggest that, while the slider is calling on the media folder, the pages are calling on the templates/bs_naturak/img folder.
I can't seem to locate any other instances of TEMPLATE_DIR.'/img/slide' // added: number + .jpg in the code.
Would anybody be able to tell me whether there is a separate call to the templates/bs_naturak/img folder for the page header images?
Many thanks, again.
-
i can say now: read my post, every needed information is there :wink:
TEMPLATE_DIR is the complete URL to the active frontend-Template, but
MEDIA_DIRECTORY is only the name of the folder "media", you need the complete URL, like
$slider_image_base = WB_URL.MEDIA_DIRECTORY.'/slide'
if you like a subdirectury in your media-folder, maybe called "my_slides", the URL to the pics must be
$slider_image_base = WB_URL.MEDIA_DIRECT ORY.'/my_slides/slide'
if this path is not correct or the called pictures doesnt exist, it look's like the slider is not implemented on this or on all pages
your code and $p_id
$page_id is a fix variable with the ID from the actual page, come's from the core.
$p_id is only needed in the file snippets/responsive-slider.php to build the links, do not change $page_id in the index.php of the template
use in the next line $page_id again, because $p_id is not defined and it show's the slider on every page
if (!isset($page_id) OR $page_id==4 OR $page_id==4) {
if (!isset.... means: if the variable between () is not avaiable on this point
without ! like
if (isset.... means: if the variable between () avaiable on this point - (not used here)
the first OR $page_id==4 means together with the first part: if we have not defined a Page-ID or the Page-ID (from the actual page) is 4
the second OR $page_id==4 is not needed, if its means the same Page-ID like the first question, its only neeeded for different Page-ID's
if (!isset($page_id) OR $page_id==4 OR $page_id==6) {
All this together means
if we have no page_id or i am on the page with ID=4 or on page with ID = 6 , please show the slider
and after the }else{
on the page with ID=4 or on page with ID = 6 show no slider
-
example for the case "show the slider not on Page with ID=4 or ID=6, but on all other pages
if ($page_id != 4 OR $page_id != 6) {
include('snippets/responsiveslides.php');
include('snippets/nav.php');
include('snippets/site-headline.php');
} else {
include('snippets/miniheader.php');
include('snippets/nav.php');
}
include('snippets/playground.php');
include('snippets/2col-content.php');
-
Thank you so much for this comprehensive reply, jacobi22!
Quote
$slider_image_base = WB_URL.MEDIA_DIRECT ORY.'/my_slides/slide'
if this path is not correct or the called pictures doesnt exist, it look's like the slider is not implemented on this or on all pages
I have followed all of your instructions. The images are appearing on the slider with the call to $slider_image_base = WB_URL.MEDIA_DIRECT ORY.'/my_slides/slide'. However, they are not appearing at all on the individual pages.
Since I only want the slider to appear on page 24 or 2, I have used the following code, based on your instructions:
if (!isset($page_id) OR $page_id==24 OR $page_id==2) {
include('snippets/responsiveslides.php');
include('snippets/nav.php');
include('snippets/site-headline.php');
} else {
include('snippets/miniheader.php');
include('snippets/nav.php');
}
include('snippets/playground.php');
include('snippets/2col-content.php');
Sincere thanks, again!
-
Hello again.
It seems that the slider is now linked to the WB_URL.MEDIA_DIRECT ORY, and drawing on the photos from there.
However, the static images on the other pages are still being taken from TEMPLATE_DIR/img.
If I change the numbers on slide1.jpg, slide2.jpg and slide3.jpg around, I can get them to match the images on the slide this way.
However, this means that if others want to change the images through the media folder using the backend, I would still have to add them to the templates/img folder via ftp.
I can't work out how to link the non-slider pages to the images in the media directory.
Once again, any advice would be greatly appreciated. Happy to post more code if needed.
-
maybe, we have some problem's to understand us :oops: :wink:
i use google translate for your postings and my own bad english for my answer's :oops:
1. it is recommended to use a folder inside of the WB-System for your pics. (but its also possible to use picture from other sources)
2. the advantage of the wb-media-directory is: you can change pics or upload new pics without a ftp-program, you need only WB-Media-Administration, but it works also, if the pics stored in the template like the original template-code
3. Choose a place for the pic's - wb-media-directory or template-directory, it doesnt matter, where, but you need for this 2 cases two different solutions. My personal opinion is a separat folder for the sliderpics in one of this directorys
I fear that you're a bit confused because of all my postings :oops:
if you want, zip your template and posted here or via email (we or i need only your index.php of this template and the file snippets/responsiveslides.php
choose a favorite directory (doesnt matter, where) and tell me the used slider pic names and the wished Page-ID's, where the slider is to be visible
i'sure, it only a little error and if you want to try it yourself....
the index.php tell the file snippets/responsiveslides.php only the directory of the slider-pics and the begin of the picture name here in this line
(search in your index.php for the word "$slider_image_base")
$slider_image_base = WB_URL.MEDIA_DIRECT ORY.'/slider/slide';
the code in the bottom of the index.php is only the switch for the slider to show it on different places. it has nothing to do with the picture path.
all the picture-handling is in the file snippets/responsiveslides.php
the first part of this file snippets/responsiveslides.php build the sliderbox and has also nothing to do with the picture path
Line 34 startet a mysql request to read information about the pages, defined in index.php from the template
the important line for your problems are here (original-code from the template
while($page = $query_pages->fetchRow()) {
$i++;
$page_id = $page['page_id'];
$nr = $page_id; //Use $page_id OR $i for picture numbers. $i (1, 2, 3...) is easier to handle, $page_id is mor specific.
//Start output:
$l = '
<li><img class="img-responsive" src="'.$slider_image_base.$nr.'.jpg" alt="'.$page['menu_title'].'">
$i++ is a intern counter for this while-loop
$page_id = $page['page_id'] - set the readed page_id from the database to the variable, called $page_id
$nr = $page_id - see the comment, here you can switch between $i (numered pictured, starting with 1) and $page_id (picture has the page_id from the wished page in the end. these are the here defined pages -> $slider_page_ids = '2,14,18';
the last line of this posted code is the picture link. important is this part here
src="'.$slider_image_base.$nr.'.jpg"
$slider_image_base is the definition from the index.php of the template
$nr is the number from the intern counter or the page_id from the page in this loop
its important, to go only one way in this handle - using the counter or using the specific page id. my favorite is the specific page_id, because, i know directly in the directory, for which page is this image
if i use the intern counter, i have to think around corners :wink:
i'm sure, the error is inside my posted code lines
its recommened, not overwrite the WB-variable for the page_id (see post from fischstäbchenbrenne r at the begin of this thread), so a better solution is a own variable name
here the complete code with this changes for the file snippets/responsiveslides.php (must work!)
<?php if(!defined('WB_URL')) { header('Location: ../../../index.php'); exit(0); } ?>
<!-- banner -->
<div class="banner">
<!-- slider -->
<!-- img-slider -->
<div class="img-slider">
<!--start-slider-script-->
<script src="<?php echo TEMPLATE_DIR; ?>/js/responsiveslides.min.js"></script>
<script>
$(function () {
// Slideshow 4
$("#slider4").responsiveSlides({
auto: true,
pager: true,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<!-- End-slider-script-->
<!-- Slideshow 4 -->
<div id="top" class="callbacks_container">
<ul class="rslides" id="slider4">
<?php
$theq = "SELECT * FROM `".TABLE_PREFIX."pages` WHERE page_id IN (".$slider_page_ids.");" ;
$query_pages = $database->query($theq);
if($query_pages->numRows() < 1) {
//do nothing
} else {
$i = 0;
while($page = $query_pages->fetchRow()) {
$i++;
$new_page_id = $page['page_id'];
$nr = $new_page_id; //Use $new_page_id OR $i for picture numbers. $i (1, 2, 3...) is easier to handle, $new_page_id is mor specific.
//Start output:
$l = '
<li><img class="img-responsive" src="'.$slider_image_base.$nr.'.jpg" alt="'.$page['menu_title'].'">
<div class="slider-caption"><h1>'.$page['page_title'].'</h1><p>'.$page['description'].'</p>';
$l .= '<a class="caption-btn" href="'.WB_URL.PAGES_DIRECTORY.$page['link'].PAGE_EXTENSION.'">'.$TEXT['READ_MORE'].'</a>';
$l .= '</div></li>';
echo $l;
}
}
?>
</ul> </div>
<div class="clearfix"> </div>
</div><!-- slider -->
</div><!-- end banner -->
and now, you need only the correct path in the index.php from the template like
stored pics directly in media-directory
$slider_image_base = WB_URL.MEDIA_DIRECTORY.'/slide'or
stored pics in a subfolder calles "sliderpics" in media-directory
$slider_image_base = WB_URL.MEDIA_DIRECTORY.'/sliderpics/slide'or
stored pics directly in template-folder
$slider_image_base = TEMPLATE_DIR.'/slide'or
stored pics in a subfolder calles "sliderpics" in template directory
$slider_image_base = TEMPLATE_DIR.'/sliderpics/slide'
-
Hello jacobi,
Thank you for all your replies. I am really most grateful to you for helping me - and your English is just fine!
I have checked the code according to your instructions, but am still finding that the page images link to the template/img/ files, while the slider links to the media/slider files.
I have posted the entire index.php and responsive slides.php below.
Index.php:
<?php
if(!defined('WB_URL')) {
header('Location: ../index.php');
exit(0);
}
$slider_page_ids = '26,28,34';
$slider_image_base = WB_URL.MEDIA_DIRECTORY.'/slider/slide'; // added: number + .jpg
?><!DOCTYPE html>
<html>
<head>
<?php
if(function_exists('simplepagehead')) {
simplepagehead();
} else { ?>
<title><?php page_title(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />
<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
<?php }
if(function_exists('register_frontend_modfiles')) {
register_frontend_modfiles('css');
//register_frontend_modfiles('jquery');
register_frontend_modfiles('js');
} ?>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="<?php echo TEMPLATE_DIR; ?>/js/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="<?php echo TEMPLATE_DIR; ?>/css/bootstrap.min.css" rel="stylesheet">
<!--link href="<?php echo TEMPLATE_DIR; ?>/css/font-awesome.min.css" rel="stylesheet"-->
<link href="<?php echo TEMPLATE_DIR; ?>/editor.css" rel="stylesheet" />
<link href="<?php echo TEMPLATE_DIR; ?>/screen.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<?php
ob_start();
page_content(1);
$page_content_1 = ''.ob_get_contents();
ob_end_clean();
if(defined('TOPIC_BLOCK2') AND TOPIC_BLOCK2 != '') {
$page_content_2 = TOPIC_BLOCK2;
} else {
ob_start();
page_content(2);
$page_content_2 = ''.ob_get_contents();
ob_end_clean();
}
//if($page_content_2 == '') {$page_content_2 = '<img class="img-responsive" src="'.TEMPLATE_DIR.'/img/about.jpg" title="'.WEBSITE_TITLE.'" />';}
?>
<body>
<?php
if (!isset($page_id) OR $page_id==24 OR $page_id==2) {
include('snippets/responsiveslides.php');
include('snippets/nav.php');
include('snippets/site-headline.php');
} else {
include('snippets/miniheader.php');
include('snippets/nav.php');
}
include('snippets/playground.php');
include('snippets/2col-content.php');
?>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="copyright">
<p>
<span><?php page_footer();
if ($page_id % 5 == 1) {echo '<br/><span style="font-size:10px;">Based on design by <a href="http://www.beesign.com" target="_blank">Grafik und Webdesign in Wien</a></span>'; }
?></span>
</p>
</div>
</div>
</div>
</div>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="<?php echo TEMPLATE_DIR; ?>/js/bootstrap.min.js"></script>
<!-- script src="<?php echo TEMPLATE_DIR; ?>/js/responsive-slider.js"></script -->
</body>
</html>
snippets/responsiveslides.php:
<?php if(!defined('WB_URL')) { header('Location: ../../../index.php'); exit(0); } ?>
<!-- banner -->
<div class="banner">
<!-- slider -->
<!-- img-slider -->
<div class="img-slider">
<!--start-slider-script-->
<script src="<?php echo TEMPLATE_DIR; ?>/js/responsiveslides.min.js"></script>
<script>
$(function () {
// Slideshow 4
$("#slider4").responsiveSlides({
auto: true,
pager: true,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<!-- End-slider-script-->
<!-- Slideshow 4 -->
<div id="top" class="callbacks_container">
<ul class="rslides" id="slider4">
<?php
$theq = "SELECT * FROM `".TABLE_PREFIX."pages` WHERE page_id IN (".$slider_page_ids.");" ;
$query_pages = $database->query($theq);
if($query_pages->numRows() < 1) {
//do nothing
} else {
$i = 0;
while($page = $query_pages->fetchRow()) {
$i++;
$new_page_id = $page['page_id'];
$nr = $new_page_id; //Use $new_page_id OR $i for picture numbers. $i (1, 2, 3...) is easier to handle, $new_page_id is mor specific.
//Start output:
$l = '
<li><img class="img-responsive" src="'.$slider_image_base.$nr.'.jpg" alt="'.$page['menu_title'].'">
<div class="slider-caption"><h1>'.$page['page_title'].'</h1><p>'.$page['description'].'</p>';
$l .= '<a class="caption-btn" href="'.WB_URL.PAGES_DIRECTORY.$page['link'].PAGE_EXTENSION.'">'.$TEXT['READ_MORE'].'</a>';
$l .= '</div></li>';
echo $l;
}
}
?>
</ul> </div>
<div class="clearfix"> </div>
</div><!-- slider -->
</div><!-- end banner -->
Please let me know if you need anything else, and thanks again!
Emily
-
at first: copy your posted code and it works without problems, only change the $slider_page_ids to my used page-id's
, so i ask me: do we talk from different places???
if you not sure, where the pictures come from, put the pics in your template img-directory, called slide1.jpg, slide2.jpg etc in a new folder and put some new pics with the same names into the this folder, maybe a pic from santa claus.. so that you know, it loads the pics from the exact this directory
let us look to the original here
http://WebsiteBaker.at/wb-templates/template-bs_naturak.html
the big picture slider in the top is the image slider from the file responsive slides.php
the three small pics in the block with the header = Aktuelle Projekte
are defined as html-code in snippets/grids3.php
you dont us it in your template, but i will explain it also
look there to this code
<img class="img-responsive" src="<?php echo TEMPLATE_DIR; ?>/img/slide1.jpg" alt="">
....
<img class="img-responsive" src="<?php echo TEMPLATE_DIR; ?>/img/slide2.jpg" alt="">
....
<img class="img-responsive" src="<?php echo TEMPLATE_DIR; ?>/img/slide3.jpg" alt="">
if you need there the same pics used in the big slider, change the picture-links in this 3 rows if needed to
<img class="img-responsive" src="<?php echo WB_URL.MEDIA_DIRECTORY; ?>/slider/slide26.jpg" alt="">
....
<img class="img-responsive" src="<?php echo WB_URL.MEDIA_DIRECTORY; ?>/slider/slide28.jpg" alt="">
....
<img class="img-responsive" src="<?php echo WB_URL.MEDIA_DIRECTORY; ?>/slider/slide24.jpg" alt="">
the small header......
showing in the showcase of WebsiteBaker.at (http://WebsiteBaker.at/wb-templates/template-bs_naturak.html) in menu-point "topics"
the element use the same picture and resize the pics via css to a small header. from my point, its sometimes necessary, to use other pics, different size to the big slider pics, but my example use here the same pics in all snippet-files
you call it in your index.php the file snippets / miniheader.php
this file us simple mathematic for the picture number in a slider
$slidenr = ($page_id % 3) + 1 means: $slidenr is the rest from the division of ($page_id : 3) +1
example:
Page_id is 12 - 12:3 == 4, there is no rest, ergo $slidenr = 0 +1 - so the slider use picture slide1.jpg
Page_id is 13 - 13:3 == 4, rest == 1, ergo $slidenr = 1 +1 - so the slider use picture slide2.jpg
:wink:
or with your used page_id 26
Page_id is 26 - 26:3 == 8, rest == 2, ergo $slidenr = 2 +1 - so the slider use picture slide3.jpg
Page_id is 28 - 28:3 == 9, rest == 1, ergo $slidenr = 1 +1 - so the slider use picture slide2.jpg
Page_id is 34 - 34:3 == 11, rest == 1, ergo $slidenr = 1 +1 - so the slider use picture slide2.jpg
a very simple, but also a very good calculation for this, but this code in snippets / miniheader.php works only, if you have pictures named with the counter value like slide1.jpg, slide2.jpg etc
if you need here also pictures, named with the page-id, like slide26.jpg, slide28.jpg etc
use $slidenr = $page_id; instead of $slidenr = ($page_id % 3) + 1
here is also a picture path to the template directory
Originalcode
<?php echo TEMPLATE_DIR.'/img/slide'.$slidenr.'.jpg'; ?>
change it to (here the whole line)
<div style="margin-bottom:30px; padding:7%; background: url(<?php echo WB_URL.MEDIA_DIRECT ORY.'/slider/slide'.$slidenr.'.jpg'; ?>) no-repeat left center; background-size: 100% auto, auto;"></div>
-
jacobi22, you are quite brilliant! Thanks so much!
I now have it successfully linked to the media folder, where I have slides1/2/3.jpg as well as slides26/28/34.jpg. The problem was with the other picture path in the small header file. Once I changed this, it works wonderfully. Thank you!
I have one last query:
From what I understand, I use $slidenr = ($page_id % 3) + 1 to distribute the slider images throughout the site.
I can also use $slidenr = $page_id to link each page to an image with the same id.
Is there a way to link only pages 26, 28, 34 to the images with the same id and all other pages to a single image (slide1.jpg) for example?
If it's too much trouble, don't worry, though. You have been of amazing assistance already!
-
Have decided to go with different images for each page and use $slidenr = $page_id.
Thanks so much, again, for all your help!
-
jacobi22, you are quite brilliant!
my girly's say the same ;-)
Is there a way to link only pages 26, 28, 34 to the images with the same id and all other pages to a single image (slide1.jpg) for example?
If it's too much trouble, don't worry, though. You have been of amazing assistance already!
its no problem
instead of this line in file snippets / miniheader.php
$slidenr = ($page_id % 3) + 1
use this code here
if ($page_id == 26 || Spage_id = 28 || $page_id == 34){
$slidenr = $page_id;}
else
{$slidenr = 1;}
?>
first line are your page's
|| means OR
last line is the number for the single image
-
if ($page_id == 26 || Spage_id = 28 || $page_id == 34){
$slidenr = $page_id;}
else
{$slidenr = 1;}
?>
bad error in line 1 of this code :oops: :oops: :oops:
correcture
if ($page_id == 26 || $page_id == 28 || $page_id == 34){