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

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

[softsingapore]

Thanks! Finally got the image preview in my CMS.

[webmastersun]

Nice tips!

For our forum template, it already converted into responsive design thus I didn't use script like that any more.

But it is useful for mobile styles

Good job!

[hiker]

This is a great concept, although on my custom theme it is a bit different. Can you help me find where to place the code?

Here is my vbcms_content_article_preview code


{vb:raw css}
<div class="article_preview">
<vb:if condition="$showtitle">
<div class="title">
<h3 class="article_preview">
<a href="{vb:raw page_url}"><span>{vb:raw title}</span></a>&nbsp;
<vb:if condition="$can_edit">
<a class="edit" href="{vb:raw edit_url}">
<img class="editimage" src="{vb:stylevar imgdir_cms}/edit_small.png" alt="{vb:rawphrase edit}" />
</a>
</vb:if>
</h3>
</div>
</vb:if>

<vb:if condition="$showuser OR $showpublishdate OR ($showupdated AND $lastupdated) OR ($viewcount AND $showviewcount) OR ($showrating AND $rating!='')">
<div class="cms_article_username">
<vb:if condition="$showuser">
{vb:rawphrase by_x_nolink, {vb:raw memberaction_dropdown}}
</vb:if>

<vb:if condition="$showpublishdate">
<vb:if condition="!$published OR !$setpublish">
<span style="color:red">
<vb:if condition="$publishdate AND $setpublish">
{vb:rawphrase page_will_be_published_x {vb:raw publishdatelocal}} {vb:raw publishtimelocal}
<vb:else />
{vb:rawphrase page_not_published}
</vb:if>
</span>
<vb:elseif condition="$publishdate" />
{vb:rawphrase published_on_x {vb:raw publishdatelocal}} {vb:raw publishtimelocal}
</vb:if>
</vb:if>
<vb:if condition="$showupdated and $lastupdated">
&nbsp;{vb:rawphrase updated_on_x {vb:date {vb:raw lastupdated}, {vb:raw dateformat}}}&nbsp;
</vb:if>

<vb:if condition="$viewcount AND $showviewcount">
&nbsp;{vb:rawphrase number_of_views}: {vb:raw viewcount}&nbsp;
</vb:if>

<vb:if condition="$showrating">
<span class="cmsrating rating{vb:raw rating}"></span>
</vb:if>

</div>
</vb:if>
<vb:if condition="!empty($categories)">
<div class="cms_article_section_location">
<ol class="commalist">
<li>{vb:phrase in_category}</li>
<vb:each from="categories" key="categoryid" value="category">
<li><a href="{vb:raw category.category_url}">{vb:raw category.category}</a>{vb:raw category.comma}</li>
</vb:each>
</ol>
</div>
</vb:if>
<vb:comment>
<!-- Display Section Location -->
<div class="cms_article_section_location">
{vb:rawphrase section}: <a href="{vb:raw section_url}">{vb:var parenttitle}</a>
</div>
</vb:comment>

<div class="fullwidth article_preview_contents<vb:if condition="$showpreviewonly"> showpreviewonly</vb:if> restore">
<vb:if condition="$showpreviewonly">
<vb:if condition="$previewvideo">
{vb:raw previewvideo}
<vb:elseif condition="$previewimage" />
<a href="{vb:raw page_url}">
<img class="cms_article_preview_image" src="{vb:raw previewimage}" alt="<vb:if condition="$attachment_settings['alt']">{vb:raw attachment_settings['alt']}<vb:else />{vb:rawphrase article_preview}</vb:if>" <vb:if condition="$attachment_settings['title']">title="{vb:raw attachment_settings['title']}"</vb:if> /></a>
</vb:if>
</vb:if>
<div>
<br />
<div class="cms_article_txt_content postcontainer">
{vb:raw previewtext}
<vb:if condition="$preview_chopped">...</vb:if>
</div>
</div>
</div>

<div class="fullwidth">

<vb:if condition="$preview_chopped">
<span class="cms_article_readmore"><a href="{vb:raw page_url}">{vb:rawphrase read_more_phrase} <img src="{vb:stylevar imgdir_cms}/read_more-{vb:stylevar right}.png" alt="{vb:rawphrase read_more_phrase}" /></a>
</span>
</vb:if>

<vb:if condition="$comment_count">
<span class="cms_article_comment_number">
<a href="{vb:raw newcomment_url}"><img class="inlineimg" src="{vb:stylevar imgdir_button}/firstnew-comment.png" alt="{vb:rawphrase go_to_first_new_comment}" /></a>
<a href="{vb:raw newcomment_url}" rel="nofollow">{vb:raw comment_count}
<vb:if condition="$comment_count == 1">
{vb:rawphrase comment}
<vb:else />{vb:rawphrase comments}
</vb:if></a>
</span>
</vb:if>
</div>
</div>

[Santori]

For some reason you have yet the code but is not showing:
Try to change:

<div class="fullwidth article_preview_contents<vb:if condition="$showpreviewonly"> showpreviewonly</vb:if> restore">
<vb:if condition="$showpreviewonly">
<vb:if condition="$previewvideo">
{vb:raw previewvideo}
<vb:elseif condition="$previewimage" />
<a href="{vb:raw page_url}">
<img class="cms_article_preview_image" src="{vb:raw previewimage}" alt="<vb:if condition="$attachment_settings['alt']">{vb:raw attachment_settings['alt']}<vb:else />{vb:rawphrase article_preview}</vb:if>" <vb:if condition="$attachment_settings['title']">title="{vb:raw attachment_settings['title']}"</vb:if> /></a>
</vb:if>
</vb:if>
<div>
<br />
<div class="cms_article_txt_content postcontainer">
{vb:raw previewtext}
<vb:if condition="$preview_chopped">...</vb:if>
</div>
</div>
</div>

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>


OR DELETE THE CONDITIONAL.
<vb:if condition="$showpreviewonly"> </vb:if>