solved Add an image to Site Builder html box

alt=
@restmin
9 years ago
114 posts
I feel silly even asking this but it's driving me crazy. I am trying to edit some pages and just want basic text and a few images and right and left justified.

I am using Site Builder.

I have copy and pasted all my html post into the source box but the images all default left and text does not wrap around.

When I try to use the embed media option instead, it doesn't give me an option for a single image.

I can't seem to locate how to do this.

You can see what I am doing here: http://restministriessunroomcom.jamroomhosting.com/about-the-sunroom

Help?

Thanks!
updated by @restmin: 05/10/15 04:56:53AM
alt=
@restmin
9 years ago
114 posts
Anyone know? I'm thinking this SHOULD be an easy answer... (and it is driving me batty!) Thanks in advance!
joshwolve
joshwolve
@covertlogic
9 years ago
21 posts
Answering again without knowing sitebuilder much lol, but perhaps its the info you need.
From a purely code stance, (im not sure how exactly that page was built)

What you are looking for is the css property "float".
Here is a fiddle showing it in a live environment: http://jsfiddle.net/Wexcode/UsvQd/

If you can edit the html of the page, you could add float to it as such:
<img class="alignright size-full wp-image-21134" src="http://restministries.com/wp-content/uploads/2015/04/about-us-01.jpg" alt="about-us-01" width="298" height="444" style="float:left; margin-right:8px;">

A more elegant solution would be to create a float left class and simply add it to the class field of image as "floatleft" (this probably already exists)... such as:

<img class="alignright size-full wp-image-21134 floatleft" src="http://restministries.com/wp-content/uploads/2015/04/about-us-01.jpg" alt="about-us-01" width="298" height="444">

Then in your site/themes .css file you would add the class:

.floatleft {float:left; margin-right:8px;}

Then you could simply add that class any time you wanted to float an image left.
updated by @covertlogic: 04/07/15 01:23:31AM
michael
@michael
9 years ago
7,714 posts
restmin:... I ... just want basic text and a few images and right and left justified.

I am using Site Builder.

I have copy and pasted all my html post into the source box but the images all default left and text does not wrap around......

* To justify all the text, ctrl+a selects it all then click the 'justify' button in the editor. (its just right of the left align, center, right align buttons.)

* to float the image left, click on it to select it, then click on the left align button. (if you right click after that and choose 'insert image', you can add vertical space around the image on the ADVANCED tab. the name 'insert image' comes with the editor, I think it should be 'image settings' but it is what it is.)
updated by @michael: 04/07/15 01:56:11AM
derrickhand300
@derrickhand300
9 years ago
1,353 posts
Hope this helps.
https://youtu.be/thoy0cbmLKY

I think I my have had alt/title tags backwards..also my image size is WAY to large in this video- Its just to quickly show an image in the post
derrickhand300
@derrickhand300
9 years ago
1,353 posts
Here is a video using your specific content
https://youtu.be/SYUeQyVIKwA

Because you already have the content on the page you can just use the align left or align right tabs in the editor- then add the margins

Yo can also add the mouseover text and links in the first video if you want
Hope this helps..
derrickhand300
@derrickhand300
9 years ago
1,353 posts
Also here is a video of a workaround for my lack of template coding skills..(Please select 1080 hd in youtube settings when watching then it wont be so blurry)

https://youtu.be/LhQRFZ4QS48

On your particular content in this instance this template would not be much use- BUT if you look at my sign in box to the right in the video-that is created in a widget using a ton of html

I have the sign in box on almost every page of my site-until recently I did this by adding the html code to EVERY widget on the pages...then when I wanted to change the sign in box- I had to do it ON EVERY PAGE.

This is where the poer of the template comes in...add the code from the widget to a notepad file-give it a name and save it as a .tpl file

