Resizing Content Around Pictures/Videos

When you put a picture or video on your page by either using the code snippet I've provided or by selecting one of the "float" position options from the image wizard, you may have run into a scenario such as the following:

First title

First sub-title

Example heading
Image Unavailable
Example caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque ullamcorper ante quis vehicula. Aenean massa odio, placerat eget vehicula id, porta eget mauris. In hac habitasse platea dictumst. Aenean suscipit pellentesque ante. Etiam vel nunc a justo laoreet congue. Phasellus at ullamcorper quam. In mattis sem blandit lectus pharetra ac feugiat nibh ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse a risus a lacus feugiat tempor. Morbi sed risus turpis, quis viverra arcu. Fusce vel erat libero. Nam nunc ante, laoreet at tincidunt quis, tempor vel lorem. Integer dapibus pulvinar est, sit amet ultricies orci posuere et. Mauris euismod sagittis sapien quis vulputate. Maecenas mollis massa ac nibh ultricies egestas. Etiam tincidunt, lorem sed bibendum ultricies, orci metus feugiat lacus, sit amet gravida ante mi sit amet metus.

Second sub-title

Example heading
Image Unavailable
Example caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque ullamcorper ante quis vehicula. Aenean massa odio, placerat eget vehicula id, porta eget mauris. In hac habitasse platea dictumst. Aenean suscipit pellentesque ante. Etiam vel nunc a justo laoreet congue. Phasellus at ullamcorper quam. In mattis sem blandit lectus pharetra ac feugiat nibh ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse a risus a lacus feugiat tempor. Morbi sed risus turpis, quis viverra arcu. Fusce vel erat libero. Nam nunc ante, laoreet at tincidunt quis, tempor vel lorem. Integer dapibus pulvinar est, sit amet ultricies orci posuere et. Mauris euismod sagittis sapien quis vulputate. Maecenas mollis massa ac nibh ultricies egestas. Etiam tincidunt, lorem sed bibendum ultricies, orci metus feugiat lacus, sit amet gravida ante mi sit amet metus.

Second title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque ullamcorper ante quis vehicula. Aenean massa odio, placerat eget vehicula id, porta eget mauris. In hac habitasse platea dictumst. Aenean suscipit pellentesque ante. Etiam vel nunc a justo laoreet congue. Phasellus at ullamcorper quam. In mattis sem blandit lectus pharetra ac feugiat nibh ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse a risus a lacus feugiat tempor. Morbi sed risus turpis, quis viverra arcu. Fusce vel erat libero. Nam nunc ante, laoreet at tincidunt quis, tempor vel lorem. Integer dapibus pulvinar est, sit amet ultricies orci posuere et. Mauris euismod sagittis sapien quis vulputate. Maecenas mollis massa ac nibh ultricies egestas. Etiam tincidunt, lorem sed bibendum ultricies, orci metus feugiat lacus, sit amet gravida ante mi sit amet metus.

Code:

First title

First sub-title

[[include inc:picture |
pictureurl=http://blog-template.wdfiles.com/local--resized-images/blog%3A_example/photo.jpg/medium.jpg |
heading=Example heading |
caption=Example caption |
float=right |
link=http://neurowiki2014.wikidot.com |
picresize= 200
]]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque ullamcorper ante quis vehicula. Aenean massa odio, placerat eget vehicula id, porta eget mauris. In hac habitasse platea dictumst. Aenean suscipit pellentesque ante. Etiam vel nunc a justo laoreet congue. Phasellus at ullamcorper quam. In mattis sem blandit lectus pharetra ac feugiat nibh ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse a risus a lacus feugiat tempor. Morbi sed risus turpis, quis viverra arcu. Fusce vel erat libero. Nam nunc ante, laoreet at tincidunt quis, tempor vel lorem. Integer dapibus pulvinar est, sit amet ultricies orci posuere et. Mauris euismod sagittis sapien quis vulputate. Maecenas mollis massa ac nibh ultricies egestas. Etiam tincidunt, lorem sed bibendum ultricies, orci metus feugiat lacus, sit amet gravida ante mi sit amet metus.

Second sub-title

