I'm trying to style a list of content generated by Drupal Views. I can edit the HTML output of fields but have no access to the CSS. The content includes an image which needs floating/aligning to the left so that text flows around it. The original image files are a variety of sizes. The HTML I'm using for the image field is:
<img src="[image url]" width="220" height="auto" align="left" />
However, in some cases where images are longer than others, I get an overlapping effect like this:
What I want is for them all to display like this:
How can I do this?
Drupal provides by default feature of cropping/scaling images. There's no point of providing larger images and scaling them down or cropping them with CSS. That's waste of resources (bandwidth).
Go to Configuration -> Media -> Image styles (from admin menu) and define style you need. It's super easy - you just need to name your style and the pick effect you want (i.e. "Scale & crop"), set dimensions you need and save new style.
Then you should start using that style. If your page is generated by view the find and edit that view. Find that image field and set it to use your new style.
Other way is to force displaying of images in your style from template file directly. Find where image is printed and use:
https://api.drupal.org/api/drupal/modules!image!image.module/function/image_style_url/7
First parameter is style name, so put name of style you just created. Other parameter is URI (not path, as mentioned on that page!). Print out (print_r or var_dump whole image object you have in template file and see how can you access image URI. It should be something like:
$node->field_my_image['und'][0]['uri'])
So pass that as second parameter.
Even if you don't have access to the CSS you can still use CSS by adding style in your HTML tags.
As to your overlapping problems, assuming that you have a div that contains your images use can set that div's styleto style="overflow:hidden". You can also just give enough space to the div that contain your image.
Related
I have a TYPO3 site with links to company documents. Since some file collections can be quite long I would like to make the font of the links smaller for specific pages.
I can set up a custom html file with links to files, and edit the font size, but that would invalidate the file collections.
How do I change the font size of the file collection links for specific pages only?
First: To change the font size, CSS is the best way to do this.
Second: If you only want to change specific pages, you need to be able to change class or id of that pages.
Solution: In a content element, you can change the layout of a content element, which effectively changes a class which is wrapped around the content element. Just test it by selecting another layout and see the class changing.
If you use a specific layout selection and change the content elements you want to change the font size, you can add this class to CSS.
To answer my own question:
The easiest way was to create a new template for the page, add "config.concatenateCss = 0" under "Constants" and "page = PAGE
page.includeCSS.myCustomStylesheet = path_to_file" under "Setup". Then specify the h4 in the CSS.
I'm trying to use a user style hack on a internal tool and i would like to keep it CSS only (so i can use the stylish extension i already use on every browser instead of adding grease monkey style extensions)
the system has the following html:
<a href="...">
<span>
<img src="...">
</span>
username
</a>
the image is a place holder as the system is not integrated with anything.
i can get user avatars in the company with a url like http://company.com/avatars/<username>.png
and CSS allows me to do things like
/* show link destination after the A tag contents */
a:after {
content: " (" attr(href) ")";
}
My plan is to add user-CSS to hide the useless image, and append a background to the A tag showing the company avatar for that user. There is nothing on the A tag properties that can help me. The only hint is at the A tag text node direct and last child.
is there any way to do that with CSS only?
since this is a user-style hack for a internal tool, the more bleeding edge tech the better. no need to support all browsers, care about perf, etc.
it is impossible.
there is no way to concatenate the usernames into the image. background attributes do not accept string concatenation like content. one would think the same rules for string values would apply to all css properties, well, content seems to be special.
as pointed on comments, it would be possible to have the full background url on the css rule and match based on the username, but then you would have to add one rule per username you want to match. not really an option over 1k records.
I'm using django-cms with djangocms_text_ckeditor and cmsplugin_filer_image.
Whenever I insert an image in a text block on a page and choose "Style > Styled Image (left)", the image appears as I want it to be in the WYSIWYG editor (that is, floating on the left with the text floating at its right).
But on the published page, the image is not floating, it is just left-aligned between two paragraphs.
What am I missing here ?
I faced the same problem yesterday. What I found after doing some research is that for the cmsplugin-filer plugins you have to create templates for the way you want them to be rendered. E.g., say I want an image to be rendered floating left with some padding and margin (like a box). I would do the following:
Create a css file in my app with the styles I want
In my templates folder create cmsplugin_filer_image/plugins/image/boxed.html. Basically boxed.html is like the default.html file you can find in the plugin code but with the css classes I want to apply to the image
Add a reference to my css file in boxed.html
For this to work you have to add this code to your settings.py
CMSPLUGIN_FILER_IMAGE_STYLE_CHOICES = (
('default', 'Default'),
('boxed', 'Boxed'),
)
CMSPLUGIN_FILER_IMAGE_DEFAUL_STYLE = 'boxed'
Once this is done, when you add an image to CKEditor you can select the style you want the image to be rendered.
Hope this help!
Here is the source for the plugin and the explanation by its author https://github.com/stefanfoulis/cmsplugin-filer#customisation
This question already has answers here:
When to use IMG vs. CSS background-image?
(31 answers)
Closed 9 years ago.
What's the best practice and established way to portray an image? I am working from the assumption that it shouldn't be done in HTML anymore so I am not using the img tag in my markup. Instead, I am linking the image in my CSS via background: url('dir'). If I am already going wrong with this assumption, let me know.
If linking an image in CSS is the correct (or at least a good, well established) way to go, then the next question is what HTML tag to use in the document? Technically, images can be applied to just about any element in HTML, so which one's the right one to use?
Case in point: Right now I am working on a row of icons where each icon has some text underneath it. At the moment, I have it set up as an unordered, horizontal list and I am applying the image and text in my CSS to each individual list item tag. However, there are several other ways I could do this. I could have a row of divs or spans, for example. Or I could use the img tag without defining the src property in the HTML and instead setting it in the CSS (at least I think this is possible). Or several other ways I can think.
What is the best practice in cases like this?
Images should be displayed with the <img> tag if the image is contextual information on the page. For example, if you have a web page showing custom swimming pools you build, your image of the swimming pools (under normal circumstances) should be set on the page using the <img> tag with an appropriate alt attribute.
// Shows a picture of a pool, provides contextual fallback text
<img src="pool.png" alt="The 'Custome' style pool." />
CSS background images are used more for stylist or decorations on the page. The background image of your webpage is not contextual, so it is set with a background image, for example. However, CSS background images are used for things such as sprites or JavaScript sliders. In these cases, special measures are taken to make sure they are still specified as contextual content (such as setting the title attribute).
// Alert icon is just a design element and does not
// provide context to the page
<div class="alert-icon"></div>
.alert-icon{background:url('alert.png');width:42px;height:42px}
It is also important to note that, by default, <img> will be printed and background-image will not. Chrome, as well as other browsers, now have an option to turn on background printing, but if you want to be 100% certain an image prints, <img> is the way to go.
TL;DR: For the majority of cases, use <img> for contextual images with proper alt attributes. Use CSS background images for decorations or sprites that do not convey context to the site.
Using CSS to display images using the background property is best if you want to display a sprite whose image can be manipulated via class or id. Other than that, using the <img> tag is still in practice.
How can I resize an image using HTML/CSS only (i.e no server code) while keeping its proportions and have a crop effect.
Details: I wish to resize it to a specified width, keep the proportions and if the height is bigger than a specified value to crop it to the specified height ?
Actually, I know how to do that using some server code but I don't want to do this. It would imply using a different file reference and refer the picture something like <img src="picture.php" />. I need to process the image in the same page that displays it.
What "bothers" me is that I have to send the image header so nothing else on the page will be displayed.
Is there a way to do something like that? Maybe from pure HTML/CSS? :P
I made a function that does something like that (except that "crop" thing) and it returns just width="" height="" and I use it like this <img src="image.jpg" resize("image.jpg") />, but I don't get how can i do that crop...
Thanks
ok, so i managed to find a way to do that from html/css. The whole idea was to get rid of that "extraheight" :
<div style="width:200px;height:200px;overflow:hidden;" >
<img src="image.jpg" width="200px" height="auto">
</div>
first my image is resized to desired width(keeping the proportions) and then giving a fixed height to containing div and setting overflow to hidden makes the script to display just the desired portion of the image.
You can't render an image and HTML in the same file because browsers depend on its content-type header to interpret it.
The content-type header of a HTML document is generally set to text/html whereas the content-type of an image is image/* (substitute * for image format). You could print image data to a HTML document, but since the browser is instructed to interpret it as text/html rather than an image its contents would be garbled.
You will need to link your <img> tag to a PHP file like you described. I'm not sure why that constitutes a problem; it's the right way to go about it. You could of course crop the image by manipulating its dimensions in HTML, but I don't recommend you do.
I think ImageMagick supports "resize to fit" and "resize to fill" methods, the latter being what you are looking for.
Before writing your img tag to the output buffer, save the image to the resulting proposed file name and let 'identify' extract the width and height of this image for you.
If you don't want to work with a seperate file but instead want the image data inline, try the data-uri method which newer web browsers support. This inlines the binary data stream of the image within the html file, so it is embedded.
You can use phpThumb, to resize and cropping the images on the fly. It uses the GD library to create thumbnails from images JPEG, PNG, GIF, etc.
create helper like:
<?php
echo '<img src="' . image_resize($path_to_image, SIZE_X, SIZE_Y) . '" />';
?>
so this helper will check if resized image already created or create new one. and in both cases it returns proper url to the new image.