need help for CMS only for images/video and audio upload

[danielholanda]

Hello,

Today is my first day with processwire. I have already an index.php with its CSS created. The client needs a simple CMS which will let her upload pictures/videos in one section and music in another. So I just need to implement the CMS for those sections, no text or anything else. The web has a horizontal layout, so technically its only one page but with the width very wide. Each page is a div with a special link applied to it.

I already installed proceswire, placed all the files inside template folder, activated template and with help of head.inc could link the css/jquery and images with a determined url succesfully.

At this moment I'm trying to apply the option of uploading pictures from the CMS. This part I have no html/css created as I wanted to see how I had to do this depending of the CMS. I tried to install the thumbnail module with success but from there I have no idea what to do... The module is not visible and I dont know how to hook it to my html structure.

I would really appreciate some help.

P.D. After I will do the video and audio. For now I need to know how to apply exactly a module to my display, how it works. Lets use thumbnail as an example.

P.D.D. I've already read some documentation in the web but I still dont get it.

[SiNNuT]

Hi danielholanda, and welcome to the club. We're really a helpful bunch around here but at the moment i wouldn't know how to begin helping you. Have you studied the default templates? If so, plz specify your questions.

[arjen]

Welcome. The great thing about ProcessWire is that it makes no assumptions about it's output/html. You define what you want. Like SiNNuT it's not clear to me as to what exactly is not working. Have you created an images fieldtype yet? Read though these articles. In the beginning they made a lot of sense to me. If the thumbnail isn't working in the admin and you feel you've done everything right, you should post that in the thumbnail thread.

Do you have a link we could look at?

[diogo]

Maybe you should try to put some text dynamically, even if you don't need it, just for having a feel of how PW works with simpler stuff. At the same time, finish your html with the images because PW won't impose anything to you. We'll be here to help

[MarionRaven]

Hi danielholanda,

as the other forum members I suggest you to start with the dummy site from process-wire.

In this case you already have images which are showing up on the web page.

Two things to keep in mind:

1) The generation of your html output is mainly done by head.inc and foot.inc in the folder site.

These files are PHP scripts. And you edit them outside of processwire.

2) The thumbnail module only adds some sugar to the field image and delivers that as a new field type.

A Gallery does not demand this module. And it delivers nothing new to the front end.

Nevertheless it is really useful, I.e. a Javascript Gallery may benefit from scaled and cropped images.

[danielholanda]

Hello everybody,

Frist thanks for your answers. Yes I know my question could be unclear. I'm just beggining with PW so I need some help with which is the workflow and maybe which would be the steps I need to apply. So I will explain...

I need to create a photo gallery with thumbnails that once clicked are zoomed in with lightbox. I want this gallery to work with PW. This way my client can upload new pictures via PW. These new pictures should place a new picture in the gallery with its thumbnail. Thats basically it...

I see that MarionRaven says that the thumbnail module just adds some sugar but doesnt deliver to the front end. Here is my question then... with the description I said, how can I deliver the images uploaded via PW to the front end?! Which are the steps.

Dani

P.D. I'm not using the head.inc or footer.inc. I'm using my own html file, sticking all the codes in those files. Is this correct?

P.D.D. Thank you for the links arjen. I cant send any link as I'm creating this locally and with MAMP. Don't knwo if there exists a way to link this, that would be great.

[arjen]

The thumbnail module is admin purposes only I think, but I haven't really used it yet.

What is the name of the template and fields (i.e. title or images field) you are using? I could set you up with an easy php example to show you how this works. Remember, PW isn't a ready to go CMS like installing NextGEN for WordPress and outputting some shortcodes to make this work. This might seem like a flaw, but in fact it's PW's strong point. You choose what you want to do. Your code and your lightbox.

[danielholanda]

Hello Arjen,

The name of my template is index and I haven;t done anything regarding fields. The pictures are separate files I have in my computer. I've already created a thumbnail gallery with prettyphotos http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto. With this I can upload in a similar display as lightbox, photos and videos.

