SPECIAL OFFER: Only $69 for access to everything in OSTraining for 1 year! You save $75!  1
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

Separate views records to link to views not nodes

5 years 7 months ago - 5 years 7 months ago #122510 by iqsafe
I created a view and have put at the front page as in the site my site . Usually and as known that each field could link to the original node. In my case the view is composed of only 7 nodes records displayed on the front page. I want each title field links to a different view. Is this possible, and if so, how. Please attached picture for clarification. Thanks.

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

5 years 7 months ago #122525 by steve
Hi iqsafe

Yes, there's a few ways you can do this.

Perhaps the simplest is just to create a link field on these nodes. You can point the link field to the view.

Then do this: www.ostraining.com/blog/drupal/add-links-to-fields-in-views/
The following user(s) said Thank You: iqsafe

Please Log in to join the conversation.

5 years 7 months ago #122601 by iqsafe
Thanks and very interesting method. But I was frustrated to remember that nodes in such advertising site are created by users of the site not by admin. Is there any work around. Thanks.

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #122604 by iqsafe
Please disregard my above reply because I misunderstood at first.

Please Log in to join the conversation.

5 years 7 months ago #122613 by iqsafe
This went very smoothly. Thank you so much.

Please Log in to join the conversation.

5 years 7 months ago #122643 by Valentin
Hi iqsafe,
I'm glad Steve suggestion was helpful for you :)

Let us know if we can be of any help

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: iqsafe

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #122716 by iqsafe
Thanks Valentin, I am really happy at Steve tutorial because I learned something new. Here although I am happy with following a view approach rather than using a Div approach on my front page, I seem to have some troubles with styling on different browsers especially the Chrome and the Firefox, and also the Mobile. In Chrome there was no problem on both sides of the margins. The view ends, left and right distances from left and right side bar were equal . I reduced the overlapping in Firefox by reducing the image size by image style. I don't like smaller images because this will reduce attractiveness of the site. Also on the mobile same as on the Firefox laptop, there is an overlapping with right side bar shall I increase the width. I reduced it only by reducing the width through the image style. I included two images in order to further clarify the situation. Is there a solution for this. Thanks.

This message has attachments images.
Please log in or register to see it.

Please Log in to join the conversation.

5 years 7 months ago #122731 by Valentin
For the menu issue, add the custom CSS below:
ul#main-menu-links > li > a {
    min-width: 45px;
}

Clear Drupal and browser cache.

About the spacing issue, give a try to Firebug in order to troubleshoot the issue.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: iqsafe

Please Log in to join the conversation.

5 years 7 months ago #122748 by iqsafe

Valentin wrote: For the menu issue, add the custom CSS below:

ul#main-menu-links > li > a {
    min-width: 45px;
}

Clear Drupal and browser cache.

About the spacing issue, give a try to Firebug in order to troubleshoot the issue.

Kind regards,
Valentín


Thanks a lot, the CSS has worked. I am now on my way to try the modules you said about, in order to try to unify the appearance across two browsers.

Please Log in to join the conversation.

5 years 7 months ago #122786 by Valentin
Wonderful! I'm happy to help :)

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: iqsafe

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #122843 by iqsafe
I switched from view approach to Div approach to make a table with photos each of which lead to a relevant view. I am facing one strange thing that when I change the dimensions of photos in the CSS on the Block area, the photos dimensions do not change accordingly on the Firefox Browser. I reinstalled the Browser, the same thing persists. I almost reached a very despaired state, but I am hopeful that there is someone to help. I even cleared cash and history several times but to no avail. The Firefox remain adamant. I am including the code in the Block and also the CSS code that I am using.

The code first
<div class="imgcat"><a target="_blank" href="http://suquna.com/cars"><img src="http://suquna.com/sites/default/files/field/image/car_canstockphoto31457409.jpg" alt="سيارات" width="100" height="80" /></a><div class="desc">سيارات</div></div>
 
<div class="imgcat"><a target="_blank" href="http://suquna.com/electronics"><img src="http://suquna.com/sites/default/files/field/image/electronics.png" alt="سيارات" width="100" height="80" /></a><div class="desc">الكترونيات</div></div>
 
<div class="imgcat"><a target="_blank" href="http://suquna.com/jobwanted"><img src="http://suquna.com/sites/default/files/field/image/looking _for_a_job_1.jpg" alt="بحث عن عمل" width="100" height="80" /></a><div class="desc">باحثون عن عمل</div></div>
 
