Jump to content

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


danielholanda
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 by diogo
  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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;
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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>

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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:

post-88-0-26811100-1346969766_thumb.png

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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}]'
Link to comment
Share on other sites

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 monollonom
      PageMjmlToHtml
      Github: https://github.com/romaincazier/PageMjmlToHtml
      Modules directory: https://processwire.com/modules/page-mjml-to-html/
      A module allowing you to write your Processwire template using MJML and get a converted HTML output using MJML API.
      This is considered to be in alpha and as such needs some testing before being used in production!

      About
      Created by Mailjet, MJML is a markup language making it a breeze to create newsletters displayed consistently across all email clients.
      Write your template using MJML combined with Processwire’s API and this module will automatically convert your code into a working newsletter thanks to their free-to-use Rest API.
      Prerequisite
      For this module to work you will need to get an API key and paste it in the module’s configuration.
      Usage
      Once your credentials are validated, select the template(s) in which you’re using the MJML syntax, save and go visualize your page(s) to see if everything’s good. You will either get error/warning messages or your email properly formatted and ready-to-go.
      From there you can copy/paste the raw generated code in an external mailing service or distribute your newsletter using ProMailer.
      Features
      The MJML output is cached to avoid repetitive API calls Not cached if there are errors/warnings Cleared if the page is saved Cleared if the template file has been modified A simple (dumb?) code viewer highlights lines with errors/warnings A button is added to quickly copy the raw code of the generated newsletter Not added if the page is rendered outside of a PageView Only visible to users with the page’s edit permission A shortcut is also added under “View” in the edit page to open the raw code in a new tab Multi-languages support
      Notes
      The code viewer is only shown to superusers. If there’s an error the page will display:
      Only its title for guests Its title and a message inviting to contact the administrator for editors If you are using the markup regions output strategy, it might be best to not append files to preserve your MJML markup before calling the MJML API. This option is available in the module’s settings.
    • By Marco Ro
      Hi guys!
      I'm a bit anxious because this is the first module I present! (beta modulo) But I will finally be able to share something with the community too! :)
      This is a BETA version of the PayPal payment system called: PayPal Commerce Platform.
      It is an advanced system (Business Pro account is needed) that brings various benefits in terms of fees and above all integrates direct payment with credit/debit cards. 
      The module integrates with Padloper 0.0.2, which is the current installation I'm using.
      This system integrates the classic PayPal buy button, the alternative or local payment method and the new payment system: credit/debit cards that doesn't go through the PayPal account. It is a Stripe-style payment, it connects directly with the bank and integrates 3D security validation.
      I say that it is a BETA because this module currently only works with Sandbox account, to put it live you need to change API url manually (manually for the moment).
      Because this module is not ready for live:
      I would like to have your opinion on how I built the module (is the first one I do). I don't want to share something that is not fish but I need a comparison with someone more experienced than me, for be sure that this is the best way to code the module.
      If you want to try this I created a git, you will find all the instructions for installation and correct operation. (Git has a MIT licensed)
      https://github.com/MarcooRo/processwire-PayPal-Commerce-Platform I hope I did something that you guys can like :)
    • By monollonom
      (once again I was surprised to see a work of mine pop up in the newsletter, this time without even listing the module on PW modules website 😅. Thx @teppo !)
      FieldtypeQRCode
      Github: https://github.com/romaincazier/FieldtypeQRCode
      Modules directory: https://processwire.com/modules/fieldtype-qrcode/
      A simple fieldtype generating a QR Code from the public URL of the page, and more.
      Using the PHP library QR Code Generator by Kazuhiko Arase.

      Options
      In the field’s Details tab you can change between .gif or .svg formats. If you select .svg you will have the option to directly output the markup instead of a base64 image. SVG is the default.
      You can also change what is used to generate the QR code and even have several sources. The accepted sources (separated by a comma) are: httpUrl, editUrl, or the name of any text/URL/file/image field.
      If LanguageSupport is installed the compatible sources (httpUrl, text field, ...) will return as many QR codes as there are languages. Note however that when outputting on the front-end, only the languages visible to the user will be generated.
      Formatting
      Unformatted value
      When using $page->getUnformatted("qrcode_field") it returns an array with the following structure:
      [ [ "label" => string, // label used in the admin "qr" => string, // the qrcode image "source" => string, // the source, as defined in the configuration "text" => string // and the text used to generate the qrcode ], ... ] Formatted value
      The formatted value is an <img>/<svg> (or several right next to each other). There is no other markup.
      Should you need the same markup as in the admin you could use:
      $field = $fields->get("qrcode_field"); $field->type->markupValue($page, $field, $page->getUnformatted("qrcode_field")); But it’s a bit cumbersome, plus you need to import the FieldtypeQRCode's css/js. Best is to make your own markup using the unformatted value.
      Static QR code generator
      You can call FieldtypeQRCode::generateQRCode to generate any QR code you want. Its arguments are:
      string $text bool $svg Generate the QR code as svg instead of gif ? (default=true) bool $markup If svg, output its markup instead of a base64 ? (default=false) Hooks
      Please have a look at the source code for more details about the hookable functions.
      Examples
      $wire->addHookAfter("FieldtypeQRCode::getQRText", function($event) { $page = $event->arguments("page"); $event->return = $page->title; // or could be: $event->return = "Your custom text"; }) $wire->addHookAfter("FieldtypeQRCode::generateQRCodes", function($event) { $qrcodes = $event->return; // keep everything except the QR codes generated from editUrl foreach($qrcodes as $key => &$qrcode) { if($qrcode["source"] === "editUrl") { unset($qrcodes[$key]); } } unset($qrcode); $event->return = $qrcodes; })
    • By Sebi
      AppApiFile adds the /file endpoint to the AppApi routes definition. Makes it possible to query files via the api. 
      This module relies on the base module AppApi, which must be installed before AppApiFile can do its work.
      Features
      You can access all files that are uploaded at any ProcessWire page. Call api/file/route/in/pagetree?file=test.jpg to access a page via its route in the page tree. Alternatively you can call api/file/4242?file=test.jpg (e.g.,) to access a page by its id. The module will make sure that the page is accessible by the active user.
      The GET-param "file" defines the basename of the file which you want to get.
      The following GET-params (optional) can be used to manipulate an image:
      width height maxwidth maxheight cropX cropY Use GET-Param format=base64 to receive the file in base64 format.
    • By MarkE
      This fieldtype and inputfield bundle was built for storing measurement values within a field, rendering them in a variety of formats and converting them to other units or otherwise modifying them via the API.
      The API consists of a number of predefined functions, some of which include...
      render() for rendering the measurement object, valueAs() for converting the value to another unit value, convertTo() for converting the whole measurement object to different units, and add() and subtract() for for modifying the stored value by the value (converted as required) in another measurement. In the admin the inputfield includes a checkbox (which can be optionally disabled) for converting values on page save. For an example if a value was typed in as centimeters, the unit was changed to metres, and the page saved with this checkbox selected, said value would be automatically converted so that e.g. 170 cm becomes 1.7 m.

      A simple length field using Fieldtype Measurement and Inputfield Measurement.
      Combination units (e.g. feet and inches) are also supported.
      Please note that this module is 'proof of concept' at the moment - there are limited units available and quite a lot of code tidying to do. More units will be added shortly.
      See the GitHub at https://github.com/MetaTunes/FieldtypeMeasurement for full details and updates.
×
×
  • Create New...