HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Image WYSIWYG options

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#67350 (In Topic #14360)
Avatar

Well-settled

Hi there,

I am wondering if there is some image properties that can be enabled on the Image Properties box for image alignment where text can be wrapped around to the left or right and an image to upload to the server. Also for padding or margin or whatever. I know they used to align and hspace, vspace etc. but would probably use CSS for these sorts of things these days.

Any ideas on how to set this up or perhaps could be added in a future release? If so they will possibly use it.

Thanks!
Back to the top
 
Posted
Rating:
#67352
Avatar

Community saint

Is this functionality you are seeking for when you include an image in a a post or article on YOUR site?

If it is, you can quickly build a 'Custom Comcode' tag that, once wrapped around the 'image', will give you the same display every time you use it.

An example can be supplied if that is the way you wish to go …

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#67360
Avatar

Community saint

Fletch said

Is this functionality you are seeking for when you include an image in a a post or article on YOUR site?

If it is, you can quickly build a 'Custom Comcode' tag that, once wrapped around the 'image', will give you the same display every time you use it.

An example can be supplied if that is the way you wish to go …

 


This is a very interesting concept, Fletch! And I would like to see an example if you have one. I think it would be a good time saver and easily used by anyone with low html understanding.

I've used div style code to accomplish what I think TY2U is referring to:
With WYSIWYG editing enabled and (source on)

Code

<div style="float: left; height: 200px; width: 100px padding: 1em;"><img src="url" title="" alt="" /></div>
Back to the top
 
Posted
Rating:
#67366
Avatar

Community saint

OK Jean, you've twisted my arm …

Step-1
Build a CSS class and place it in your 'theme_custom | global.css' folder, e.g.
.rightimg_border {
   float: right;
   margin-left: 20px;
   margin-bottom: 6px;
   border: 1px solid #869aa7; /* choose border color to match site */
        padding: 2px;
   }

Step-2
Build a Custom Comcode tag. Name it whatever makes sense to you …


Step-3 (usage)
Compose your 'post' or 'news' by using the pre-made custom comcode tag. I show how I have used several comcode tags in the same post to achieve the display I want …

and this is how it previews …


 :lol:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#67370
Avatar

Community saint

Brilliant!:)

Thank you Fleth for this detailed tutorial!
It really adds to my understanding, expanding on the Allen's Video.
This will be very useful for everyone.

It should be posted on the "community tutorials" section.

Cheers to young Fleth and sister!!!:thumbs:
Back to the top
 
Posted
Rating:
#67371
Avatar

Community saint

 :lol:  :'(  :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#67411
Avatar

Community saint

Thanks, Fletch, this is GRrrrreeaaat!

btw, your sister was cute.  :o

 :lol:  :lol:  :lol:
Back to the top
 
Posted
Rating:
#67413
Avatar

Community saint

psydoc said

btw, your sister was cute.  :o
 

I'll let her know in my next email to her (she's in Oz). At her OUR age, any compliment is welcome!

 :o


Last edit: by Fletch

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#67414
Avatar

Community saint

That's for sure, Fletch. Ok, you were cute, too…in a manly sort of way.  :ninja:

 :lol:  :lol:  :lol:
Back to the top
 
Posted
Rating:
#67443
Avatar

Get a room, guys.  ;)  :P


Like ocPortal on Facebook:
Back to the top
 
Posted
Rating:
#67446
Avatar

Community saint

Thanks for this Fletch! I had only been using the options in attachments (ie left inline, right inline) but this looks like an even more cleaver way of doing things, and prettier too!

Legends of Nor'Ova: A site powered by ocPortal; home of the Legends of Nor'Ova tabletop RPG wiki and community.

Like ocPortal? Want to thank Chris and gang somehow? Then help out in the chat room! It really needs your help! Just open it in a tab everytime you open your web browser, and when you hear a "ding", check it out!

"Those who want help should first be willing to give help."
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: