I'm new to Drupal and I've been given a project to fix a couple of bugs on...
I've got a view with several fields, it displays OK when there is a picture but when there is no picture (and thus the need to display a default picture), then a broken image link appears...For some reason the path points to a different directory...
This works:
<div class="item-header"> <div class="views-field views-field-field-selection-photos"> ... <div class="content">
<div class="field field--name-field-photo field--type-image field--label-hidden field--item"> <img src="/sites/default/files/somepicture.jpeg?itok=sJ6SOjXo" width="445" height="334"/>
This does not, due to the path pointing to ../sites instead of /sites:
<div class="item-header">
<div class="views-field views-field-field-selection-photos"><div class="field-content"><img src="../sites/default/files/structures/photos/defaultpic.jpg" width="100%" />
I've been looking at theming fields but that seems overkill, I wonder if there's a nice and clean way to sort this out rather than override a template or anything else that would seem a bit too much...
Thanks
Related
I'm trying to use gulp-uncss to remove unneeded CSS from a Zurb Foundation website.
Within the site I'm using Foundation's Equalizer to make two columns the same height. This works by adding a data- attribute to an element:
<div data-equalizer>
<div data-equalizer-watch>
<div>
<div data-equalizer-watch>
<div>
<div>
When the page loads Foundation determines the height of the two elements and injects an inline style to set the height of the elements to the greater of the two element heights. The result is:
<div data-equalizer>
<div data-equalizer-watch style="height: 256px;">
<div>
<div data-equalizer-watch style="height: 256px;">
<div>
<div>
When I add gulp-uncss to my gulpfile.js the Equalizer no longer works. The data- attributes are still present in the HTML file, but the inline styles are not added.
I've tried using the ignore option in gulp-uncss to ignore height but had no luck. The inline style is no longer added to HTML document.
Is there an option in gulp-uncss that will allow the equalizer to do it's job?
I was able to get gulp-uncss working using the ignore parameter in UnCSS.
Adding:
ignore: [/^meta.foundation/, /f-topbar-fixed/, /contain-to-grid/, /sticky/, /fixed/]
to uncss() kept all the necessary CSS. The most important of these is /^meta.foundation as this allows the Foundation JS to inject the styles. The remaining values /f-topbar-fixed, contain-to-grid, /sticky/ and /fixed/ are all specific to the Foundation JS modules I'm using. The above work for a .sticky topbar.
If you're using other JS modules you'll need to determine what classes are being injected and add those to the the ignore array.
There is a similar question on here, but the solution doesn't work, and I can't comment on it, so I need to post a new question.
<div class="cycle-slideshow"
data-cycle-caption-plugin=caption2
data-cycle-pager="#cycle-pager"
data-cycle-overlay-fx-sel=">div"
>
<div class="cycle-overlay"></div>
<img src="/sites/default/files/images/banner_imag_1.jpg" title="Collaboratively administrate turnkey channels whereas virtual e-tailers." alt='Seamlessly empower fully researched growth strategies and interoperable internal or "organic" sources.' />
<img src="/sites/default/files/images/blue-sky-basin-vail_0.png" title="What if world-leading organizations teamed-up to develop and scale technology and business solutions to global poverty?" alt="Efficiently unleash cross-media information without cross-media value." />
</div>
<div id="cycle-pager"></div>
Instead of two pager items, I'm getting four. Any insight would be very appreciated.
Thanks!
This probably happened because you have inserted library for pagination. All you need is delete the line:
<script src="js/cycle/jquery.cycle2.pager.js"></script>
In the file template/Panels/SideCategoryList.html there is line %%SNIPPET_SideCategoryList%%.
When I modify the file I think this line is referring to (template/Snippets/SideCategoryList.html) I see no change in the resulting output at all.
Any idea where the underlying template file is?
UPDATE: according to this post it could be a 'hidden snippet' which can't be edited. Can anyone confirm this? If so, what is the purpose of template/Snippets/SideCategoryList.html?
template/Panels/SideCategoryList.html
<div class="CategoryList" id="SideCategoryList">
<h3>Categories</h3>
<div class="BlockContent">
<div class="%%GLOBAL_SideCategoryListTypeClass%%">
%%SNIPPET_SideCategoryList%%
</div>
</div>
</div>
template/Snippets/SideCategoryList.html
<li class="%%GLOBAL_LastChildClass%%">
%%GLOBAL_CategoryName%%
%%GLOBAL_SubCategoryList%%
</li>
As you can see from the above template code, between the Panels and Snippets SideCategoryList.html there isn't a <ul>. Making changes to template/Snippets/SideCategoryList.html makes no difference. This seems to point to %%SNIPPET_SideCategoryList%% pulling in code from elsewhere.
Judging by the superfish classes being present on the ul, it sounds like you're using the 'Flyout menu' as the 'Category Menu Style' (This option can be found in Setup & Tools > Store Settings > Display).
When using the Flyout menu, the snippet that is being referenced is not 'Snippets/SideCategoryList.html'. Instead, try using the 'Snippets/FlyoutTree.html' and 'Snippets/FlyoutNode.html' templates.
Got a very particular problem here:
I've been developing a tumblr-hosted site locally, using the API to pull in posts without having to copy and paste the project into tumblr a million times. I decided I liked the API better and would just use that in production, but now that it's time to deploy I realize that I have to go back to the custom theme, {block:Posts} method.
I have the post feeding into a Cycle2 slideshow, with 3 slides containing 3 posts each for a total of 9 playlists viewable without going back to the archive. This method works perfectly with the api, but is getting messed up in the custom theme. Here's my current code:
<div class="cycle-slideshow">
{block:Posts}
{block:Text}
<div class="slide-wrapper">
<div class="post">
{block:Post1}
{block:Title}<h2>{Title}</h2>{/block:Title}
<div class="blog_item">
{Body}
</div>
{/block:Post1}
</div>
<!--two more posts before end of slide... -->
</div>
{/block:Text}
{/block:Posts}
</div> <!--end of slide wrapper - 2 more of these before end of slideshow div..
I also tried scrapping the post numbers, but still no dice. In tumblr's docs, they say that
Example: {block:Post5}I'm the fifth post!{/block:Post5} will only be rendered on the fifth post being displayed.
I'm wondering if "being displayed" refers to the html visibility of the post, and if so, if that's interfering with the cycle plugin? The results are one ill-formatted post per slide, and then after cycling through 2 blank slides, the next oldest post takes its place. I'll be pleasantly surprised if anybody has ever had a similar problem but I would kill for some advice. Here's the development site for reference (and the second carousel is working because it's still hooked up to the api). thanks!!
Generally speaking, the following code is what you'd want to have 3 slideshows with 3 posts each.
Note that in the Additional Settings on the Customize screen, you'd have to set the post count to 9 per page in order for this to work properly. I wrapped it in an Index Page block, otherwise this is going to look nasty on a Permalink Page.
{block:IndexPage}
{block:Posts}
{block:Post1}<div class="cycle-slideshow">{/block:Post1}
{block:Post4}<div class="cycle-slideshow">{/block:Post4}
{block:Post7}<div class="cycle-slideshow">{/block:Post7}
<div class="slide-wrapper">
{block:Text}
<div class="post">
{block:Title}<h2>{Title}</h2>{/block:Title}
<div class="blog_item">
{Body}
</div>
</div>
{/block:Text}
{block:Photo}
...
{/block:Photo}
...
</div>
{block:Post3}</div>{/block:Post3}
{block:Post6}</div>{/block:Post6}
{block:Post9}</div>{/block:Post9}
{/block:Posts}
{/block:IndexPage}
However, if you're wanting 3 slideshows with the post types split between the slideshows, the code would look more like the following.
Note that in this scenario, if you were to have 4 texts posts out of 9, all 4 text posts would end up in the Text slideshow. You'd have to use Javascript or CSS to remove or hide the additional posts if you're very strict about your 3.
{block:IndexPage}
<div class="cycle-slideshow">
{block:Posts}
{block:Text}
<div class="slide-wrapper">
<div class="post">
{block:Title}<h2>{Title}</h2>{/block:Title}
<div class="blog_item">
{Body}
</div>
</div>
</div>
{/block:Text}
{/block:Posts}
</div>
<div class="cycle-slideshow">
{block:Posts}
{block:Photo}
<div class="slide-wrapper">
...
</div>
{/block:Photo}
{/block:Posts}
</div>
{/block:IndexPage}
If you need me to clarify anything, let me know.
I am having a great deal of difficulty getting my head round displaying secveral resources on one page with Ditto. I cant seem to get TV's to show along with my content.
Heres how I have set it out:
I have a page with my Ditto call:
[!Ditto? &parents='134' &orderBy='createdon ASC' &tpl='temp'!]
I have a simple chunk called temp set up as such:
<div id="content">
[*articlename*]
[+content+]
</div>
And I have a template with the TV articlename assigned to all the resource under parent 134.
The content shows fine but none of the TV's do. Can anyone point me in the right direction? thanks!
I think the problem is in your syntax. You need to use a placeholder tag in the chunk for your TV:
Try this:
<div id="content"> [+articlename+] [+content+] </div>
I have found the answer: You are meant to use [+articlename+] for 'chunk TVs' rather then [*articlename*]. This is different to getResources.