Hi, I did a search on videos and didn't find topics relationg to this. I was wondering how we can upload videos or embed videos? Currently under editables there is type=image. Can we upload a video to this or use an embed link instead. Think you are familiar with my project by now. I have a section called animation that requires video clips to be show.

Thanks!

[KK]

Hi Fouridine,

There is a thread that discusses embedding videos - viewtopic.php?f=4&t=185

Please let me know if the discussion is relevant to what you require.

I think it is. It means I'll be uploading videos on youtube or vimeo. The thing is I've got that 3 categories animation, design and drawing all working off the same template work.php. Does that mean I should be putting animation in a separate template?

[KK]

You don't need to have a separate template.
Just define an editable region for video embed code and although it will be available for all the three categories you can enter the embed code within it only for 'animation' category.
For display, you can place a check in the template to show the video only if the editable region contains any value (using the 'not_empty' tag as we have done before for your site).

The video is not showing up. Not sure if i left out anything in my code.

the editable:

Code: Select all

<cms:editable name='video' type='textarea' no_xss_check='1' />
    
    <cms:editable name='group_gallery' label='Gallery' type='group'/>
    
    <cms:repeat count='6' startcount='1' >
       <cms:editable
          name="gallery_img_<cms:show k_count />"
          label="Image <cms:show k_count />"
          width="500"
          height="500"
          show_preview='1'
          preview_height='200'
          group='group_gallery'
          type="image" />
    
       <cms:editable
          name="thumb_gallery_img_<cms:show k_count />"
          assoc_field="gallery_img_<cms:show k_count />"
          label="Thumbnail <cms:show k_count />"
          desc="Thumbnail of image above"
          width='90'
          height='90'
          group='group_gallery'
          type="thumbnail" />
        <cms:editable 
          name="thumb_gallery2_img_<cms:show k_count />"
          assoc_field="gallery_img_<cms:show k_count />"
          label="Thumbnail2 <cms:show k_count />"
          desc="Thumbnail2 of image above"
          width='195'
          height='90'
          group='group_gallery'
          type="thumbnail" />
    </cms:repeat>   

the work.php code:

Code: Select all

                   <div class="workimg">
                           <cms:set my_vid_src="<cms:get "video" />" />
                        
                           <cms:if "<cms:not_empty my_vid_src />" >
                              <div><cms:show vid /></div>
                           </cms:if>

                        <cms:repeat count='6' startcount='1' >
                           <cms:set my_img_src="<cms:get "gallery_img_<cms:show k_count />" />" />
                        
                           <cms:if "<cms:not_empty my_img_src />" >
                              <div id="photo_<cms:show k_count />" <cms:if k_count != '1'>style="display:none;"></cms:if> ><img src="<cms:show my_img_src />" /></div>
                           </cms:if>
                        </cms:repeat>
                        
                        <ul class="sqthumbs">
                        <cms:repeat count='6' startcount='1' >   
                           <cms:set my_thumbnail_src="<cms:get "thumb_gallery_img_<cms:show k_count />" />" />
                           
                           <cms:if "<cms:not_empty my_thumbnail_src />" >
                              <li><a href="javascript:void(0)" onClick="switch_product_img('photo_<cms:show k_count />', 3);"><img src="<cms:show my_thumbnail_src />"  width="90" height="90" alt="" /></a></li>
                           </cms:if>
                        </cms:repeat>
                        </ul>
                    </div>  

Also how would i go about showing a thumbnail and link for the video in my thumbnail page? The current editable thumbnail is taken off thumb_gallery2_img_<cms:show k_count /> and thumbnails are generated off images. The video thumbnail in this case would have to be custom made by me and uploaded.

Code: Select all

                        <ul>
                        <cms:pages>
                            <cms:repeat count='6' startcount='1'>
                         <cms:set my_img_src="<cms:get "gallery_img_<cms:show k_count />" />" />
                            <cms:set my_thumbnail2_src="<cms:get "thumb_gallery2_img_<cms:show k_count />" />" />
                            
                              <cms:if "<cms:not_empty my_img_src />" >
                                <li>
                                  <a href="<cms:show my_img_src />" rel="lightbox[portfolio]" title="<cms:show k_page_title/>">
                                    <img src="<cms:show my_thumbnail2_src/>"/>
                                  </a>
                                </li>
                              </cms:if>
                            </cms:repeat>
                            
                        </cms:pages>
                        </ul>

[KK]

Hi,

Just a little detour -
You have six images (and six associated thumbnails) named gallery_img_1, gallery_img_2, gallery_img_3, gallery_img_4, gallery_img_5 and gallery_img_6 where the names differ only in the suffixed number (1-6).

To display back the images (their paths actually), we could have simply used the standard way

Code: Select all

<cms:show gallery_img_1 />
<cms:show gallery_img_2 />
<cms:show gallery_img_3 />
<cms:show gallery_img_4 />
<cms:show gallery_img_5 />
<cms:show gallery_img_6 /> 

Instead of hard coding the names of the six images, as we have done above, since the names of the images are very similar we could also write -

Code: Select all

<cms:repeat count='6' startcount='1' >
   <cms:set my_img_src="<cms:get "gallery_img_<cms:show k_count />" />" />
   <cms:show my_img_src />                      