I can read php, javascript and have soe experience with the workflow of jquery but I have no idea of how to work with processwire. What are the steps I should do?

[diogo]

The name of my template is index and I haven;t done anything regarding fields

You have this index template working on the homepage already? When you open your website, you see the content of your html?

[danielholanda]

Yes I do. I already installed the CMS and inserted in the directory processwire/site/templates my index.php/images/js/css... of my own design. After I've chosen as template index.php. So I can visualize my html/css in the hompage. That is working.

[diogo]

Ok, so now,

• Go to setup>fields, and create a new field with type "images", give whatever name you want, let's say "my_images".
  
• Go to setup>templates, choose your index template, and add this new field to it.
  
• Open your index page on the pages tree, and populate the images field with some images.
  
• On the index.php, go to the code of the galery, you must have something like this (I'm assuming that you have prettyPhoto already working):
  

<!-- taken from the prettyPhoto site -->

<a href="images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures."><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" /></a>

<a href="images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" /></a>

<a href="images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /></a>

<a href="images/fullscreen/4.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" /></a>

<a href="images/fullscreen/5.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly kite, fly!" /></a>

replace all those images by this:

<?php
foreach($page->my_images as $image){
echo "<a href='{$image->url}' rel='prettyPhoto[pp_gal]'><img src='{$image->width(60)->url}' width='60' alt='{$image->description}' /></a>";
}
?>

In the previous example, the thumbnails will be miniatures of the pictures with 60px width and variable height. If this is not what you want, follow along:

Install Apeisa's Thumbnails module http://modules.proce...ype-crop-image/ (or even better! install Soma's amazing "Modules Manager" http://modules.proce...odules-manager/ and from there install the Thumbnails module).

• Go to setup>fields, choose the newly created my_images field and change its Type to "Cropimage".
  
• Go to the "INPUT" tab on the same page, and on "Thumbnail Settings" (bottom), change from "thumbnail,100,100" to "thumbnail,60,60" (or whatever you want).
  
• Open your index page on the pages tree, and now you will have a thumbnail option for each of the images you uploaded before. Crop your images as you wish.
  
• On the index.php file change the previous code to this:
  

<?php
foreach($page->my_images as $image){
echo "<a href='{$image->url}' rel='prettyPhoto[pp_gal]'><img src='{$image->getThumb('thumbnail')}' width='60' height='60' alt='{$image->description}' /></a>";
}
?>

Et voilà, that should work

edit: changes from this "60" to this '60' on the last snippet

Edited September 5, 2012 by diogo

[danielholanda]

Ok, thank you very much for your clarity!!!! I've done all the steps and double checked. I begin to see a bit the flow of processwire, seems simple and direct. Sweet.

Even if I sound so enthusiastic I didnt have the pictures displayed. In my original html/css prettyphoto works perfectly. I followed all the steps and it does seem I've done them correctly. At the end this is the end result of my code:

<div id="thumb_box">
<?php
foreach($page->my_images as $image){
       echo "<div class='single'><a href='{$image->url}' rel='prettyPhoto[gal1]'><img src='{$image->getThumb('thumbnail')}' width='50' height='50' alt='{$image->description}' /></div></a>";
}
?>
</div>

As you can see I added a div. I don't know if thats correct. Even if I take the div away I still don;t see any picture.

All your steps worked correctly. So my configuration is:

pages:

index is working and displaying the html (I already added all the necessary links with this code <?php echo $config->urls->templates?> )

Inside index:

I have already a new picture field with its images. The thumbnail options do work also.

The problem is that I see nothing displayed. What could it be?

Thanks Dani

[diogo]

Can you post here the html output?

Edit: I had a small typo on my code, but I don't think that was the problem. I copied your code on my testing PW install, and I get the images on the page.

Tell me if you get any output if you put this right after <?php

echo $page->my_images;

[danielholanda]

Ummm so it does work for you... I wrote the code as you said but I don;t feel this is correct:

<?php echo $page->my_images;
foreach($page->my_images as $image){
echo "<div class='single'><a href='{$image->url}' rel='prettyPhoto[gal1]'><img src='{$image->getThumb('thumbnail')}' width='50' height='50' alt='{$image->description}' /></div></a>";
}
?>

I put it there and there was no result, no output al all. Strange that it works with you... Was this what you wanted with the new code?

Can you post here the html output?

What do you mean with posting here the html output?? You mean a picture or so??

[diogo]

echo $page->my_images;

This was just for testing if you can reach the field at all. Apparently not.

Can you replace it for this, and see if there is any output?

echo "<br>{$page->title}<br>{$page->template}<br>";

This should output the title and the name of the template of the page.

----

To post the html output, go to "view source" on your browser, and look for the piece of code from the gallery. Maybe you should even deactivate the javascript plugin before, so we are sure that the html is correct (just unlink it on the head of the html).

[danielholanda]

Hello, I tried finding a methid to upload an attatchment with this forum to past all the output but I dont find a way. So I will paste you the gallery output:

I took the JS connections out. Let me know.

<!-- PHOTO/VIDEO SECTION -->
		<div id="photo_video" class="item">
		<a name="photo_video"></a>
		<div class="content" id="content_photo_video">
		<nav id="nav_photo_video">
		<ul>
		<li><a href="#home" class="panel">HOME</a></li>
		<li><a href="#about_me" class="panel">ABOUT ME</a></li>
		<li><a href="#booking" class="panel">BOOKING</a></li>
		<li><a href="#photo_video" class="panel">PHOTO\VIDEO</a></li>
		<li><a href="#music" class="panel">MUSIC</a></li>
		<li><a href="#contact" class="panel">CONTACT</a></li>
		</ul>
		</nav>

		<div id="thumb_box">
		<br>Dj Femke<br>index<br> </div>

		<aside id="social_pmc">
		<a href=""><img src="/djfemke/_cms_processwire/site/templates/_img/social_butt/twitter.jpg" alt="" /></a><a href="" class="right"><img src="/djfemke/_cms_processwire/site/templates/_img/social_butt/facebook.jpg" alt="" /></a><a href="" class="right"><img src="/djfemke/_cms_processwire/site/templates/_img/social_butt/email.jpg" alt="" /></a>
		</aside>
		</div>
		</div>

[diogo]

It isn't outputting anything... can you try what I said on the post above?

echo "<br>{$page->title}<br>{$page->template}<br>";

I also noticed that on your code, there is a problem with the tags sequence:

You have <div><a><img/></div></a>, and should be <div><a><img/></a></div>

[danielholanda]

Hello Diogo,

Its is showing an output, I can see in the screen the output of

[color=#000000][size=2]echo [/size][/color][color=#008800][size=2]"<br>{$page->title}<br>{$page->template}<br>"[/size][/color][color=#666600][size=2];[/size][/color]

In the web you can see DjFemke ($page->title) and under you can see index ($page->template). Therefore is has to connect with processwire to retrieve that info. I think that was what you wanted to experiment right?

I've changed the mistake I've done with the incorrect closed <a> tag. Now its correct. Even like this its not working with the pictures... I dont see anything. In this moment this is what I have.

HTML:

<div id="thumb_box">
<?php
foreach($page->my_images as $image){
       echo "<div class='single'><a href='{$image->url}' rel='prettyPhoto[gal1]'><img src='{$image->getThumb('thumbnail')}' width='50' height='50' alt='{$image->description}' /></a></div>";
}
?>
</div> 

CSS LEFT BOX: (This will be the next step. Once the pictures are displayed I would like to make every first picture have these settings so they can be displayed horizontally.)

.single_left{
float: left;
clear: right;
}

CSS BOXES:

.single{
float: left;
margin-left: 1.5%;
line-height: 10px;
-webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid rgba(0, 112, 162, 0.3); 
}

What should I do???

[diogo]

Sorry, I should have guessed that this was the output I expected...

----

The code is perfectly correct. I created a my_images field with the cropImage type, and pasted your code on my template. Here is the result:

In your case the problem must be on the field itself.

Can you post here a screenshot of how the field looks like on the fields setup and on the page edit? Or just recreate the field, and redo all the steps, if you prefer.

[danielholanda]

EUREKA!!!!

The pictures are displayed!!! YEAH! I did again all the steps with the field. Seems I did a mistake before as it works at this moment!! All the pictures are displayed and the thumbnails works fine.

There is only one funny detail regarding {$image->description}. In your code you apply this code to the alt="". If this is done the text is displayed above the frame where the big picture is displayed via prettyphoto. I took a look in my html/css and it's placed correctly, as the prettyphoto uses the field title="" for the description and has its CSS style applied to it. So I thought, simple... just apply this description field to the title. But then nothing is displayed. Under you have the actual code I have in this moment. With this code what happens is that above the picture frame you see DJ Femke photo\video and the description is not displayed. I have 2 doubts:

1. Why doesnt the {$image->description} work in the field title=""

2. Why does the alt="" field display. I thought this only displays is the picture is not displayed.

<?php 
foreach($page->photo as $image){
       echo "<div class='single'><a href='{$image->url}' rel='prettyPhoto[gal1]'><img src='{$image->getThumb('thumbnail')}' width='50' height='50' title='{$image->description}' alt='Dj Femke photo\video' /></a></div>";
}
?>

I have a picture to ilustrate but I've tried to upload it with no success and I have no idea how in this forum. I've tried via the button image, but I have to put the url of the picture. This picture is on my desktop, is there a way to upload this?! I think it will be more clear for you.

Many thanks!!!

[danielholanda]

Hello,

Solved!!! It works perfectly. The only doubt I have is of the field alt="". This field is always shown. Of course... I can just leave it empty but I would like to know for which reason this is displayed if the image and the description is displayed. Let me know if you have any idea. For now... this is not so important but it just made me think.

Before beginning with video I would like to leave photos 100% finished. With prettyphoto you have the option of making some pictures be from the same album. How? Via rel="prettyphoto[album]" In the examplo displayed above its [gal1]. Therefore I would like to give the option with the CMS to insert this information without hard coding. Therefore there would have to be an input as for example: name of album and if this would be inserted between the [ ] it would work. Any ideas of how I can reach this?

Really thank you very much!!!!!

[Pete]

There should be an option to attach a file to a post in the forums - that wil allow you to attach the image.

[diogo]

Daniel, ProcessWire will put the info exactly where you want it to be, it doesn't make any distinction between things like "title" or "alt". You have to read carefully the instructions of prettyPhoto to know how it works (I din't have any contact with it until now), and build your html from there. That's why I told you that you should have the gallery displaying exactly has you want with html, and put the dynamic things only later.

Therefore I would like to give the option with the CMS to insert this information without hard coding

That would be the best way. Just create a text field (gallery_name f.e.) and put it next to the images field on the template. Then, complete your code like this:

rel='prettyPhoto[{$page->gallery_name}]'

You only need unique names for each gallery if you will put more than one in one page. If this will happen, you risk that people give the same name to both gallery, and it will mess everything. You have two options for this:

• Tell people that they can't do it, either verbally or on the field description.
  
• Create unique ids for each gallery.
  

Here's how you can create the unique ID's:

Simple option is to a random string

rel='prettyPhoto[{rand_string(5)}]'

Another option, is to use some information that is, for sure, unique to this gallery (this will depend on how you will put more than one in each page)

galery_id = "gallery-" . $page->name;
...
rel='prettyPhoto[{$gallery_id}]'

[danielholanda]

There should be an option to attach a file to a post in the forums - that wil allow you to attach the image.

Yes there should be a button. Is there a solution for this or not?

[diogo]

What Pete meant is that, there is a button. Go to "More Reply Options" to find it