<div style="clear: both"></div>

CSS Code
.imgcat {
  margin: 5px;
    border: 1px solid #cc1;
    float: left; 
    width: 180px;
  }
 
.imgcat img {
 
 width: 100%;
 height: auto;
 
}
 
.imgcat: hover { 
border: 1px solid #777;
 
 }
 
.desc {
    padding: 15px;
    text-align: center;
}

Thanks for your help.

Please Log in to join the conversation.

5 years 7 months ago #122865 by iqsafe
When I wrapped the code of the block with

min-wdith: 750px

the three photos all went on one line with normal spacing from left and right (Firefox) but the dimesion of width of a photo remained unchanged (180)

This did not effect Chrome with a problem of also unchanged dimension and photos more closer to the left.

Please Log in to join the conversation.

5 years 7 months ago #122888 by Valentin
Hi iqsafe,

The site doesn't seem to be responsive, actually. I checked the home page .
Am I missing something? Please clarify

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 7 months ago #122913 by iqsafe
All I wanted here is to build a front page with 8 photos each of which link to a view. Here I attached an example picture. The problem here, let's start with the Chrome, the photos width and height were fixed at 180px X .... they do not like to change when I do from the code at the block area. Also the three photos that I started with do not center between the left and right side bars. In Firefox, the third photo always come down to the second row, also they are obstinate to change dimensions from the code. I tackled the come-down of third photo by wrapping the the code with the CSS min-width: 750px. But this I do not feel a good solution for both browser. Here the problem why the photo dimensions do change and how they center in the content region in both browser. If you need further clarification please do not hesitate to ask me. If you want my user name and password I can also send to your email. I am also using firebug in Firefox and Inspect in Chrome but no fruitful results and got stuck. Code and CSS are attached in my previous post. I would be much grateful for your help.

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #122964 by Valentin
Hi iqsafe,

I see 3 images in yur home. Each one is linked to 3 different pages (I assume those are the 3 views you mentioned).

This is the CSS that is being used:
.imgcat {
    border: 1px solid #cc1;
    float: left;
    margin: 5px;
    width: 180px;
}

Change the width value depending to your needs, taking in mind width property has higher priority over min-width.

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 7 months ago #122972 by iqsafe
OK I will return to you with further clarifications on this matter, but now I would like to know what is the best approach to hide the content below the photos.with the pager as well..can you guide me please .. thanks

Please Log in to join the conversation.

5 years 7 months ago #122983 by Valentin
May you elaborate?

Below the photos I only see a caption for each image:

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

5 years 7 months ago #122989 by iqsafe
You are right and I am sorry for using two CSS classes
.node-teaser {
   display: none;
 }
.pager {
 display: none;
 }

Now I have removed them and the regular nodes have returned to show up.

I do not think using these classes is a good practice?
one of the reason here is that pager are removed from all pages

Please Log in to join the conversation.

5 years 7 months ago #123018 by Valentin
Very cool!

It's not the best solution, however is an easy alternative that could be complex in another way.

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #123029 by iqsafe
Thanks Valentin. Here I am seeking your help on what is the exact class to remove the pager only from the front page and also the nodes that appear below photos. When I used a class for removing the pager, it removed it from all pages. I used the Firebug and the Inspect but could not find the partucular class responsible for this. I want to keep only the photos with their caption.

Please Log in to join the conversation.

5 years 7 months ago #123050 by Valentin
To remove the pager only in homepage, try this custom CSS:
body.front .pager {
    display: none;
}

Where body.front points to the body tag with class "front" only available in homepage.

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: iqsafe

Please Log in to join the conversation.

5 years 7 months ago #123057 by iqsafe
This has worked perfectly, thank you so much for your help. Can I myself also find this class by the Firebug or Inspect of either browser, because I also tried to find but could not.

Please I also want to remove the nodes from the front page, is this also possible through a specific class.
Thanks for all your helps that I have been offered so far.

Please Log in to join the conversation.

5 years 7 months ago #123061 by Valentin
Wonderful!
  • To remove the nodes from frontpage, edit each node displayed in homepage.
  • In "Publishing options" tab (in the bottom) uncheck "Promoted to front page"
  • Save changes

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!