Is there a way to position images within the Rails 6 ActiveText Trix editor when writing content? If you upload an image, it is automatically placed in the middle of the page. I can change this in the CSS file, but when writing many "blogs", how can I position each image on the left or right within that particular blog on a live site? Each blog should have a potentially different layout.
Related
I'm creating a website in which I use bootstrap to manage the responsivity of the website. in A section I've create some component in which is written something but because the text is too long I've give it a fixed size with overflow:hidden; I've seen the framework called masonry that let you to give to component different size and clicking on one of this you expand it.
in bootstrap official website I've found this example: Bootstrap and masonry example
but doesn't explain nothing.
how can I use masonry features in a bootstrap website with containers, row and cols?
I have a blog site and am using the trix editor but I would like to have the images float either left or right and have the text wrap around them. I have searched all over looking for a solution and cannot imagine why image alignment is not included. I'm sure it is possible with css but but I cannot figure it out.
Trix 1.3.1 doesn't support this, but there is an open PR, https://github.com/basecamp/trix/pull/791 (May 2020)
One commenter published a fork of trix that adds align-center and align-right buttons to the toolbar.
My upcoming mobile web project requires viewing dynamically chosen pdf files inside the webpage. I am using iFrame to display the pdf file and the file can be scrolled using two-finger scrolling. But the problems I am facing are:
The first page of the file is not displayed completely on the iPad and gets cut off along the width unlike when I view it on the desktop browsers where the first page of the pdf is always entirely displayed although zoomed out to fit in the iFrame area.
There is no visual indication for the users that the pdf document can be scrolled, i.e., there is no scroll bar on the pdf document.
The controls (page navigation, zoom etc.) for the pdf viewer (Adobe reader) don't appear on the document unlike when I see it on the desktop browsers.
What is the best way to achieve what I am trying to do? Do any of you experts know any solutions/workarounds to the problems I am facing? An entirely different approach using anything other than iFrame can also be considered.
The reason why the pdf should be inside the html page is that, the list of pdf files will be on a menu bar on the left side of the page and the user can click on any of them to view on the same page. Ideally, they will have the capability to toggle between full screen view and that view.
Any help is appreciated.
I created a tiny JavaScript module that helps you to show a PDF inline and be able to scroll it. But I also couldn't figure out a way to make it fit the total width of the parent container.
Check it out: https://github.com/williamrjribeiro/ipdf-scroll
Cheers.
I came across this Recommended way to embed PDF in HTML? while researching on the web to find an answer.
The mentioned link discusses about some options that I can use and the google document viewer works for me though don't know if there is anything (like data limit) I need to be aware of before using it on the website. Also I have no idea if it is a good solution (though the full screen mode is not available, but zoom-in/zoom-out and next/prev page buttons are there are show up in the mobile safari on the iPad) to use for an web app that will be run on the iPad.
Anyway, I will keep researching for a better solution and if i don't find any, I'll stick to the google document viewer.
The issue appears to be a bug with Safari on the IPad.
I didn't find a solution for embedding the pdf in html but I did find this:
If you return FileStreamResult from your controller action instead of a view, the pdf will open in a new tab, it's not embedded html but at least your user is not having to download files and open them manually.
I had the same problem of the pdf not being displayed completely. The only thing I found to fix this was the change the size of the div containing the pdf.
For example if the element containing the pdf is a div then I change its width to any value and the rollback to the value it had before. Changing Width or height any one works.
Sometimes I had to wait a little using a setTimeout before calling my resizable method
I've got an app with a big 'help' page that describes how to use it. This page features a lot of text with some embedded images. Is there some way to 'link' or attach these images to the bottom of specific text boxes so things will lay out reasonably well for any localization we do? In other words, if the French translation of a block of text ends up being two lines longer than the English equivalent, I'd like the image that's placed below that text to be pushed downward by the appropriate amount without having to re-edit the layout of of the .xib file manually. Possible?
You can make HTML page. You can place any thing after your text and can do modification. As it is HTML page it can easily wrap and auto adjust itself. And show the html page in your webview by saving the HTML page in your local data storage
HI ,
i am using Tinymce with advimage plugin in my rails application.
I have doubt that When i click on the Insert/Edit iamge in the Tinymce a popup window comes and in the appearance tab the preview is not shown
How to get the preview image ?? in the Appearance tab
There are two "previews" in the Advanced Image plugin dialog. The first is the preview of the image you have selected. The second is to allow you to visualise what the style changes you make (for instance border, alignment) would look like and uses an "sample" image.
I assume what you would like to see is your selected image displayed instead of the "sample" image. To achieve this, you will need to alter the advimage plugin, which is bundled with TinyMCE, to use the currently selected image instead of the default (sample.gif).
One thing to consider is that if your end user selects a large image, then they wouldn't be able to see the application of the style changes within the small preview window.