Jump to content

Blue-VR ProcessWire Site Profile

Gayan Virajith

By Gayan Virajith,
in Themes and Profiles

 Share

Recommended Posts

biotech Full Member

biotech

Posted
Posted

Welcome Leo,

The link you posted is a tutorial if you want to make something from scratch.

Using what you get with this profile you could make a new page under Home > and call it say "Gallery" and then based on this you can decide what look/template of that page you want ( 'basic' or 'basic w sidebar').

Then you can use Body field to put your images (add image first via image field) using the editor or maybe even better use the 'On Page Blocks' to add image w maybe description to go along. This way you could create a look similar to blog postings.

............ [ image ]

[ image ] ............

............ [ image ]

[ image ] ............

This, of course, is the simplest form of 'gallery' without any slideshows and thumbnail approach.

  • Like 1
Link to comment
Share on other sites
elabx Hero Member

elabx

Posted
Posted

Hi Leopold, 

What you would need to do to add Fancybox is pretty simple, you just have to add the necessary javascript to the template that is rendering the current page (in this profile javascript is added in the _done.php template file, around line 117) and add the necessary CSS classes to your images.

For example, in the previous link you posted about making galleries with PW, here is the part that echoes the linked thumbnail: 

echo "<p><a href='{$image->url}'><img src='{$thumbnail->url}' alt='{$thumbnail->description}' ></a></p>";

Let's say you want to use the CSS class "gallery" to mark which thumbnails will be "fancyboxed": 

echo "<p><a class='gallery' href='{$image->url}'><img src='{$thumbnail->url}' alt='{$thumbnail->description}' ></a></p>";

And according to the fancybox documentation, you would need to add this line of javascript (for basic functionality):

$(".gallery").fancybox();

Just take a good look at where the javascript is added, because there is an IF statement that prepares the template in case the AIOM module is installed. 

  • Like 1
Link to comment
Share on other sites
elabx Hero Member

elabx

Posted
Posted

A million thanks elabx!

This sounds pretty logical, I will try it right away.

I'm teaching myself webdesign and I still miss a lot of the basic skills. This will take a while

I'm on the same track! Maybe a few meters ahead but not too far away haha, so any doubt you have don't hesitate to ask again.

I believe Processwire is also an AMAZING tool to learn webdev too, I was always so lost with the tools I had tried before (the popular ones!) and with Processwire everything feels so within reach and little by little, as you go polishing your skills, Processwire unveils more of itself to accomplish what you want, I simply love that.

Ok, enough PW love  :lol:

  • Like 1
Link to comment
Share on other sites
L. Leopold Jr. Member

L. Leopold

Posted
Posted

I pretty much like processwire for the same reasons. Other cms systems where much more frustrating and less logical.

Okay: I uploaded the fancybox files via FTP and I put the links to the fancyboox jquery in the code of the _done.php
like this:

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="<?php echo $config->urls->templates?>scripts/source/jquery.fancybox.css">

(around line 41)

    <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/jquery.flexslider.js"></script>
<script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/jquery.appear.js"></script>
<script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/smoothscroll.js"></script>
<script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/jquery.functions.js"></script>
<script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/fancybox/jquery.fancybox.pack.js"></script>

(around line 137)

But then I wasn't sure anymore where to put the rest. I put this code right beneath the other javascript line:

    <script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/fancybox/jquery.fancybox.pack.js"></script>
    
    <script type="text/javascript">
	$(document).ready(function() {
		$(".gallery").fancybox();
	});

And I put the markup for the images into the basic-page.php:

<?php

foreach($page->images as $image) {
   $thumbnail = $image->size(150,100);
echo "<p><a class='gallery' href='{$image->url}'><img src='{$thumbnail->url}' alt='{$thumbnail->description}' ></a></p>";
}
?>

The result I get now is this http://watanabe-yakushima.com/gallerie/

The images show up a second time in the thumbnail format.

I think my biggest problem is, that I don't know how do I add the .gallery class to my images. Where can I do that?

Link to comment
Share on other sites
Gayan Virajith Full Member

Gayan Virajith

Posted
  • Author
Posted

Hi Leopold, 

Your website looks awesome!

I was wondering whether you forgot to upload fancybox js and css files to the server. If you can fix this path issue, then the problem will be solved. :)  

Note: Please don't forget to add .gallery class to the anchor tag mentioned by @elabx

Thanks

post-1911-0-56920600-1445176954_thumb.pn

  • Like 2
Link to comment
Share on other sites
L. Leopold Jr. Member

L. Leopold

Posted
Posted

Hi Gayan,

thank you very much! I'm happy that I found your Blue VR Site, everything must look good with it.

I checked the paths and corrected them, now fancybox is working :)

I just don't know how and where to put the .gallery class to. Where can I find the the anchor tag? (I'm sorry, I'm a beginner)

I put this into the _done.php, but I think it has to be moved to this anchor tag

    <script type="text/javascript">
	$(document).ready(function() {
		$(".gallery").fancybox();
	});
  • Like 1
