How can I make inline Images ( Images used in the text of article ) responsive in Drupal 7.( I use Wysiwg and CKEditor). I can make Image Field files responsive with Adaptive Image Module but apparently it doesn't have any option for doing such action for inline images.
Other module like Picture and some thing like that make Image styles for different styles of theme( breakpoints indeed) but I want to make may image adaptive with all resolutions in other word I want all of my images be fluid, not conditional.The http://www.fastcompany.com have the best image styles in my opinion and I want exactly this behavior for my project.
For more information I studied all forums in Drupal.org about this issue but I can't find any reliable solution.
TNX
Add this to your css (make to fit your own css rules for wanted images):
img {
width: 100%;
max-width: 100%;
}
Related
I'm a beginner of Wagtail, and trying to follow the tutorial to build a blog website.
The question I have is about RichTextField, inserting an image in the editor, and I have chosen the "Full Width" format, expecting the image should be centered (as said in the doc).
However it's not centered, as shown in the picture below.
What's wrong?
The docs don't say anything about the image being centred. On the contrary, the developer docs say:
The CSS classes added to images do not come with any accompanying stylesheets, or inline styles. e.g. the left class will do nothing, by default. The developer is expected to add these classes to their front end CSS files, to define exactly what they want left, right or full-width to mean.
So, to centre the image, you could define a CSS rule such as:
img.full-width {
display: block;
margin: auto;
}
When I try to add link to very left text in quill editor the popUp opened is hiding in the left side.And I am using Snow theme.
The below image shows my issue.
Not the most elegant solution, but you may need to override the css:
.ql-tooltip {
left: 0!important;
}
Sometimes quilljs doesn't play nice with theming libraries like certain versions of bootstrap (which was the issue in my case).
Currently, I am using a directive from a third-party library for a UI toggle button. I changed the background color and left/right positions of the toggle button a bit to meet my business specifications. E.g. the out-of-the-box style came as light green for true, light red for false; I changed this to a darker green for true, and a light grey for false. I also moved the toggle positionally a bit to the left. All of this works fine.
The one issue I'm experiencing is that for a split millisecond when the page with the toggle button renders, I see the old style quickly change from what came out-of-the-box, to my updated style. There aren't any other glitches in style after this fact, just the initial loading shows some quick shifting around on the element. This isn't a huge issue but I can't seem to pinpoint the issue or know why it is happening. Any thoughts? Something in an issue for CSS hierarchy perhaps?
Notes relevant to the issue:
I used the inspector to find the classes I needed to override, since the directive itself just uses an nz-toggle tag.
I am using !important to override. I've read that this is bad practice in itself but it is being used across the entire project and has been established as "our standard" of overriding styles
Here's an example of one rule from my CSS file compared to what comes out of the box:
.nz-toggle-wrap.true {
background-color: #089900 !important;
right: -16px !important;
width: 50px !important;
height: 28px !important;
}
vs.
.nz-toggle-wrap.true {background-color: #60bd68;}
Any thoughts?
This happens because your "new" CSS loads after the "old" CSS.
Of course that should be true anyway, because you want to override the old style, but it seems that the old and new code are too far away from each other hence you manage to see it change.
To solve this you have to move the new style "closer" to the old style.
The way to do it depends on your project architecture and your build process.
Another option is that the class "true" is added only after page load, and so only then your new style kicks in.
If you are loading this "third party library" locally, you might have to directly edit the CSS files of the plug-in.
With the plug-in you linked, maybe you need to edit this file directly to prevent the "flicker", which is caused by the styles loading in sequence:
https://github.com/tannerlinsley/nz-toggle/blob/master/src/nz-toggle.styl
I'm familiar with Bootstrap and how to make it show/hide objects via responsive classes. However, Stencil appears to use it's own class names, and I'm unable to find reference to them. I have found some Stencil documentation, but I can't find this in it.
I'm using the theme Exhibit and found in the sidebar code that I can make an object appear in the drawer on small screens by declaring class="drawer-item drawer-extras". I can't find what is needed to make an object disappear from the sidebar, so that it is not in the drawer on small screens.
You can add css to hide or transform these items by saying something like
#media (max-width 768px) {
.drawer-item {
display: none;
}
}
For information on nesting these media queries, you can check Using multiple #media (max-width) CSS
How can i set a default thumbnail size in smaller resolution? Because at the moment it is very tiny in 320x480 resolution.
I can't see the image, the link doesn't work however this will target all images, just replace img with your CSS class/ID and change the min-width value to the minimum width you would like the photos to be. Bearing in mind if you're making smaller images appear bigger, they will look blurry.
img { min-width: 80px; height: auto; }
I assume you're using the Photo Gallery module? If so you can simply apply width and height parameters to the module tag and it will automatically set the thumbnail size for you.
Basically the module syntax is as follows:
{module_photogallery,ID,rowLength,targetFrame,resultsPerPage,Width,Height,UseStandardMethod,ThumbnailAlgorithm}
So, if you wanted to set the thumbnail size at 480x640 for example, you would enter the following:
{module_photogallery,XXXXX(ID #),,,,480,640}
The thumbnail algorithm is very useful - be sure to read up about it along with further details here: http://kb.worldsecuresystems.com/134/bc_1345.html#main_Photo_Gallery_Modules