</cms:repeat>

In the code above, we are 'generating' the image names sequentially so that my_img_src will be 'gallery_img_1' on the first iteration and 'gallery_img_6' on the last.

Essentially we can use both the approaches. The first one is simplest but can grow unwieldy if we have a large number of images while the second one is a little complex but will require only changing the 'count' from '6' to '16' for handling 16 images instead of '6'.

As a solution to your problem (discussed in thread viewtopic.php?f=4&t=342) where you wished for 'Dynamic number of images in a post', we had used the second approach ('repeat' with 'set').

For the current video problem that you have there is only one editable region named 'video' so you really do not have to go through the complex way of showing it as you are doing in your code -

Code: Select all

<cms:set my_vid_src="<cms:get "video" />" />
                       
<cms:if "<cms:not_empty my_vid_src />" >
   <div><cms:show vid /></div>
</cms:if>

You could simply use -

Code: Select all

<cms:if "<cms:not_empty video />" >
   <div><cms:show video /></div>
</cms:if>

By the way, the code you were using will work too, but you are using the wrong name <cms:show vid /> where 'vid' is nothing. It should have been <cms:show my_vid_src />.

The discussion above should also answer your second query where you want to display the video's thumbnail that you have uploaded yourself.
I assume that you are using an image type editable region for the thumbnail.
Let us say its name is 'thumb_video'.
It can very simply be displayed by using the standard way -

Code: Select all

<img src="<cms:show thumb_video />" />

You can also combine it with the check to see if it has any value or is empty -

Code: Select all

<cms:if "<cms:not_empty thumb_video />" >
   <img src="<cms:show thumb_video />" />
</cms:if>

I think you'll see the pattern.
Do let me know if anything is unclear. Thanks.

Not sure what I'm doing wrong here. Still no video showing up. Embedded a youtube video with the iframe code. Followed what you did exactly.

Code: Select all

         <cms:editable 
            name='video' 
            type='textarea' 
            group='group_gallery'
            no_xss_check='1' />
        
        <cms:editable 
          name="thumb_video"
          label="Video Thumbnail"
          desc="Video Thumbnail of image above"
          width='195'
          height='90'
          group='group_gallery'
          type="image" />  

Code: Select all

   <div class="workimg">
                        
                           <cms:if "<cms:not_empty video />" >
                               <div><cms:show video /></div>
                            </cms:if>

                        <cms:repeat count='6' startcount='1' >
                           <cms:set my_img_src="<cms:get "gallery_img_<cms:show k_count />" />" />
                        
                           <cms:if "<cms:not_empty my_img_src />" >
                              <div id="photo_<cms:show k_count />" <cms:if k_count != '1'>style="display:none;"></cms:if> ><img src="<cms:show my_img_src />" /></div>
                           </cms:if>
                        </cms:repeat>
                        
                        <ul class="sqthumbs">
                        <cms:repeat count='6' startcount='1' >   
                           <cms:set my_thumbnail_src="<cms:get "thumb_gallery_img_<cms:show k_count />" />" />
                           
                           <cms:if "<cms:not_empty my_thumbnail_src />" >
                              <li><a href="javascript:void(0)" onClick="switch_product_img('photo_<cms:show k_count />', 3);"><img src="<cms:show my_thumbnail_src />"  width="90" height="90" alt="" /></a></li>
                           </cms:if>
                        </cms:repeat>
                        </ul>
                    </div>  

work_thumbs.html

Code: Select all

                        <cms:pages>
                           <cms:if "<cms:not_empty video />" >
                               <li>                           
                                  <a href="<cms:show video/>" rel="lightbox[portfolio]" title="<cms:show k_page_title/>">
                                    <cms:if "<cms:not_empty thumb_video />" >
                                       <img src="<cms:show thumb_video />" />
                                    </cms:if></a>
                                </li>
                           </cms:if>
                        
                            <cms:repeat count='6' startcount='1'>
                         <cms:set my_img_src="<cms:get "gallery_img_<cms:show k_count />" />" />
                            <cms:set my_thumbnail2_src="<cms:get "thumb_gallery2_img_<cms:show k_count />" />" />
                            
                              <cms:if "<cms:not_empty my_img_src />" >
                                <li>
                                  <a href="<cms:show my_img_src />" rel="lightbox[portfolio]" title="<cms:show k_page_title/>">
                                    <img src="<cms:show my_thumbnail2_src/>"/>
                                  </a>
                                </li>
                              </cms:if>
                            </cms:repeat>
                            
                        </cms:pages>

[KK]

Hi,

Ok, I had a look at your site.

The 'not_empty' tag is actually meant to be used with the wysiwyg editor and it strips off all HTML tags (including some spurious tags injected by the wysiwyg editor) to see if there is any content.

The video embed code you are using is something like

Code: Select all

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/Zd1o2ZzhVrk" frameborder="0" allowfullscreen></iframe>

In this case after stripping off the 'iframe' tag, nothing remains!

So, please revise the code to simply use the 'if' tag as follows -

Code: Select all

<cms:if video >
  <div><cms:show video /></div>
</cms:if>

and it should work now.