Link to comment
Share on other sites
elabx Hero Member

elabx

Posted
Posted

Thank you so much everyone! :)

My gallery looks so much better already http://watanabe-yakushima.com/gallerie/

I just have to figure out how to add the descriptions of the images. That's not working yet

I think fancybox automatically grabs the title attribute as the text displayed below the image? I don't know if this is what you mean.

Link to comment
Share on other sites
L. Leopold Jr. Member

L. Leopold

Posted
Posted

Yeah, it should do so, but for some reason it doesn't.

This is the suggested code: alt='{$thumbnail->description}'

but somehow it doesn't show the description. I already tried many other variations, with $images, title, caption, and so on, but nothing shows up.

perhaps I have to put something in the curly brackets?    $(".gallery").fancybox({   });
 

Link to comment
Share on other sites
L. Leopold Jr. Member

L. Leopold

Posted
Posted

Hi horst, sorry I didn't noticed your post right away. Thanks for the hint!

you are right: when I don't do it with the anchor tag, but with the fancybox settings, I can add text, but still not the right one.

when I do it like this

    <script type="text/javascript">
	$(document).ready(function() {
		$(".gallery").fancybox({
  'alt':'{$thumbnail->description}'
  });
	});

nothing happens

when I use 'title'

    <script type="text/javascript">
	$(document).ready(function() {
		$(".gallery").fancybox({
    'title': 'yourtitle'
  
  });
	});
</script>

then yourtitle appears under my images.
 

Sadly 'title':'{$thumbnail->description}' isn't working either...

Link to comment
Share on other sites
elabx Hero Member

elabx

Posted
Posted

I think it is best to echo the attribute directly in PHP, have you tried using the syntax used in the link Horst posted? (with the PHP tags in place) I have sometimes had trouble with the quotes and double quotes mixing when echoing attributes in HTML. Or if you post the PHP code you are using maybe we can spot the error.

Link to comment
Share on other sites
L. Leopold Jr. Member

L. Leopold

Posted
Posted

Thank you guys! I already was pretty close with your help

I asked a friend for help and he found out what was wrong. Now the descriptions work http://watanabe-yakushima.com/gallerie/

echo "<a class='gallery' rel='gallery-1' href='{$image->url}' title ='{$thumbnail->description}'><img src='{$thumbnail->url}' style=' padding: 5px;' ></a>";

It was right to put the description in <a> not into <img>, but fancybox only listens to 'title' 

'alt' somehow didn't work

Link to comment
Share on other sites
elabx Hero Member

elabx

Posted
Posted

I think that fancybox 2 is more flexible in that kind of handling, though there is the license fee (which I think is worth it).

Later you should check Magnific Popup, it's quite awesome too and totally free.

Link to comment
Share on other sites
L. Leopold Jr. Member

L. Leopold

Posted
Posted

Hi guys,

I got another problem that drives me crazy. I just want to have the root of my page shown in the navigation. I've been searching for days by now. please help me.

in the navigation.inc file it says

Credits:
 *  I have used some same navigation methods used by Ryan Cramer.
 *  So full credit to Ryan Cramer
 */

so I compared Ryan Cramers navigation with the one used in the Blue VR Site. Cause in the Foundation Site navigation the root (or Home) is already part of the navigation. It didn't help me sadly.

https://github.com/ryancramerdesign/FoundationSiteProfile/blob/master/site-foundation/templates/_nav.php

https://github.com/gayanvirajith/BlueVrSiteProfile/blob/master/templates/_navigation.inc

I tried a lot of different things, that either didn't show any effect, or broke the complete site.

If you have a suggestion what could work, I'm gratefull for any hint!

Thanks in advance!

Link to comment
Share on other sites
L. Leopold Jr. Member

L. Leopold

Posted
Posted

Sorry that I'm asking so many things recently.

I got a serious problem with the Muli-Language-Support. I already found a solution in the forum, but I don't know how to apply it...

https://processwire.com/talk/topic/7207-can%C2%B4t-install-languagesupport/

My problem is, that "ProcessLanguage" seems to be installed and that without "LanguageSupport" running. I always get the Error

language.jpg

I can uninstall ProcessLanguage through the Module configuration, but it doesn't help. If I then try to install LanguageSupport it installs ProcessLanguage first, but doesn't install LanguageSupport...

thanks for your help!

Link to comment
Share on other sites
L. Leopold Jr. Member

L. Leopold

Posted
Posted

I've deleted this Languages Page with this code from that forum post

https://processwire.com/talk/topic/7207-can´t-install-languagesupport/?p=69520

<?php
$pag = $pages->get( 'name=languages, template=admin' );
$pag->status = Page::statusSystemOverride;
$pag->status = 0;
$pag->delete();
?>

I also deleted the LanguageSupport module via FTP from the server and uploaded the newest version of it.

The error has changed a bit but is still there

language3.jpg

I don't have any idea how to fix it, do you?

Do you guys think there is a way to build an easy multilingual website without the LanguagesSupport Modules?

Link to comment
Share on other sites
  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...