Bs_naturak - wrong slider images on corresponding pages

WebsiteBaker Support (2.8.x) > Templates, Menus & Design

<< < (3/4) > >>

elfinlay:
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:

--- Code: ---<?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');
} ?>

<script src="<?php echo TEMPLATE_DIR; ?>/js/jquery.min.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1">


<link href="<?php echo TEMPLATE_DIR; ?>/css/bootstrap.min.css" rel="stylesheet">


<link href="<?php echo TEMPLATE_DIR; ?>/editor.css" rel="stylesheet" />
<link href="<?php echo TEMPLATE_DIR; ?>/screen.css" rel="stylesheet">





</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>


<script src="<?php echo TEMPLATE_DIR; ?>/js/bootstrap.min.js"></script>


</body>
</html>
--- End code ---

snippets/responsiveslides.php:

--- Code: ---<?php if(!defined('WB_URL')) { header('Location: ../../../index.php'); exit(0); } ?>


<div class="banner">


<div class="img-slider">

<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>


<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>
</div>
--- End code ---

Please let me know if you need anything else, and thanks again!

Emily

jacobi22:
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

--- 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="">
--- End code ---

if you need there the same pics used in the big slider, change the picture-links in this 3 rows if needed to

--- Code: ---<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="">
--- End code ---

the small header......

showing in the showcase of WebsiteBaker.at 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

--- Code: ---<?php echo TEMPLATE_DIR.'/img/slide'.$slidenr.'.jpg'; ?>
--- End code ---

change it to (here the whole line)

--- Quote ---<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>
--- End quote ---

elfinlay:
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!

elfinlay:
Have decided to go with different images for each page and use $slidenr = $page_id.

Thanks so much, again, for all your help!

jacobi22:

--- Quote from: elfinlay on December 18, 2015, 04:11:23 AM --- jacobi22, you are quite brilliant!
--- End quote ---

my girly's say the same ;-)

--- Quote from: elfinlay on December 18, 2015, 04:11:23 AM ---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!

--- End quote ---

its no problem
instead of this line in file snippets / miniheader.php

--- Code: ---$slidenr = ($page_id % 3) + 1
--- End code ---

use this code here

--- Code: ---if ($page_id == 26 || Spage_id = 28 || $page_id == 34){
$slidenr = $page_id;}
else
{$slidenr = 1;}
?>
--- End code ---

first line are your page's
|| means OR

last line is the number for the single image

Navigation

[0] Message Index

[#] Next page

[*] Previous page

Go to full version