Problem
I'm doing some maintenance and changes on a Drupal site, but I'm not an expert. My problem is the following. I have a view that produces an HTML table by fetching some field values and putting them into the table columns. One of these field is an image. Unfortunately each image has a different size (images are uploaded by users), and so the overall table looks ugly. I would like to resize/scale images so that they all have the same width. I know I can use CSS to set the image width to a fixed value, and let the height adjust accordingly:
<img src="..." style="width:70px"/>
Unfortunately I don't know how to make Drupal output this custom HTML when processing my view. Currently the produced HTML looks like this:
<img
class="imagefield imagefield-field_imgsmall"
width="100"
height="39"
alt=""
src="http://www.mysite.org/sites/default/files/foobar.png?1292948397">
and I guess this is produced by one of the view's fields (namely field_imgsmall).
First question is: what is that number after the ? in the src URL? And where does it come from? (Each image has a different number in the corresponding src URL)
What I've tried
I've noticed that in the "edit view" mode, when selecting a field, I can check the option Rewrite the output of this field, and there I can mix HTML and substitution patterns. However, I've seen that one of the substitution patterns that's available to me ([field_imgsmall_fid]) is actually producing the entire HTML above ... so I can't customize it.
What can I do? Am I going in a totally wrong direction?
You should look into the imagecache module, which allows you to resize images (and cache the results, so the resizing process rarely happens).
Here's a walkthrough:
http://2bits.com/articles/drupal-using-imagecache-with-views-and-cck-imagefields.html
Related
I'm scraping image urls and text from tables and I want to know how to collect nothing (or at least no url) for a cell whose image is missing. I don't want to remove any rows since I want to reproduce the table as is. Here's an example of a table with missing images and the html to the right.
I'm using the following in google sheets:
=importxml(D1,"//div[#class='colsx immagine']/img/#src")
=importxml(D1,"//div[#class='coldx domanda']")
which works fine to get the image urls and text for each row if the images are all there (as on this page). But if any images are missing then I collect an url for the (wrong) image below in the table. I want to skip url collection if there's no img url.
I just starting to learn xpath, and I suspect I need to use the | or not to fix this, but need some help because nothing I've tried works.
Thanks
You can solve this by adding another predicate. So assuming that you want to list the URLs of the //div[#class='lista'] with an image, you can use
=importxml(D1,"//div[#class='lista' and div/img]/div[#class='colsx immagine']")
=importxml(D1,"//div[#class='lista' and div/img]/div[#class='coldx domanda']")
=importxml(D1,"//div[#class='lista' and div/img]/div[#class='coldx risposta active gius']")
and so on.
This should skip all class 'lista' div's without an img tag and select its URLs.
I need to create a page division in Alloys XML, like a <div> tag in HTML
Basically it needs to be able to be variable size, have attributes like font, colour, border ETC and most importantly it needs to have sub tags such as label and button inside
I've tried using sperate views from this and requiring them into the current window. I've also tried using modules, but I'm not sure if I did it correctly.
My question is, what would be the best way to go around this?
You can create a Widget for this: https://wiki.appcelerator.org/display/guides2/Alloy+Widgets
It is basically a reusable component which you can pass parameters into and it has a own controller, style and view file.
In your XML file you can use it like this:
<Widget src="foo" name="button"/>
I am using CKEditor 4.4.5.
Users use the text colour icon to change the colour of a word which works fine. When one checks the underlying HTML, it shows:
<p><span style="color:#FF0000">test </span></p>
However when clicks the "source" icon again to return to the standard non HTML view, the colouring has gone, although the underlying HTML is still correct. If you take this HTML and render it in a browser it will work correctly. So it seems that CKEditor is not able to render text colour correctly, unless freshly changed using the text colour icon.
We had customers thinking that the colour had not changed, and then trying to fix the issue in the HTML, which resulted in the total corruption of the HTML due to human error.
Is this a bug, or am I missing something?
Thanks.
As for CKEditor it might so happen that Advanced Content Filter will strip undesired tags / attributes.
If you don't have colorbutton plugin, CKEditor will strip this span (see standard demo).
You have 2 simple solutions:
Add colorbutton plugin.
Simply add to your config:
config.extraPlugins = 'colorbutton';
Add ACF proper rule.
config.extraAllowedContent = 'span{color}';
For more informations about ACF see Content Filtering (ACF).
While creating and learning bootstrap page. I came across the content attribute of css I read few articles and I got how it works. But following code snippet shows me an image icon but the content attribute value really isn't the image url but a code. I'm not clear as how we can show the image without the url and where is the image coming from?
.test.glass i:before {
content: "\e001";
}
Following is the html element to show an image icon using above css:
<span class="test glass"><i></i></span>
But what is "\e001" is that an image code or something else?
they are utf8 codes. there are plenty of sites describing the glyphs for different standard fonts but you can also define your own font set with whatever images you choose as whatever character.
if you use a webfont, from fontello for example but are plenty of sites like that one, you can define what image to use as character \e0001 and whenever you want to use that image, you must make sure you use that font-face for the element and use the utf8 code to display the image. in html it would be someting like <span class="iconfont"></span>. if you add the image with css then is like in your example.
My website uses very large images so we can optimize for retina devices. In my WordPress site we produce 1200x640 images and constrain the size of them to be 600x320 within the theme template.
For example: <img src="image/path" width="600" height="320" />
As a result, my RSS feed contains large images (1200x640) and when we go to use them in our MailChimp template within RSS Feedblocks, the images blow out the size of the table cell. Is there anyway to wrap this MailChimp feedblock tag with a span tag and set a max-width? We are looking constrain the image size to (600x320) within the MailChimp newsletter template without having to alter the RSS feed. Is this possible?
*|FEEDITEM:IMAGE|*
I've done the same in many newsletters and advise against the comments above (few mail clients support 'background-size: cover' well, if at all.
The technique that has seemed to work best for us is to keep your table cells at whatever their width but then in the style attribute of the image itself set a max-width: 100%. This has it honor the maximum width of its parent rather than its 'natural' image size. If you can't edit the image tag itself, finding its class and adding the style max-width in your newsletter's style should also work pretty well.