[[include inc:picture |
pictureurl=http://blog-template.wdfiles.com/local--resized-images/blog%3A_example/photo.jpg/medium.jpg |
heading=Example heading |
caption=Example caption |
float=right |
link=http://neurowiki2014.wikidot.com |
picresize= 200
]]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque ullamcorper ante quis vehicula. Aenean massa odio, placerat eget vehicula id, porta eget mauris. In hac habitasse platea dictumst. Aenean suscipit pellentesque ante. Etiam vel nunc a justo laoreet congue. Phasellus at ullamcorper quam. In mattis sem blandit lectus pharetra ac feugiat nibh ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse a risus a lacus feugiat tempor. Morbi sed risus turpis, quis viverra arcu. Fusce vel erat libero. Nam nunc ante, laoreet at tincidunt quis, tempor vel lorem. Integer dapibus pulvinar est, sit amet ultricies orci posuere et. Mauris euismod sagittis sapien quis vulputate. Maecenas mollis massa ac nibh ultricies egestas. Etiam tincidunt, lorem sed bibendum ultricies, orci metus feugiat lacus, sit amet gravida ante mi sit amet metus.

Second title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque ullamcorper ante quis vehicula. Aenean massa odio, placerat eget vehicula id, porta eget mauris. In hac habitasse platea dictumst. Aenean suscipit pellentesque ante. Etiam vel nunc a justo laoreet congue. Phasellus at ullamcorper quam. In mattis sem blandit lectus pharetra ac feugiat nibh ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse a risus a lacus feugiat tempor. Morbi sed risus turpis, quis viverra arcu. Fusce vel erat libero. Nam nunc ante, laoreet at tincidunt quis, tempor vel lorem. Integer dapibus pulvinar est, sit amet ultricies orci posuere et. Mauris euismod sagittis sapien quis vulputate. Maecenas mollis massa ac nibh ultricies egestas. Etiam tincidunt, lorem sed bibendum ultricies, orci metus feugiat lacus, sit amet gravida ante mi sit amet metus.

But what if you wanted the paragraph to resize to the size of the picture? The answer is simple, just put this after the section in question

~~~~

This can also be done by positioning your cursor and clicking the "clear floats" button in the editor GUI (second row, 3rd button from the left).

Result:

First title

First sub-title

Example heading
Image Unavailable
Example caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque ullamcorper ante quis vehicula. Aenean massa odio, placerat eget vehicula id, porta eget mauris. In hac habitasse platea dictumst. Aenean suscipit pellentesque ante. Etiam vel nunc a justo laoreet congue. Phasellus at ullamcorper quam. In mattis sem blandit lectus pharetra ac feugiat nibh ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse a risus a lacus feugiat tempor. Morbi sed risus turpis, quis viverra arcu. Fusce vel erat libero. Nam nunc ante, laoreet at tincidunt quis, tempor vel lorem. Integer dapibus pulvinar est, sit amet ultricies orci posuere et. Mauris euismod sagittis sapien quis vulputate. Maecenas mollis massa ac nibh ultricies egestas. Etiam tincidunt, lorem sed bibendum ultricies, orci metus feugiat lacus, sit amet gravida ante mi sit amet metus.

Second sub-title

Example heading
Image Unavailable
Example caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque ullamcorper ante quis vehicula. Aenean massa odio, placerat eget vehicula id, porta eget mauris. In hac habitasse platea dictumst. Aenean suscipit pellentesque ante. Etiam vel nunc a justo laoreet congue. Phasellus at ullamcorper quam. In mattis sem blandit lectus pharetra ac feugiat nibh ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse a risus a lacus feugiat tempor. Morbi sed risus turpis, quis viverra arcu. Fusce vel erat libero. Nam nunc ante, laoreet at tincidunt quis, tempor vel lorem. Integer dapibus pulvinar est, sit amet ultricies orci posuere et. Mauris euismod sagittis sapien quis vulputate. Maecenas mollis massa ac nibh ultricies egestas. Etiam tincidunt, lorem sed bibendum ultricies, orci metus feugiat lacus, sit amet gravida ante mi sit amet metus.

Second title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque ullamcorper ante quis vehicula. Aenean massa odio, placerat eget vehicula id, porta eget mauris. In hac habitasse platea dictumst. Aenean suscipit pellentesque ante. Etiam vel nunc a justo laoreet congue. Phasellus at ullamcorper quam. In mattis sem blandit lectus pharetra ac feugiat nibh ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse a risus a lacus feugiat tempor. Morbi sed risus turpis, quis viverra arcu. Fusce vel erat libero. Nam nunc ante, laoreet at tincidunt quis, tempor vel lorem. Integer dapibus pulvinar est, sit amet ultricies orci posuere et. Mauris euismod sagittis sapien quis vulputate. Maecenas mollis massa ac nibh ultricies egestas. Etiam tincidunt, lorem sed bibendum ultricies, orci metus feugiat lacus, sit amet gravida ante mi sit amet metus.