Upload it to the server then put it in any widget using
{jrCore_include template="MYTEMPLATENAME.TPL"

Now if you ever want to add/edit to this box ( maybe an advertisement) you just edit the template file an the server and save- then its automatically added to all the widgets at once.

This is really useful for a number of things besides a sign in box- maybe a form- or a slider w/advertisements that need to change from time to time...etc...

Another great thing about this is WHEN you do need to edit the temlate file on the server- just go to the server- copy the present code- then go to your page- create a empty widget somewhere....make the edits easily in site suilder ( adding images etc...what ever)...when you have it all working in the widget properly- then copy that code and repalce the code on your server with that code...

Using Site Builder WITH templates has really helped me because I get lost in the template code when I cannot see it

Have a nice day!
updated by @derrickhand300: 04/07/15 07:39:06AM
Strumelia
Strumelia
@strumelia
9 years ago
3,603 posts
Beginner question:
Is creating a new template really as simple as making a new notepad file, pasting the proper code in, and saving the file with a .tpl extension?
(Obviously the code has to be correct for the purpose intended)
If so, then are there specific "paste as..." and/or "save as..." choices I need to select when pasting code into the notepad file and saving it as a new template?
Thanks!


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
derrickhand300
@derrickhand300
9 years ago
1,353 posts
Notice I select save as "all file types" in notepad after adding the .tpl extension
Thats all there is to it
derrickhand300
@derrickhand300
9 years ago
1,353 posts
You cAn also save as
.html
.css
.php
And many others as long as you select save as all file types
By default notepad is going to save it as a txt file if you forget to select all file types
Strumelia
Strumelia
@strumelia
9 years ago
3,603 posts
Thanks Curtis! I'll remember this.

Is there anything I need to know when pasting the code in to keep the code's indentation style formatting?





--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

updated by @strumelia: 04/07/15 01:12:28PM
derrickhand300
@derrickhand300
9 years ago
1,353 posts
Well as you can see in the vid I do shut wordwrap off but other than that I think indenting is mainly so other people can look at your code and read it like a poem-if it gets important to you you can copy/paste it into html tidy on line
Right now for the sake of hurrying a video and trying to get work done im just going with the copy/paste...but i'm not much on poetry
Browsers seem to me like they read the code without ANY indenting if you want to add it that way
just my experience but I think Google might have more accurate answers-but I just shut wordwrap off here so continuous line are not broken
Strumelia
Strumelia
@strumelia
9 years ago
3,603 posts
Ok thank you. :)


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
michael
@michael
9 years ago
7,714 posts
Thanks Curtis, those videos are excellent. Really awesome.

