How do I get a new line or new paragraph after the image when using float=left ??
I managed to find a solution by enclosing in a [[div]] block. I had to specify a width of 100%, as a standard (no style parameter) [[div]] statement didn't seem to work for some reason.
…
Why bother floating the image if you don't want any content to wrap around it? You can clear floats by using the Wikidot syntax:
[[f<image ...]]
~~~~
Some text on the next line.
Your div block solution works well too. You could try clear: both; or clear: left; instead of setting the width to 100% in your style statement.
Pesky disclaimer: Depending on your site's theme, clearing floats can sometimes wreak havoc on your page layout by pushing all of the content below your sidebar.
-Ed
I wanted 4 images side by side. Without any float setting, the images aligned vertically as each image centered itself across the entire page width. Setting float=left solved that problem beautifully, but the following text also floated. Maybe I should have used a different approach (e.g. using some kind of horizontal div or table columns ??)
To clear the float, after the last image code and before the text you can add a div as follows:
[[div style="clear:left;"]]
[[/div]]
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
I wanted 4 images side by side.
Ah, of course. I was thinking in terms of a single image.
I have uploaded some .png images to my page (e.g. screenshot1.png) and have set the image field accordingly.
|image=screenshot1.png
This works great, but if I click on the image to view the full size image, wikidot thinks the url is a page that doesn't exist and asks me if I want to create it.
Is there an easy work around for this ??
It would be helpful if you set permissions so we could view the source of your page or if you posted the source you are using. I looked at one of your pages from your recent activity and viewed the HTML source. This is what is being rendered:
<td class="image-box-image" style="width:195px; text-align:center;"> <a class="newpage" href="/"></a><a href="/sureanalysis-user-edit.png"> <img src="/local--files/sureanalysis/sureanalysis-user-edit.png" style="border:1px solid #999;" alt="Image Unavailable" width="195px" class="image" /></a></td>
You've got an empty link going to "/" and the <a href="/sureanalysis-user-edit.png"> is what's triggering the page does not exist problem. That link is not constructed properly. To display an image in a table cell, all you have to so is use (for example) wiki syntax like this:
[[image sureanalysis-user-edit.png size="small"]]
This will display a small version of your image and create proper links to the full sized image. If I'm missing the mark on what you're trying to do, post the relevant source from the page so we can take a closer look.
-Ed
Here is the code I am using. It is same as Nebula example code on this page, except that I have removed the 'http://<host>/<path>' portion and just included the filename.
[[include :snippets:image
|image=sureanalysis-user-edit.png
|float=left
|heading=User Edit
|caption=User Edit dialog
]]
I can see from the html ouput (below) that the 'problem' is the <a href="/sureanalysis-user-edit.png"> and that wikidot will interpret that as a page name.
So is there a way to get the correct href for a local file ??
<td class="image-box-image" style="width:195px; text-align:center;"><a class="newpage" href="/"></a><a href="/sureanalysis-user-edit.png"><img src="/local—files/sureanalysis/sureanalysis-user-edit.png" style="border:1px solid #999;" alt="Image Unavailable" width="195px" class="image" /></a></td>
Sorry, I should have refreshed my memory on this thread by reading from the top! I haven't used this snippet, but I see that you can add a link option as a parameter. I just did some testing and if you add the link parameter and structure the link like this it should work.
[[include :snippets:image
|image=your-image.jpg
|float=left
|heading=Your Heading
|caption=Your Caption
|link=/local--files/category:pagename/your-image.jpg
]]
category:pagename is the current page and your-image.jpg is the image file uploaded to the current page.
Does that help?
Thank you. That worked nicely :)
Not sure how I missed that link field earlier <blush>
If I use the "~~~~" or
div style="clear:left;"
/div
to get a new line, I find that the new line starts in-line with the bottom of the information that is in the Side Bar. This creates a large space of nothing on the page which is most annoying (see http://javeagreenbowls.wikidot.com/sandbox) - is there any way around this?
Jonathan
All you need to do is replace the left with right:
[[div style="clear:right;"]]
[[/div]]
Alternatively, you could use the following (it's the same thing):
~~~~>
This will work as long as your second image box is floated to the right.
I had a similar situation to 'Brendan Simon's' issue about using PNG images with this snippet. The link advice that was provided was great and it works well, so thanks to 'Ed Johnson' for that.
However, I have an additional problem in that every time I visit the page where I have used this image snippet with a png image it always displays as a thumbnail first and I have to click on the image and then click back button on the browser to get the image to render itself to its proper size.
Is there any code I can use to get the page to render page to the full size image first time the page is displayed rather than just get a thumbnail? I tried lots of variances such as size ="large" after the image file name, but nothing seems to fix this defaulting to the thumbnail issue I am having when someone first visits the page.
Ye Olde - Creator and Chief Admin of www.music-industrapedia.com (Global Music Industry Directory & Encyclopedia) hosted on Wikidot.
Hey Ye Olde,
Could you link to the site/page please?
No way for me to figure out a solution if I can't see the problem.
- Shane
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
I should mention that the png images I am using are creative commons maps that I got off the web and which end in a file name .svg.png so that means they are Scalable Vector Graphic png images.
Could the inherent properties of the svg.png files be causing the thumnail default?
The images are 500px in size by the way. Hope this additional info helps with a clearer background to my problem.
Cheers - Ye Olde
Ye Olde - Creator and Chief Admin of www.music-industrapedia.com (Global Music Industry Directory & Encyclopedia) hosted on Wikidot.
they are Scalable Vector Graphic png images
There is no such thing, they are either .svg or .png images. I suspect the problem is the .svg file. This came up a while back I'll see what I can find.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Thanks Rob, I meant to write back earlier to say that your comment put me on the right track with the image selection and I was able to find and use .svg images instead that didn't have both the .png and .svg in their file name as can be found with some WIkimedia Commons images (for some reason)
Regards
Ye Olde
Ye Olde - Creator and Chief Admin of www.music-industrapedia.com (Global Music Industry Directory & Encyclopedia) hosted on Wikidot.
You may now use the title attribute. I don't know why I didn't set it before…
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
When I click on a local image, I get taken to a "page not found" error. I see above that you can work around the issue by manually specifying a link to the image's address under the local—files namespace, but really, shouldn't that be automatic anyways?