On the catalog/category page I would like images change when hover. Like clubmonaco.com I know how to do it on html/css but no idea on magento. Any help?
You could modify files in this directory:
app/design/frontend/base/default/template/catalog/product
for example (list/ and list.phtml)
or your template for example:
app/design/frontend/default/yourtemplate/template/directory with product files
CSS files you can find in:
skin/frontend/
You should also think, where the second image is stored. You can use "CSS-Sprites" for this case - a single image file, that contains both photos. The disadvantage is, that you have to customize every page, where magento shows product images.
Alternatively you have to define exact orders. First image is the front view, second image is always the back view.
The programming part is not really difficult. Look at
app/design/frontend/base/default/template/catalog/product/list.phtml
for the Catalog view. Path can vary, if you have a custom template. In the Magento backend there is a feature to show up the real path (system->configuration->development tools).
You can write your Javascript directly into the list.phtml. Magento also writes JS-code directly in the .phtml files. Of course it's not very pretty, but Magento is so complex; if other people work with the shop system, it will be easier to find.
Keep in mind, that the list.phtml contains two layouts: Grid and List View. Just if you do a change and wonder, why you can't see a change in the frontend ;-)
Related
I've a weird issue in my Drupal 9 website where a couple of regions (subfeatures and footer) get rendered differently in different pages with no consistent behavior.
They are loaded via the theme's default page.html.twig and should render inside the page js-layout wrapper as in below screenshot
But in some pages, it gets rendered outside the wrapper like in the below screenshot
This is simple website with no overrides on the theme level for the regions so this is quite strange
Without knowing the theme, it is difficult to give an answer. (Which theme is used, which templates (which Twig file provides the theme) and so on...
But let me try to give you a starting point:
Check all twig files of your theme
If there is a multiple for page, like: page.html.twig & page--article.html.twig. Then check the HTML structure for it
Check the region's conditions
In the page-twig templates, check if the HTML closing tags depend on the region conditions. Is there a condition that the div sometimes closes earlier?
I hope this will help you.
Sorry for the length, my problem is very simple, but specific.
I'm building a wordpress site that automatically imports image galleries from a Tumblr account, then styles and displays them. The backend is finished, and all that I need now is have all images in posts be displayed as thumbnail sized links. They are not behaving well with the importer (I've tried 6), so I have to edit the HTML display (rather than the images as they are uploaded).
I have decided to do this by applying class="attachment-thumbnail size-thumbnail" on all images on the site (in HTML). I have tested this and they will open the proper gallery in a lightbox as necessary so long as they belong to those two classes.
I have a two part problem.
I do not know PHP past basic syntax, and while I can intuit most of what is happening I don't trust myself to edit Wordpress source code without understanding exactly what I am breaking.
From other answers I've learned that I should most likely edit the wp_insert_attachment() function in post.php under wp_includes/. I have found the function, but don't really know where to go from there, as it does not appear to be specific to image attachments. I don't want to throw any errors by assinging image classes to non-image attachments. How do I add those two classes (attachment-thumbnail and size-thumbnail) to all post images (and only images)?
There is a single exception to this rule. I want a large image on the homepage, and have it not be a link.
It seems like the way to handle this would be to allow page attachments to be handled normally, while attachments that are both images and attached to posts should trigger this:
if [attachment is an image AND is on a post, not a page]:
<img src="https://whatever">
becomes
<img src="https://whatever" class="attachment-thumbnail size-thumbnail">
tl; dnr: ^^ that's all I need to happen, in PHP, in the right file, in Wordpress ^^
Thanks!
So likely you will want to do it via php but instead you could do it with javascript ie jQuery:
<script>
$(function() {
$("body img").addClass("attachment-thumbnail size-thumbnail");
});
</script>
Put that on any page or site header and it will add the class to all images. You can modify the search filter to suit.
You might need to re-call your lightbox initialization code too, or put this before it gets called initially.
I am using Plone 4.1.4 with Doormat and Diazo in an institute I work and the Footer has to be made manually by adding each column and item that links internally to items from main menu.
What I want is that this footer, which is the site map, to change automatically every-time some user create, edite or delete an item from the main menu (content folders).
When I got the job I noticed many of those links in footer are out of date, and as there are many users in their each sections of the institute that are allowed to change the structure, I know they won't update both folders and footer.
I searched the Internet for some product or tip but I cant' find anything that resolves that problem.
If your Diazo theme was created as a Python package using mr.bob or zopeskel, you probably already have z3c.jbot, which allows you to easily override templates, available. If so, you likely have a template_overrides or similar directory in the package. If so, just drop into it a file named plone.app.layout.viewlets.footer.pt with the contents:
<div i18n:domain="plone"
id="portal-footer">
<ul id="portal-doormat"
class="navTreeLevel0 visualNoMarker">
<tal:sitemap replace="structure context/##sitemap/createSiteMap" />
</ul>
</div>
Then style away!
Alternatively, you may replace the colophon by naming the file plone.app.layout.viewlets.colophon.pt.
If you aren't using a Python package for your theme (if the Diazo theme was created through-the-web) then you may use the portal_view_customizations tool in the ZMI to make the same template override.
You may wish to also customize the depth of the site map. That may be changed via the portal_properties tool, navtree_properties property sheet. Or, just use CSS to hide unwanted depth.
An alternative and much easier way to realize your demand, can be to use portlets instead of viewlets, in combination with the addons "Products.ContentWellPortlets" and "collective.portlet.sitemap":
1.) Hide the footer-viewlets via a GenericSetup-config like in this example:
http://svn.plone.org/svn/collective/adi.simplestructure/trunk/adi/simplestructure/profiles/default/viewlets.xml
2.) Assign a sitemap-portlet in the footer-area via a GenericSetup-config, similar to this example:
http://svn.plone.org/svn/collective/adi.simplestructure/trunk/adi/simplestructure/profiles/default/portlets.xml
Tip: First assign the sitemap-portlet via the Web-UI, then go to [SITE-URL]/portal_setup, search for "portlets", check its box and click the export-button on the bottom, to get the needed xml-file.
I've added some html code in my Blocks content and enabled Full HTML filter.
I've used relative paths for my images, such as "sites/all/themes/zen/zen/image.png"
I guess this is not correct because I need to change my paths depending on I'm in the home page or "node/id" page.
I guess I cannot use PHP inside blocks, thus I cannot use $base_url... how can add images path with only html ?
thanks
The previous answers provide a part of the solution, but here's a fuller scoop:
Hand-written HTML
If your site lives at example.com (i.e. it's the "root" site), then adding a front slash to your relative path will solve the issue, as others have suggested:
<img src="/sites/all/themes/zen/zen/image.png">
However, if your site lives at example.com/my-drupal-site, then you'll need to write it like this:
<img src="/my-drupal-site/sites/all/themes/zen/zen/image.png">
It really is better if you can use PHP to determine the appropriate path. If you're calling an image from a theme, you can use the Drupal function drupal_get_path to get the path like this:
$img_path = drupal_get_path('theme', 'zen') . '/zen/image.png';
And then you could be really Drupaly about it and use the theme_image function to generate the HTML for the image:
$img = theme('image', $img_path, 'My Image - Alt Text', 'My Image - Title Text');
Where $img now holds the HTML for the <img> tag and its src, alt, and title attributes. See the API documentation for drupal_get_path and theme_image for more information.
Point-and-click Solution
As jeffreymb points out, your easiest bet is to use a combination of a WYSIWYG editor and a built-in file handling module called IMCE to gloss over all these details for you. If you don't have access to the "PHP code" input format, this is the best solution.
So, steps:
Install the WYSIWYG module, as well as a WYSIWYG editor (I suggest CKEditor).
Install the IMCE module and IMCE WYSIWYG Bridge module, and enable the IMCE button for your WYSIWYG editor in its configuration settings for available Buttons.
See this post for a little more detail on that setup process, and make sure to read the documentation that the WYSIWYG module displays on its configuration page.
Once you have IMCE installed and integrated with your WYSIWYG, when you click the "Image" button in your WYSIWYG toolbar, your normal dialog should appear but with a new little icon to open the IMCE file browser. This file browser allows you to browse your files folder for images or to upload new files. It also supports a modicum of image manipulation, and will automatically generate the necessary HTML once you've selected an image.
I would recommend using the Pathologic module for this case. It is a filter that you can add to your input formats to convert relative URLs like that into proper URLs using your site's base URL. Plus it's useful if you have images in your RSS content as sites that re-publish the content (like feed aggregators, etc.) have the link to the full URL.
I use the CKeditor and IMCE modules to do this on my sites.
It is very user friendly and not that hard to set up.
Instead of the relative path, use the absolute path. So it'd be:
<img src="/sites/all/themes/zen/zen/image.png">
Note the slash at the beginning. The slash should be the only thing you need to do to convert your existing relative paths to absolute ones for use in straight HTML.
If you start your image paths with a slash ("/sites/all/themes/zen/zen/image.png") this will always be relative to your drupal root directory.
You could also simply select "PHP code" as the Input format, and use $base_url as you say.
I does this with cck blocks . The cck blocks is drupal module,it can put drupal fields into blocks
Is there a module in Drupal that allows me to put link at the end of a page?
http://lh6.ggpht.com/_SDci0Pf3tzU/Sfm7vF_MSiI/AAAAAAAAEtY/VX3BXaMOfSM/s400/linksatend.jpg
I tried to use menu and put it as a block at the footer, but the menu items are arranged vertically, instead of horizontally.
Is there anyway to do it without ( preferably) touching the CSS and HTML?
changing the menu items from vertically to horizontally is a matter of 1 or 2 css rules. which is why i doubt that there is a module for this. if you would post a link to your site, or the html + css, i could help with the css.
Links at the end of the page can be controlled by a few different things.
First, check the Blocks administration and see if there is a content area for the footer. Maybe there is a block there that is controlling these links.
Next, depending on well the theme is built, check the configuration options under Admin > Site Building > Themes > Conigure > (Your theme). Many have options to change what links display in the footer.
Lastly, check the page.tpl.php. They could also be hard-coded in the template (which is bad) and edited from there.
In terms of answering your question about 'a module to alter links', you can see that since the links can be controlled from different places, a module just for this purpose would be pointless. The correct way is to set the appropriate options in template.php so it can be configured in your theme settings.
You might have some luck using the Nice Menus module - it's intended to create animated menus but if you give it a flat menu tree, it might be close enough to what you want. If that doesn't work, there's about 100 modules dealing with navigation.
Still, the best way would be to place the menu's block in the footer and modify the theme to flatten it with CSS.
Assuming you don't won't to touch the theme, maybe because you're using an unmodified contrib theme, you can use either of two approaches:
create the block by hand as a custom HTML block, which gives you full control over the contents. The main downside is that you'll have to maintain it by hand instead of using admin/build/menus
create a PHP block, either custom (boo !) or in your site-specific module (better), to generate a block with markup appropriate for the theme you're using, based on the actual primary links, which you obtain from menu_primary_links(). Downside it that you have to create a site module if you don't already have one, or that you'll have to enable the PHP filter if you create it as a custom block.
This being said, I think you'd still be better off modifying the theme if it's a custom one, or creating a sub-theme for the theme you're using if it's a contributed one. It will be less work and, this being a matter of appearance, falls rather in theme scope than in module scope.