As for code formatting, yeah browsers don't care, they can read it all scrunched up like this
(function(b){"function"===typeof define&&define.amd?define(["jquery"],b):b(jQuery)})(function(b){var j=[],n=b(document),k=navigator.userAgent.toLowerCase(),l=b(window),g=[],o=null,p=/msie/.test(k)&&!/opera/.test(k),q=/opera/.test(k),m,r;m=p&&/msie 6./.test(k)&&"object"!==typeof window.XMLHttpRequest;r=p&&/msie 7.0/.test(k);b.modal=function(a,h){return b.modal.impl.init(a,h)};b.modal.close=function(){b.modal.impl.close()};b.modal.focus=function(a){b.modal.impl.focus(a)};b.modal.setContainerDimensions=
function(){b.modal.impl.setContainerDimensions()};b.modal.setPosition=function(){b.modal.impl.setPosition()};b.modal.update=function(a,h){b.modal.impl.update(a,h)};b.fn.modal=function(a){return b.modal.impl.init(this,a)};b.modal.defaults={appendTo:"body",focus:!0,opacity:50,overlayId:"simplemodal-overlay",overlayCss:{},containerId:"simplemodal-container",containerCss:{},dataId:"simplemodal-data",dataCss:{},minHeight:null,minWidth:null,maxHeight:null,maxWidth:null,autoResize:!1,autoPosition:!0,zIndex:1E3,
close:!0,closeHTML:'<a class="modalCloseImg" title="Close"></a>',closeClass:"simplemodal-close",escClose:!0,overlayClose:!1,fixed:!0,position:null,persist:!1,modal:!0,onOpen:null,onShow:null,onClose:null};b.modal.impl={d:{},init:function(a,h){if(this.d.data)return!1;o=p&&!b.support.boxModel;this.o=b.extend({},b.modal.defaults,h);this.zIndex=this.o.zIndex;this.occb=!1;if("object"===typeof a){if(a=a instanceof b?a:b(a),this.d.placeholder=!1,0<a.parent().parent().size()&&(a.before(b("<span></span>").attr("id",
"simplemodal-placeholder").css({display:"none"})),this.d.placeholder=!0,this.display=a.css("display"),!this.o.persist))this.d.orig=a.clone(!0)}else if("string"===typeof a||"number"===typeof a)a=b("<div></div>").html(a);else return alert("SimpleModal Error: Unsupported data type: "+typeof a),this;this.create(a);this.open();b.isFunction(this.o.onShow)&&this.o.onShow.apply(this,[this.d]);return this},create:function(a){this.getDimensions();if(this.o.modal&&m)this.d.iframe=b('<iframe src="javascript:false;"></iframe>').css(b.extend(this.o.iframeCss,
{display:"none",opacity:0,position:"fixed",height:g[0],width:g[1],zIndex:this.o.zIndex,top:0,left:0})).appendTo(this.o.appendTo);this.d.overlay=b("<div></div>").attr("id",this.o.overlayId).addClass("simplemodal-overlay").css(b.extend(this.o.overlayCss,{display:"none",opacity:this.o.opacity/100,height:this.o.modal?j[0]:0,width:this.o.modal?j[1]:0,position:"fixed",left:0,top:0,zIndex:this.o.zIndex+1})).appendTo(this.o.appendTo);this.d.container=b("<div></div>").attr("id",this.o.containerId).addClass("simplemodal-container").css(b.extend({position:this.o.fixed?
"fixed":"absolute"},this.o.containerCss,{display:"none",zIndex:this.o.zIndex+2})).append(this.o.close&&this.o.closeHTML?b(this.o.closeHTML).addClass(this.o.closeClass):"").appendTo(this.o.appendTo);this.d.wrap=b("<div></div>").attr("tabIndex",-1).addClass("simplemodal-wrap").css({height:"100%",outline:0,width:"100%"}).appendTo(this.d.container);this.d.data=a.attr("id",a.attr("id")||this.o.dataId).addClass("simplemodal-data").css(b.extend(this.o.dataCss,{display:"none"})).appendTo("body");this.setContainerDimensions();
this.d.data.appendTo(this.d.wrap);(m||o)&&this.fixIE()},bindEvents:function(){var a=this;b("."+a.o.closeClass).bind("click.simplemodal",function(b){b.preventDefault();a.close()});a.o.modal&&a.o.close&&a.o.overlayClose&&a.d.overlay.bind("click.simplemodal",function(b){b.preventDefault();a.close()});n.bind("keydown.simplemodal",function(b){a.o.modal&&9===b.keyCode?a.watchTab(b):a.o.close&&a.o.escClose&&27===b.keyCode&&(b.preventDefault(),a.close())});l.bind("resize.simplemodal orientationchange.simplemodal",
function(){a.getDimensions();a.o.autoResize?a.setContainerDi

But for us humans, its really good practice to keep everything clean.

eg, take this as a base:
<div class="container">
    <table class="page_table">
        <tr class="page_table_row">
            <td class="page_table_cell center" colspan="8">{jrCore_lang module="jrAudio" id="53" default="no audio files were found"}</td>
        </tr>
    </table>
</div>

and see if you can figure out what tag i accidently forgot to close
A:
<div class="container">
    <table class="page_table">
        <tr class="page_table_row">
            <td class="page_table_cell center" colspan="8">{jrCore_lang module="jrAudio" id="53" default="no audio files were found"}</td>
        </tr>
    </table>

and B:
<div class="container"><table class="page_table"><tr class="page_table_row"><td  class="page_table_cell center" colspan="8">{jrCore_lang module="jrAudio" id="53" default="no audio files were found"}</td></tr></table>

If its pretty its easier to see where mistakes are. :)
Strumelia
Strumelia
@strumelia
9 years ago
3,603 posts
Kind of like when people on forums don't bother using periods, caps, or any punctuation. Just a sea of text characters. Lots of people will then simply skip reading their posts altogether. But we wouldn't be very smart to ignore our site code altogether. !


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
derrickhand300
@derrickhand300
9 years ago
1,353 posts
Well here is my deal,
I think when just starting to learn to write code and upload it to the server its best to keep it as simple as possible to gain confidence so I recommended Notepad...no need to download anything-its there its fast -try it.
Currently I am using a free editor called PSPad which works great and its 100% free...problem is it has so many buttons bells and whistles I think it could be intimidating to someone making their first template.

I have PSPad set to open all .tpl .css .php and .html files as default so if I open any file from Filezilla it opens in PSPad- where the code is automatically indented-then save it..

I agree with michael in that I like indenting to show the DIVs and Tables..so I can easily count opening/closing tags...other than that at this stage in my personal development...I dont need anything else.

As for my typing I struggle here lately- seems all the cigarette ashes and red bulls spilled on my keyboard have had a concrete effect on some keys...oh and I cant look up and type at the same time ( I really can spell MANY of these words :)
alt=
@restmin
9 years ago
114 posts
Thank you to all of you! When it comes to html, I tend to code what I can behind the scenes like vspace="15" etc (I love the "MyWords" add on in Firefox for this), so I thought I would mess up the code using the justify button for images.

It all worked fine.

@derrickhand300 - extra thanks for the video details! Wow. Awesome. I am a visual person so this was perfect.

And templates! I am so glad you posted this now for me. I will do this for a bunch of little areas that will need updated in the future.

@Michael - is there a place on this forum where we could add an area of "Quick Tricks and Tips" or "Tutorials" for things like this? For people like me who are coming from Ning and looking for these basics, it would be a great place to scroll through and easily find some tips before getting confused.

Thanks, everyone! :)
derrickhand300
@derrickhand300
9 years ago
1,353 posts
You're welcome- the page really looks good now
http://restministriessunroomcom.jamroomhosting.com/about-the-sunroom

I need about 2 weeks in that sunroom :)

Tags