Jump to content

Blue-VR ProcessWire Site Profile


Recommended Posts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By tcnet
      I trying to add my site profile to the module directory here: https://processwire.com/modules/add/
      I entered the GitHub project URL and press Continue. Then I got:
      Unable to load module info from GitHub. Please make sure there is a getModuleInfo() function, a ModuleName.info.php file, or a ModuleName.info.json file. It it possible that the module directory accepts only module? If so, where can I add site profiles?

    • By flydev 👊🏻
      Bootstrap-4 Minimal site profile for ProcessWire
      This profile is based on the "minimal site profile (intermediate edition)" and bundled with Boostrap v4.4.1
       
        Features
      Bootstrap SASS Font-Awesome SASS Render / helper functions for : Simple ul navigation Bootstrap Multi-level navbar Bootstrap Carousel Bootstrap Cards Bootstrap Jumbotron Boostrap Accordion Assets minification, files bundle   Dependencies
      jQuery Popper.js Bootstrap FontAwesome   Prequisites
       You'll want to install the following on your system before proceeding:
      Yarn / NPM How To Install
      Download the zip file at Github or clone directly the repo with git clone and skip the step 2. Extract the folder site-pwbs4-master into a fresh ProcessWire installation root folder. During the installation of ProcessWire, choose the profile "ProcessWire Bootstrap 4 profile".   After installation
      You can find the development file (CSS/SCSS/JS) in site/assets/dev/src
      The profile can be used as is only with $config->debug set to false. To use it in debug mode, you are required to install the dependencies with the package manager.
      Open a terminal in site/assets/dev and execute the following command-line: yarn Available commands :
      Rebuild, minify and bundle assets for release : yarn build   References
      Bootstrap v4 documentation ProcessWire documentation ProcessWire Forum: bootstrap tag ProcessWire Forum: bootstrap related posts   Credits
      The ProcessWire staff Inspiration from @gebeer and his Bootstrap 3 profile post Members who contributed in various post about Bootstrap navigation and code (see code-source for refs). Screenshots

    • By rushy
      I'm trying to migrate a PW site on my local dev server to a shared hosted server and have used the ProcessExportProfile module to export a profile as a zip file. So far so good. I then deploy new install of PW on the server by unzipping the PW installation files but I do not run the install until I have replaced the various site profiles with the files from the exported profile. So basically:
      In the PW install files I delete all the site-* folders except site-default. This one I overwrite with  the export profile folders so it contains my assets, install, modules and templates folders together with the exported config.php
      I then run the install in the browser in the normal way and it starts the installation and I can see my website profile in the list and I select it. It proceeds as normal and gets to setting up the database. I provide the db info. as usual and it proceeds as far the info. below and 'hangs' at this point , it never goes on to setup the PW login admin. and complete the install I am left at that screen.  
      If I relaunch the browser at the site it all seems to work! BUT I have no admin login to PW so cannot get into the backend. 
      I have basically followed the Installation, Moving and Troubleshooting guide by Joss Sanglier: http://processwire.com/docs/tutorials/installation-moving-and-troubleshooting/page4
      Any idea where I could check for an error log or some help as I am at a loss as to the problem. 
      Many thanks. Paul
      ProcessWire 3.x Installer
       Test Database and Save Configuration
       Database connection successful to pinpoin1_master
       Saved configuration to ./site/config.php
       Profile Import
       Imported database file: ./wire/core/install.sql
       Imported database file: ./site/install/install.sql
    • By Marcel
      Hey, 
      I am very new to processwire and bootstrap. I have a field (text area) and there I want to be able to insert an image which is responsive. I tryed it with Source but in the end the page doesn't seem to like it when I insert in Source the following code
      <img src="<?php echo $homepage->content_img->url; ?>" class="img-fluid" alt="Responsive image"> What can I do to make it possible to insert reponsive images in a text area?
      Thank you in advance.
      Marcel
    • By Clément Lambelet
      Hi all,
       
      I'm really new to ProcessWire, maybe I missed the solution in the documentation.
      I'm working on a site which involves a lot of image upload fields, and I'm always getting many timeout errors. I'm pretty sure it's because I generate too many variations on a single page load (around 20 images with 7 different sizes, for them to be responsive).
      I can't use ImageSizerEngineIMagick to help (my host doesn't support it).
       
      I was wondering if there was a way to hook to the process of client-side image resizing (https://processwire.com/blog/posts/processwire-3.0.63-adds-client-side-image-resizing/) to generate the different variations (as it seems really faster). If not, is there a way to generate the different variations on upload and not on page load ?
       
      Any ideas and suggestions are welcome!
×
×
  • Create New...