Tutorial: How to see, images, videos and more into Vbulletin mobile

[Santori]

Hello:

After a lot of hours, I finally find the solutions to see to videos and images properly into my vbulletin mobile style: Some of this changes are by another people, I don,t remenber all, but thank you all of them...other changes are symple by me.

This are the changes you need to made.

FIXING CMS
Into the cms mobile you need to see the videos into a preview article page and into article page with a correct width.

Go to vbcms_content_article_preview

Search to :

<div class="content">
				<blockquote class="postcontent restore">
					{vb:raw previewtext}
					<vb:if condition="$preview_chopped">...</vb:if>
				</blockquote>
			</div>

and change it for:

<div class="content">
                         <vb:if condition="$previewvideo">
				<div class="videocontainer">{vb:raw previewvideo}</div>
			<vb:elseif condition="$previewimage" />
				<a href="{vb:raw page_url}">
				<img class="cms_article_preview_image" src="{vb:raw previewimage}" alt="{vb:rawphrase article_preview}" width="270px" height="150px"/></a>
                          
			</vb:if>
				<blockquote class="postcontent restore">
					{vb:raw previewtext}
					<vb:if condition="$preview_chopped">...</vb:if>
				</blockquote>
			</div>

Now you have images and videos into mobile CMS preview; I put the size 270px because is the maximun size I recommend for mobile devices as Iphone or Samsung Galaxy.

But the videos are too big; no problem:

Go to: vbulletin.css

And at top write:

.videocontainer .restrain {max-width: 270px; max-height:150px }

NOW YOU HAVE ALSO RESIZED VIDEOS INTO PREVIEW AND ARTICLE PAGES.


FIXING FORUM AND BLOGS IMAGES

Ok, Now we have another problem: into forum pages and blosg, ect, the images are too big, and if you install a mod that resize the images this will be resized too into your full site.

No problem. go to the

Header template and put this code:

<script type="text/javascript">
function fixImgs(b){var a=document.getElementsByTagName("img");for(i=0;i<a.length;i++)if(w=a[i].width,h=a[i].height,w>b)f=1-(w-b)/w,a[i].width=w*f,a[i].height=h*f}function addLoadEvent(b){var a=window.onload;window.onload=typeof window.onload!="function"?b:function(){a&&a();b()}}addLoadEvent(function(){fixImgs(270)});
</script>

This javascript will resize all the images to maximum witdh 270, but you can change it, this also works if you put the code into full site.



UPLOADING SERVICES TO PUT PHOTOS INTO POST
Now we look for the sollution to upload images into post. Into my case I don?t allow users to take photos or upload images and I put a third party service: tinypic.


You must go to:

newthread

Find:

<fieldset class="ui-grid-a"> 
			<div class="ui-block-a"><button type="submit" name="sbutton" data-theme="a">{vb:rawphrase submit_new_thread}</button></div>
			<div class="ui-block-b"><button type="submit" name="preview" data-theme="d">{vb:rawphrase preview_post}</button></div>
                
		</fieldset>

And paste this code after:

<table style="background:#FFFFFF" align="center">
<tr>
<td style="text-align:center">
<strong>You need attach a Photo?</strong> Try the Image uploader, and copy and paste the code into the message area</td>
</tr>
<tr>
<td style="background:#076bb6;text-align:center">
<script type="text/javascript">
tinypic_layout = 'narrow';
tinypic_type = 'both';
tinypic_links = 'forum';
tinypic_language = 'es';
tinypic_search = 'false';
tinypic_autoload = true;
</script>
<script src="http://plugin.tinypic.com/j/plugin.js" type="text/javascript"></script>
</td>
</tr>
</table>

We need to put this code too for the New reply template and QUICK REPLY.

For quick reply go to: SHOWTHREAD and make the same changes that above.

THE LAST PROBLEM CAN BE: THE ATTACHMENT ARE NOT SHOWING.

You need to be sure you have this code into postbit template:

<div class="content">
				<div id="post_message_{vb:raw post.postid}">
					<blockquote class="postcontent restore">
						{vb:raw post.message}
					</blockquote>
				</div>

				<vb:if condition="$show['attachments']">
				<div class="attachments">

				<vb:if condition="$show['thumbnailattachment']">
					<fieldset class="postcontent">
						<legend><img src="{vb:stylevar imgdir_misc}/paperclip.png" class="inlineimg" alt="{vb:rawphrase attached_thumbnails}" /> {vb:rawphrase attached_thumbnails}</legend>
						{vb:raw post.thumbnailattachments}
					</fieldset>
				</vb:if>

				<vb:if condition="$show['imageattachment']">
					<fieldset class="postcontent">
						<legend><img src="{vb:stylevar imgdir_misc}/paperclip.png" class="inlineimg" /> {vb:rawphrase attached_images}</legend>
						{vb:raw post.imageattachments}
					</fieldset>
				</vb:if>

				<vb:if condition="$show['imageattachmentlink']">
					<fieldset class="postcontent">
						<legend><img src="{vb:stylevar imgdir_misc}/paperclip.png" class="inlineimg" /> {vb:rawphrase attached_images}</legend>
						<ul>
						{vb:raw post.imageattachmentlinks}
						</ul>
					</fieldset>
				</vb:if>

				<vb:if condition="$show['otherattachment']">
					<fieldset class="postcontent">
						<legend><img src="{vb:stylevar imgdir_misc}/paperclip.png" class="inlineimg" /> {vb:rawphrase attached_files}</legend>
						<ul>
						{vb:raw post.otherattachments}
						</ul>
					</fieldset>
				</vb:if>

				<vb:if condition="$show['moderatedattachment']">
					<fieldset class="postcontent">
						<legend><img src="{vb:stylevar imgdir_misc}/paperclip.png" class="inlineimg" /> {vb:rawphrase attachments_pending_approval}</legend>
						<ul>
						{vb:raw post.moderatedattachments}
						</ul>
					</fieldset>
				</vb:if>

				</div>
				<!-- / attachments -->
				</vb:if>


			</div>

Now look into your mobile template for the following templates;

postbit_attachmentimage
postbit_attachmentthumbnail

Copy this templates from the full site templates...


That is all!!!!