Code:

First title

First sub-title

[[include inc:picture |
pictureurl=http://blog-template.wdfiles.com/local--resized-images/blog%3A_example/photo.jpg/medium.jpg |
heading=Example heading |
caption=Example caption |
float=right |
link=http://neurowiki2014.wikidot.com |
picresize= 200
]]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque ullamcorper ante quis vehicula. Aenean massa odio, placerat eget vehicula id, porta eget mauris. In hac habitasse platea dictumst. Aenean suscipit pellentesque ante. Etiam vel nunc a justo laoreet congue. Phasellus at ullamcorper quam. In mattis sem blandit lectus pharetra ac feugiat nibh ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse a risus a lacus feugiat tempor. Morbi sed risus turpis, quis viverra arcu. Fusce vel erat libero. Nam nunc ante, laoreet at tincidunt quis, tempor vel lorem. Integer dapibus pulvinar est, sit amet ultricies orci posuere et. Mauris euismod sagittis sapien quis vulputate. Maecenas mollis massa ac nibh ultricies egestas. Etiam tincidunt, lorem sed bibendum ultricies, orci metus feugiat lacus, sit amet gravida ante mi sit amet metus.

Second sub-title

[[include inc:picture |
pictureurl=http://blog-template.wdfiles.com/local--resized-images/blog%3A_example/photo.jpg/medium.jpg |
heading=Example heading |
caption=Example caption |
float=right |
link=http://neurowiki2014.wikidot.com |
picresize= 200
]]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque ullamcorper ante quis vehicula. Aenean massa odio, placerat eget vehicula id, porta eget mauris. In hac habitasse platea dictumst. Aenean suscipit pellentesque ante. Etiam vel nunc a justo laoreet congue. Phasellus at ullamcorper quam. In mattis sem blandit lectus pharetra ac feugiat nibh ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse a risus a lacus feugiat tempor. Morbi sed risus turpis, quis viverra arcu. Fusce vel erat libero. Nam nunc ante, laoreet at tincidunt quis, tempor vel lorem. Integer dapibus pulvinar est, sit amet ultricies orci posuere et. Mauris euismod sagittis sapien quis vulputate. Maecenas mollis massa ac nibh ultricies egestas. Etiam tincidunt, lorem sed bibendum ultricies, orci metus feugiat lacus, sit amet gravida ante mi sit amet metus.

Second title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque ullamcorper ante quis vehicula. Aenean massa odio, placerat eget vehicula id, porta eget mauris. In hac habitasse platea dictumst. Aenean suscipit pellentesque ante. Etiam vel nunc a justo laoreet congue. Phasellus at ullamcorper quam. In mattis sem blandit lectus pharetra ac feugiat nibh ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse a risus a lacus feugiat tempor. Morbi sed risus turpis, quis viverra arcu. Fusce vel erat libero. Nam nunc ante, laoreet at tincidunt quis, tempor vel lorem. Integer dapibus pulvinar est, sit amet ultricies orci posuere et. Mauris euismod sagittis sapien quis vulputate. Maecenas mollis massa ac nibh ultricies egestas. Etiam tincidunt, lorem sed bibendum ultricies, orci metus feugiat lacus, sit amet gravida ante mi sit amet metus.

Add a New Comment

Edit | Files | Tags | Source | Print

rating: 0+x

Recent chatter

Resizing Content Around Pictures/Videos
When you put a picture or video on your page by either using the code snippet I've provided or by selecting one of the "float" position options from the image wizard, you may have run into a scenario such as the following:

Linking
In order to link your wiki page to any page outside of this Neurowiki, position your cursor to the location in the text where you would like to place your link then click the "URL link wizard" button in the editor GUI (located in the middle row, 6th button from the right).
You will then be presented with a pop up prompting you to enter some information.
In the "URL" field place the url of the desired webpage (e.g. https://www.google.ca/).
Next in the "Anchor text" field enter the text you would like the hyperlink to have (e.g. Google example).
Finally, click the "insert code" button and your link will be generated.

Useful Code Snippets
First is a code snippet to add pictures with titles and captions:

Neurowiki created
I am happy to announce that the 2014 Neurowiki has been created and set up!

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License